How to get og / meta resource attributes?

Question

I am making an application that retrieves user tweets on Twitter.

These channels contain links to external resources such as Artciles, Webpage or YouTube videos.

I get the Twitter JSON API from these channels, but therentnt include og: content attributes. And I would like to catch them and show on my site.

Like this StackOverflow question:

 <meta name="og:type" content="website" /> <meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/ [e-mail] ?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="/questions/804128/how-can-i-check-classes-that-ends-with"/> 

I would like to receive this data for each shared resource in each tweet. Therefore, I think that for each tweet (which for me is a box) it makes the client part of the ajax request, loads the html and parses it, extracts og:title , og:description , og:type and og:image .

Is this a better approach? How to parse this data in javascript / jquery?

Answer 1

These og: attributes are Open Graph Protocol attributes, there are many ways to get this data: you should check the Open Graph Protocol parser codes, which can be very useful for you, and this PHP and jQuery Facebook parser .

You can also check out this https://stackoverflow.com/a/1273737/ about parsing PHP and this PHP Opengraph parser and dynamically use them using ajax calls.

Lastly, this question https://stackoverflow.com/a/412960/ about jquery and pure JavaScript analysis is very interesting and can really help you.

I hope you find what you need !;)

Answer 2

DISCLAIMER: OpenGraph.io is a commercial product that I work and support.

As you mentioned, often there are no OG tags to work with. There are all sorts of scenarios that you may come across (e.g. coding, misuse of HTML tags, etc.). If you want to handle boundary cases, I would recommend http://www.opengraph.io/

One of the main advantages is that it will output information, such as a title or description (if you need it), from the content on the page if OpenGraph tags do not exist.

To get information about the use of the site (the link must be encoded in the URL):

 $.ajax('http://opengraph.io/api/1.0/site/http%3A%2F%2Fwww.washingtontimes.com%2F') .done(function(data){ console.log(data); }); 

Which will return something like:

 { "hybridGraph": { "title": "Washington Times - Politics, Breaking News, US and World News", "description": "The Washington Times delivers breaking news and commentary on the issues that affect the future of our nation.", "image": "http://twt-assets.washtimes.com/v4/images/logo-twt.4b20fb5d7b29.svg", "url": "http://www.washingtontimes.com/", "type": "site", "site_name": "Washington Times " }, "openGraph": {...}, "htmlInferred": {...}, "requestInfo": {...} }