Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

336
Views
How Facebook link preview happens?

When you type a URL into facebook, it automatically comes up with the "post a link" feature. With most websites, it automatically loads a selection of images it pulls from somewhere in the page to go alongside the link and description. does anyone have an idea of how to implement that same feature for our own site without any FB API etc.. just javascript or JQuery ?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Due to security restrictions, JavaScript cannot load any page from any server. Facebook actually asks the Facebook servers for information about that page, and the servers in turn query the page to extract the information. You, too, will need a server-side implementation of this.

Aside from that, it's fairly simple: use an HTTP client library for your language of choice to connect to the provided URL, then use an HTML parsing library to extract the title tag, identify a significant piece of text in the body tag, and extract the img tag sources that seem the most appropriate.

Once your server is able to extract information about a page, it's a fairly simple exercise to call it through AJAX.

over 4 years ago · Santiago Trujillo Report

0

@Keshan.

I developed myself a Facebook Link Preview with PHP and jQuery that is on my website. Take a look... The source code is free... I didn't post the whole code here because they are many files... But if you prefer the code to be posted here, tell me and I'll post.

It's available on Github https://github.com/LeonardoCardoso/Facebook-Link-Preview

Facebook Link Preview - PHP + jQuery

over 4 years ago · Santiago Trujillo Report

0

I think following steps are involved

  • Using Javascript find the links in the written text
  • From the found links get the last link in the text (FB shows only for last link)
  • Using AJAX send this link detail to a server side page (PHP/ASP/JSP etc.)
  • The server side page gets the required data (from Meta tags) including
    • Title (Preferably Open graph og:title if missing from <title>
    • Description (Preferably Open graph og:description if missing from <meta name="description" ....
    • Images (Preferably Open graph og:image if missing from <img src=....
  • In PHP you can get these datas either using curl or file_get_contents and parse for required data detailed above. Not sure about other Language.
  • Show the result thus found in the AJAX request.

Additionally I think FB stores the data, once found, in database and 1st queries there. This helps them to get faster result and hence same article shared and liked generate the image and details from the stored data.

You will need Javascript to show this preview in runtime (while you write in the textarea). However if you only need it after posting of data it can be done with pure server side language (you can avoid javascript) and following above steps just remove AJAX call.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!