How does facebook's Share a link feature work?

Question

I'm trying to implement a feature like that where a user inputs a url and when displaying that url I want to have a custom display (an embed object if it's a video from youtube, a thumbnail if it's an image link, title and excerpt of body if it's a normal link).

How can such a feature be realized?

Answer 1

I guess you have to construct it by yourself by manually parsing the kind of URL you get. If it is an image url, well then you just have to rescale it and in case the user clicks on it, then handle that by opening the original one somehow.

If it is a link to some youtube video, then you have to take a look at how the embedding of Youtube videos works. You can just copy the code that is provided by Youtube itself, and then exchange the parts with the URL to the video with the URL you got from your user.

I did never implement something like that, but I assume it should work somehow like this.

Greets, Juri

Answer 2

There is a new idea called oEmbed that a few sites support (Flickr, Vimeo and a few others) that addresses this problem. oEmbed site

Otherwise, just check the site against a list of ones you pick and then pull out the relevant bits to construct an embed link.

Answer 3

I liked the idea of oEmbed a lot but unfortunately it doesn't has that much adoption yet. oohEmbed tries to solve this issue by building oEmbed for many websites.

For the feature to work, it needs the server's interaction where I believe the following scenario is how it works

Assume that we have the site humanzz.com and that it provides such feature

1. A user enters a url on the humanzz.com's webpage and presses a button like facebooks' preview button
2. An AJAX call is made to a dedicated page on humanzz.com
3. humanzz.com does calls the remote website and gets its data
4. The AJAX call now returns the page's data (oEmbed JSON object)

This involves so much server's overhead.

I really wanted to do it using JavaScript as the server's role was only to bypass "Same Origin Policy"'s restrictions.

oohEmbed allows bypassing the server's step by specifying a callback parameter to oohEmbed so that the JSON object returned is passed to a callback function on your page. An example illustrating this is as follows

Add a script tag dynamically to your page

< script type="text/javascript" src="http://oohembed.com/oohembed/?url=http%3A//www.amazon.com/Myths-Innovation-Scott-Berkun/dp/0596527055/&amp;callback=myCallBack">&lt; /script>

This would result in executing myCallback(oEmbedJSONObject) which is great.

The problem with that solution is you still have to have a fallback for websites that don't have oEmbed representations.