Question

I have a site for shopping recommendations, which allows users to post the urls for items they recommend.

The form currently includes just a single input for a url to the main product page.

If a user were to post a link like below:

http://www.homedepot.com/webapp/wcs/stores/servlet/ProductDisplay?productId=203533553&storeId=10051&langId=-1&catalogId=10053&cm_sp=BlackFriday-_-11_23-_-Hero_C-_-349_Each_GE_Washer_Dryer_Special_Buy#.UK-DHuOe_VQ

I would want to show an image tag of the og:image included in this url.

Using the facebook open graph protocol page, I see that the example url above does indeed have an og:image

http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.homedepot.com%2Fwebapp%2Fwcs%2Fstores%2Fservlet%2FProductDisplay%3FproductId%3D203533553%26storeId%3D10051%26langId%3D-1%26catalogId%3D10053%26cm_sp%3DBlackFriday-_-11_23-_-Hero_C-_-349_Each_GE_Washer_Dryer_Special_Buy%23.UK-DHuOe_VQ

How do I go about extracting the url to the og:image?

Answer 1

I ended up using Nokogiri like below, while relying heavy on this tutorial by Railscasts.

def photo_from_url(url)
  if !Nokogiri::HTML(open(url)).css("meta[property='og:image']").blank?
    photo_url = Nokogiri::HTML(open(url)).css("meta[property='og:image']").first.attributes["content"]
    self.photo = URI.parse(photo_url)
    self.save
  end
end

I found this to be more reliable than the opengraph gem:

url_with_photo = opengraph.fetch(url)
url_with_photo.image

as this second method sometimes doesn’t work, even on pages that have an og:image tag in the source code. (I didn’t implement it completely wrong, as it did work on some pages…).