Facebook Url Expander with jQuery Ajax and PHP

Last modified on by Karthikeyan K

I hope everyone noted this feature in Facebook. If you copy and paste any facebook url in your status, facebook will display the exact data from the url you have shared.

I have used facebook social embed plugin to achieve what we need in this tutorial

Previously I had published how to embed videos and images from Youtube, Vimeo, Soundcloud, Dailymotion, Flickr, Instagram etc using an URL

Facebook Url Expander using jQuery and PHP

Facebook Url Expander using jQuery and PHP


In this tutorial, I’m going to explain you how to fetch all those datas via facebook url using jQuery and PHP

You can able to embed facebook videos, Images, Galleries, Posts, Pages, and user profile via url.

Embedding Facebook Post via Url

Embedding Facebook Post via Url

How to Embed Facebook User Profile using JQuery and PHP

How to Embed Facebook User Profile using JQuery and PHP

Embed Facebook Fan Page using jQuery and PHP

Embed Facebook Fan Page using jQuery and PHP

Step 1 – Facebook Javascript SDK

Please the below code on before body tag. The below script will load the facebook SDK asynchronously

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.2";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

How to Validate Facebook Url?

We need to validate the facebook url to get the data from facebook. Please find the below code the verify the facebook url in PHP

//used to check valid facebook url
function valid_facebook_url($url){
if(!preg_match('/^(http\:\/\/|https\:\/\/)?(?:www\.)?facebook\.com\/(?:(?:\w\.)*#!\/)?(?:pages\/)?(?:[\w\-\.]*\/)*([\w\-\.]*)/', $url)){
return false;
return true;

In order to embed facebook user profile, We need to validate the facebook url and also we need to fetch the user’s cover and profile picture.

How to Fetch Facebook User Profile Picture?

function get_facebook_profile_pic($userID)
return "http://graph.facebook.com/$userID/picture?type=large";

$user_profile_pic = get_facebook_profile_pic("itzurkarthi");
echo "<img src=\"" . $user_profile_pic . "\" />";

How to Fetch Facebook User Cover Picture?

The easiest way to get user / page cover picture is using graph API

We need to parse this url to get the cover picture http://graph.facebook.com/{user_id or page_id}?fields=cover

After passing this url into get_data function, it will parse the url and return as JSON format as below

"cover": {
"id": "10201477056271189",
"offset_y": 9,
"source": "https://scontent.xx.fbcdn.net/hphotos-prn2/v/t1.0-9/1014415_10201477056271189_1047933443_n.jpg?oh=ad2a55222e201f61d47f9a69b4c16dbe&oe=56018D79"
"id": "1319387360"

After decoding the data using json_decode we can get the source of the cover image.

//you can pass userID or PageID
function get_facebook_user_cover_pic($userID)
$json_data = get_data("http://graph.facebook.com/$userID?fields=cover");
$data = json_decode($json_data);
return $data->cover->source;

$cover_pic = get_facebook_user_cover_pic("itzurkarthi");
echo "<img src=\"" . $user_profile_pic . "\" />";

Below php code will get the facebook url as input and give us the respected content

$graph_path = "http://graph.facebook.com";

//remove domain and get the path
$path = remove_domain_and_get_path($url);

//used to fetch content from the url via curl
$raw_data = get_data($graph_path.$path);

$data = json_decode($raw_data, true);

if(!empty($data['id']) && !empty($data['likes']) && $data['likes'] != '') //if likes not empty means, its a facebook page
echo "<div class=\"fb-page\" data-href=\"$url\" data-width=\"500\"></div>";
} else if(!empty($data['id']) && $data['id'] != '') // if ID is there means its a User Profile
echo get_profile_box($path, $data['name']);
} else { //Video / Post / Image
echo "<div class=\"fb-post\" data-href=\"$url\"></div>";

View Live Demo

I hope you will like this tutorial. Feel free to contact me via comment If you need any help in integrating this feature in your project.

You May Also Like

4 Responses

  1. Praveen Kumar says:

    Excellent ..this is what I have been searching for days. Makes my life easy now.

    Thanks Karthikeyan.. Your tutorials are awesome and its very useful 🙂

  2. Sean Mumford says:

    The quality of the PHP code in this tutorial is all procedural and could benefit from being rewritten as a simple helper class. Since I had some free time today, I decided to do just that: https://gist.github.com/thepsion5/673fd3828f8205fd47d5

  3. Leandro Jerez says:

    sorry..but dont work when i write a fb page

  4. Dalington O Nwankwo says:

    please verify my mail

Leave a Reply

Your email address will not be published. Required fields are marked *