Facebook Url Expander with jQuery Ajax and PHP

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

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.

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'));

</script>

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";

}
//usage

$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;

}

//usage

$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";
  
 

if(valid_facebook_url($url))

{

//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>";

}

}

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.