javascriptjqueryhtmlfacebook-opengraphmeta

How can I retrieve og/meta attributes of a resource?

I'm making an application that retrieve tweets on Twitter of a user.

Those feeds contains links to external resources, such as Articles, Webpage or YouTube video.

I get trought the Twitter API the JSON of these feeds, but there arent included the og: attributes of the content. And I'd like to catch them and show to my website.

Such as this question of StackOverflow:

<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="How can I check classes that ends with?" />
<meta name="og:description" content="I have some elements such as:
    &amp;lt;div class=&quot;button 17-facebook-dashboard-check&quot;&amp;gt;Elem1&amp;lt;div&amp;gt;
    &amp;lt;div class=&quot;button 18-google-dashboard-check&quot;&amp;gt;Elem2&amp;lt;div&amp;gt;
    &amp;lt;div class=&quot;button " />
<meta name="og:url" content="https://stackoverflow.com/questions/19001883/how-can-i-check-classes-that-ends-with"/>

I'd like to catch those informations for each shared resource on each tweet. So I think I'll, for each tweet (which for me is a box) do an ajax request client side, download the html and parse it, retrieving og:title, og:description, og:type and og:image.

Is this the best approch? What's about parse this data in Javascript/Jquery?

Solution

  • These og: attributes are Open Graph Protocol attributes, there are many way to get these datas : you should check the codes of Open Graph Protocol parser which may be very usefull for you, and this PHP and jQuery Facebook link parser.

    You can also check this StackOverflow Question about PHP parsing and this Opengraph PHP parser and dynamically use them with ajax calls.

    Finally, this StackOverflow question about JQuery and pure JavaScript parsing is very interesting and could really help you.

    Hope you'll find what you need ! ;)