How does the link feature on Facebook work?

Question

I've been searching about but have found no comprehensive answer, all I want to know is this, when I put a link into Facebook, it generates the title, description and an image for said site - how?

What process takes place for it to do this?

Answer 1

Facebooks servers look at the link that was posted and extract certain data from it. It could be the title, an image or some text as a summary. How the servers decide what to take and what to ignore depends on how the HTML is built.
In order for developers to make sure that the facebook servers see the correct information og:tags are placed on their pages.s Examples would be:

• og:title - The title of the link preview.
• og:image - An image URL which will be used in the preview.

They appear like this in the HTML markup of the page :

<meta property="og:title" content="The Rock"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

---

If you want to see this in action, you can use Debugger Tool that facebook has provided. This tool shows you exactly how facebook views the url, what information it sees and if there are problems with viewing the information of the URL, it will also bring your attention to them.

You can read more about the Open Graph Protocol, and how to use it on facebook here.

Answer 2

It get's that information from the source of the page you linked.

The title of the page from whatever is in between the title tags and it takes the first image that is displayed on the page.

Answer 3

I assume you mean when you share a link to Facebook. Facebook finds the title in the <title> tag of the website. The description is either taken from the description meta tag in the HTML document or from text on the website. Since this isn't completely reliable you are allowed to edit the description before you post the link. I think the same goes for the title.

The image is chosen from the images that Facebook can find in the document of the link you've provided. You also get to pick which image to use when you're posting the link, or you can choose not to display an image.

I don't know any more details about this than what I've written above, and I couldn't find any documentation on the topic either. The above is pretty much what you need to know to use the feature anyway, and to plan any website you plan on being shared on Facebook accordingly.

---

The technical term for how the extract the data from your link is Web scraping. It's simply a matter of obtaining the raw HTML if the site you wish to scrape (You can use CURL to do that, or PHP's file_get_content or a multitude of other ways) then searching for the data you with to extract.

Extracting the title is easy. If you were to use Regular Expressions, you could write one that fetches the content between the <title></title> tags of the website, here is a simple example: (?<=(\<title\>))(.*)(?=</title>)

Similar Regular Expressions can be used to find all image links on the site, as well as sample content.

Answer 4

Ah yes the good ol link feature in facebook. I looked into how to do this when I was developing a similar feature for my site projectclimb.com

Essentially it completes these steps

1) Client requests (via AJAX) the url to be loaded/called on a facebook server via AJAX

2) Facebook server performs an http get request then parses the returned HTML and stripping out everything except the title, description tags as well as any images.

3) Facebook server repackages this information and sends it back (via AJAX) to the client which displays a nice control with all this info neatly displayed

It sounds more complicated than it really is .. didn't take too long to replicate this for my site.