Menu
How have they done this smart thing that when you paste a youtube link in "What are you doing right now?" then there comes up in Links, youtube picture + title + description? how have they done this, and is it hard to do? Example of doing this would be great!
253
The recognition in Facebook works for most links, and not just from the top ones like YouTube. So my guess is that they try to find out if the page contains a link to an alternate representation such as a feed. When they find that link, they make a call to get the feed contents. Feed formats are mostly standardized RSS or Atom, and have clearly identifiable properties such as title, thumbnail, description, etc.
So lets say you had a YouTube video link such as http://www.youtube.com/watch?v=0Mz4NTozNXw. In its source, it contains the following links with alternate representations that can provide the required metadata:
<link rel="alternate" type="application/json+oembed" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D0Mz4NTozNXw&format=json" title="Crispy Onion Rings Recipe - How to Make Crispy Onion Rings" />
<link rel="alternate" type="text/xml+oembed" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D0Mz4NTozNXw&format=xml" title="Crispy Onion Rings Recipe - How to Make Crispy Onion Rings" />
If we were to fetch the contents of the link with type="text/xml+oembed", we get the following XML back:
<oembed>
<provider_url>http://www.youtube.com/</provider_url>
<title>Crispy Onion Rings Recipe - How to Make Crispy Onion Rings</title>
<html><object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/0Mz4NTozNXw&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/0Mz4NTozNXw&fs=1" type="application/x-shockwave-flash" width="480" height="295" allowscriptaccess="always" allowfullscreen="true"></embed></object></html>
<author_name>foodwishes</author_name>
<height>295</height>
<thumbnail_width>480</thumbnail_width>
<width>480</width>
<version>1.0</version>
<author_url>http://www.youtube.com/user/foodwishes</author_url>
<provider_name>YouTube</provider_name>
<thumbnail_url>http://i1.ytimg.com/vi/0Mz4NTozNXw/hqdefault.jpg</thumbnail_url>
<type>video</type>
<thumbnail_height>360</thumbnail_height>
</oembed>
From this you can get the title, and thumbnail url information which can then be displayed to the end user. It's a generic enough approach to be able to handle most online links. Maintain a catalogue of link types you support, such as:
application/atom+xml
application/rss+xml
application/json+oembed
application/json+oembed
...
And check if any of the links on the page match the types that you support. If it does, then follow that link, and get the required information. Knowing the type attribute gives you information about the format to expect for parsing beforehand.
135
One way of doing this is to use the Youtube Data API (http://code.google.com/apis/youtube/2.0/developers_guide_protocol_video_entries.html).
You send the video id, which is in the link to a video, to the api, and it returns all the data you need in an xml/JSON format, depending on what you specify in the url.
Example:
If you were given the video link http://www.youtube.com/watch?v=NWHfY_lvKIQ, you could get all the info about the video by using this link, http://gdata.youtube.com/feeds/api/videos/NWHfY_lvKIQ. The data returned contains all the information about the video, including title, description, and a thumbnail.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
