Facebook like status update link extractor

Actually there’s nothing special about this, what you are looking isnt what i want to explain, i mean my main concern isnt to teach you how to make facebook like link extractor, my main concern was to learn PHP’s DOM extention. In short PHP DOM extension provides standard set of objects and interfaces to manipulate HTML as well as XML document. It represents HTML/XML page as objects. we can easily access HTML documents objects (tags) like “img”,”title” by writing few lines

  $doc = new DOMDocument();
  @$doc-&gt;loadHTML($html);
  $tags = $doc-&gt;getElementsByTagName('img');
  $title = $doc-&gt;getElementsByTagName("title");

$doc = new DOMDocument();

@$doc->loadHTML($html);

$tags = $doc->getElementsByTagName('img');

$title = $doc->getElementsByTagName("title");

$tags = $doc->getElementsByTagName(‘img’); will return set of all the images as an array.
You can read more about PHP DOM here
The DOMDocument class
DOM XML (PHP 4) Functions
Document Object Model
Talking about real facebook.com link extractor, its much faster than our Facebook like status update link extractore, its because every time you make request from Facebook like status update link extractor script it visits that site and extract the contents where facebook allready maintains the database of url, title, descriptions and images. so its much faster than this script. you you extents this script and use database to store the details or may be you can also use php memcache. This will make this script Facebook like status update link extractor much faster. I would have done it but i have to move to next script so i have again left this to you 😛

Final Product – Facebook like link extractor

facebook like status update link extractor

Facebook like status update link extractor – Browser Support

IE	Tested in IE 6,7,8,9
Firefox	10.0 (I believe it should work in all GECKO engine browsers like netscape)
Chrome	16
Safari	5.1.2

CSS

   *{
		font: 12px "lucida grande",tahoma,verdana,arial,sans-serif;
		margin: 0px;
		padding: 0px;
   }

   .container{
	 border: 1px solid #B4BBCD;
	 width: 500px;
	 min-height: 100px;	
	 position: relative;
	 margin-left: 30%;
	 margin-top: 5%;
   }
  .link-input {
	border-bottom: 1px dashed #B4BBCD;
  }
  .link-input textarea{
	height: 60px;
	margin: 1px;
	width: 98%;
	vertical-align: top;
	margin-top: 5px;
	border: none;
    font: 12px "lucida grande",tahoma,verdana,arial,sans-serif;
	overflow: auto;
	padding-left: 5px;
	/* hack for crome */
	outline:none;
  }
  .button-holder{
	background: #F2F2F2;
	height: auto;
	height: 33px;
	font-weight: bold;
  }
  .button-holder #fb-button{
	background: #5F78AB;
	border: 1px solid #29447E;
	color: #FFF;
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-top: 5px;
	margin-right: 4px;
	float: right;
	padding: 2px 5px;
	box-shadow: 0 1px 1px #FFFFFF inset;
	cursor: pointer;
  }	
  .button-holder #fb-button:hover{
	background: #4A618E;
  }
  .extract{
	display: none;
	padding: 10px;
	height:180px;
  }
  .float-left{
	float: left;
	clear: right;
  }
  .extract-thumb {
	width: 30%;
  }
  .extract-info {
	width: 60%;
	margin-left: 5px;
  }
  .extract-info span{
	width: 98%;
	display : block;
	text-align : left;
	margin : 5px 0px;
  }
  .extract-info #title{
	font-weight: bold;
  }
  .extract-info #url{
	color : #797979;
	font-size: 11px;
  }
  .nav{
	text-align: left;
	width: 180px;
  }
  .nav img{
	cursor: pointer;
	float:left;
  }
  .nav #navount{
	color : #797979;
	font-size: 11px;
	width:60%;
	float:right;
  }
  .loading{
	background:url("images/loading.gif") no-repeat;
	width: 16px;
	height: 11px;
	float: right;
	margin: 5px;
    margin-left: 95%;
    position: absolute;
	display: inline;
    width: 16px;
	visibility: hidden;
  }
  .delete{
	background:url("images/delete.png") no-repeat scroll;
	display: inline-block;
	width: 15px;
	height: 15px;
	cursor : pointer;
	margin-left: 95%;
  }
  .delete:hover{
	background:url("images/delete.png") no-repeat scroll 0px -30px;
  }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

font: 12px "lucida grande",tahoma,verdana,arial,sans-serif;

margin: 0px;

padding: 0px;

}

.container{

border: 1px solid #B4BBCD;

width: 500px;

min-height: 100px;

position: relative;

margin-left: 30%;

margin-top: 5%;

}

.link-input {

border-bottom: 1px dashed #B4BBCD;

}

.link-input textarea{

height: 60px;

margin: 1px;

width: 98%;

vertical-align: top;

margin-top: 5px;

border: none;

font: 12px "lucida grande",tahoma,verdana,arial,sans-serif;

overflow: auto;

padding-left: 5px;

/* hack for crome */

outline:none;

}

.button-holder{

background: #F2F2F2;

height: auto;

height: 33px;

font-weight: bold;

}

.button-holder #fb-button{

background: #5F78AB;

border: 1px solid #29447E;

color: #FFF;

font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

font-size: 12px;

font-weight: bold;

margin-top: 5px;

margin-right: 4px;

float: right;

padding: 2px 5px;

box-shadow: 0 1px 1px #FFFFFF inset;

cursor: pointer;

}

.button-holder #fb-button:hover{

background: #4A618E;

}

.extract{

display: none;

padding: 10px;

height:180px;

}

.float-left{

float: left;

clear: right;

}

.extract-thumb {

width: 30%;

}

.extract-info {

width: 60%;

margin-left: 5px;

}

.extract-info span{

width: 98%;

display : block;

text-align : left;

margin : 5px 0px;

}

.extract-info #title{

font-weight: bold;

}

.extract-info #url{

color : #797979;

font-size: 11px;

}

.nav{

text-align: left;

width: 180px;

}

.nav img{

cursor: pointer;

float:left;

}

.nav #navount{

color : #797979;

font-size: 11px;

width:60%;

float:right;

}

.loading{

background:url("images/loading.gif") no-repeat;

width: 16px;

height: 11px;

float: right;

margin: 5px;

margin-left: 95%;

position: absolute;

display: inline;

width: 16px;

visibility: hidden;

}

.delete{

background:url("images/delete.png") no-repeat scroll;

display: inline-block;

width: 15px;

height: 15px;

cursor : pointer;

margin-left: 95%;

}

.delete:hover{

background:url("images/delete.png") no-repeat scroll 0px -30px;

}

Few lines of HTML

JavaScript (jQuery)

$(document).ready(function(){
    var imgArray;
    var title;
    var desc;
    var index = 0;
    $("#fb-button").click(function(){
        var link = $("#link").val();

        if(/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test($("#link").val()))
        {
            imgArray = new Array();
            index = 0;
            title = "";
            desc = "";
            $(".loading").css("visibility","visible");
            if(link.length){
                // Encode url so we can have single line url instead of different parts
                elink = encodeURIComponent(link);
                $.ajax({
                    type: "POST",
                    url: "link_details.php",
                    data: "link="+elink,
                    success: function(responce){	
                        if(responce != "0")
                        {
                            var json = $.parseJSON(responce);
                            $.each(json, function(key, val) {
                                //alert(val.src);

                                if(val.src != null){
                                    imgArray.push(val.src);
                                    $("#trick").attr("src",val.src);
                                    //$(".array").append("
"+val.src);
                                }

                                //console.log(val);
                                if(val.title != null)
                                    title = val.title;
                                if(val.url != null)
                                    link = val.url;
                                if(val.desc != null)
                                    desc = val.desc;

                            });
                            //alert(title);
                            if(imgArray.length &gt; 0){
                                // if images found then show nav icons
                                $(".nav").show();
                                // also hide image holder
                                $(".extract-thumb").css("visibility","visible");

                                if($(".extract-thumb").html() == "")
                                    $(".extract-thumb").append('&lt;/pre&gt;
&lt;img style="width: 100px;" src="'+imgArray[0]+'" alt="" /&gt;
&lt;pre class="brush:javascript:"&gt;');
                                else
                                    $(".extract-thumb").html('&lt;/pre&gt;
&lt;img style="width: 100px;" src="'+imgArray[0]+'" alt="" /&gt;
&lt;pre class="brush:javascript:"&gt;');
                            }else{
                                // if images not found then hide nav icons
                                $(".nav").hide();
                                // also hide image holder
                                $(".extract-thumb").css("visibility","hidden");
                            }
                            //console.log(title);
                            $(".extract-info #title").html(title);
                            $(".extract-info #url").html(link);
                            $(".extract-info #desc").html(desc);
                            showcount(index);
                            $(".extract").slideDown("slow");
                        }else{
                            alert("This url doesnt exists !");
                        }
                        $(".loading").css("visibility","hidden");
                    }	
                });

            }else{
                alert("Please enter link");
            }
        }else{
            alert("Enter proper url, with http / https and www Ex: http://www.google.com");
        }

    });

    $("#next").click(function(){
        if(index &lt; imgArray.length){
            index++;
            $(".extract-thumb").find("img").attr("src",imgArray[index]);
            showcount(index);
        }
    });
    $("#prev").click(function(){
        if(index &gt; 0){
            index--;
            $(".extract-thumb").find("img").attr("src",imgArray[index]);
            showcount(index);
        }
    });
    $(".delete").click(function(){
        $(".extract").fadeOut("slow");
    });

    showcount = function(index){
        index = index + 1;
        if(index  0)	
            $("#navount").html("Showing "+index+" of "+imgArray.length);
    };

});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

$(document).ready(function(){

var imgArray;

var title;

var desc;

var index = 0;

$("#fb-button").click(function(){

var link = $("#link").val();

if(/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test($("#link").val()))

{

imgArray = new Array();

index = 0;

title = "";

desc = "";

$(".loading").css("visibility","visible");

if(link.length){

// Encode url so we can have single line url instead of different parts

elink = encodeURIComponent(link);

$.ajax({

type: "POST",

url: "link_details.php",

data: "link="+elink,

success: function(responce){

if(responce != "0")

{

var json = $.parseJSON(responce);

$.each(json, function(key, val) {

//alert(val.src);

if(val.src != null){

imgArray.push(val.src);

$("#trick").attr("src",val.src);

//$(".array").append("

"+val.src);

}

//console.log(val);

if(val.title != null)

title = val.title;

if(val.url != null)

link = val.url;

if(val.desc != null)

desc = val.desc;

});

//alert(title);

if(imgArray.length > 0){

// if images found then show nav icons

$(".nav").show();

// also hide image holder

$(".extract-thumb").css("visibility","visible");

if($(".extract-thumb").html() == "")

$(".extract-thumb").append('</pre>

<pre class="brush:javascript:">');

else

$(".extract-thumb").html('</pre>

<pre class="brush:javascript:">');

}else{

// if images not found then hide nav icons

$(".nav").hide();

// also hide image holder

$(".extract-thumb").css("visibility","hidden");

}

//console.log(title);

$(".extract-info #title").html(title);

$(".extract-info #url").html(link);

$(".extract-info #desc").html(desc);

showcount(index);

$(".extract").slideDown("slow");

}else{

alert("This url doesnt exists !");

}

$(".loading").css("visibility","hidden");

}

});

}else{

alert("Please enter link");

}

}else{

alert("Enter proper url, with http / https and www Ex: http://www.google.com");

}

});

$("#next").click(function(){

if(index < imgArray.length){

index++;

$(".extract-thumb").find("img").attr("src",imgArray[index]);

showcount(index);

}

});

$("#prev").click(function(){

if(index > 0){

index--;

$(".extract-thumb").find("img").attr("src",imgArray[index]);

showcount(index);

}

});

$(".delete").click(function(){

$(".extract").fadeOut("slow");

});

showcount = function(index){

index = index + 1;

if(index 0)

$("#navount").html("Showing "+index+" of "+imgArray.length);

};

});

View Demo

Download code below

[sociallocker id=”1764″] Download
[/sociallocker]

Facebook like status update link extractor

15 Comments

Ben says:

February 4, 2012 at 12:59 am

This is absolutely awesome Amit. How can you make it so it automatically extracts the pasted in link and also get rid of the actual url itself. That is exactly what Facebook does. Thanks and awesome job again.

Rajesh Namase says:

February 6, 2012 at 7:13 pm

Cool trick, I’ll try this.

rohit says:

March 26, 2012 at 8:00 pm

hello amit . really u saved my many days . i have been searching for something which could be really well coded and easy to understand for data extraction . this is the best yet i came across . very well made . and also browsed this website . awesome work friend . m subscribing . hope 2 see many much articles for noobs like us . thanks 😉

- Amit says:
  
  March 26, 2012 at 8:35 pm
  
  Thanks john, for appreciating my work !!!
  
tom says:

April 19, 2012 at 1:19 pm

hy! I have a problem with your script on PHP 5.3.8. – SQL-Server version: 5.1.52
some links (http://www.rtl.de, http://www.cafe.ba, http://www.youtube.com) works fine and others (e. g. http://www.bild.de, http://www.taff.de, ….) don’t.
Error Message: “This url doesnt exists !”

- Amit says:
  
  April 21, 2012 at 6:54 pm
  
  This is because u forgot to add “http://” in the url i just tried “http://www.bild.de/” and it worked for me. it shows description and 112 thumb images. check once again with http://
  
Facebook like comment script using php jquery and ajax - Amit Patil says:

May 18, 2012 at 6:44 pm

[…] facebook like status update link extractor […]

Ajax table adding removing rows dynamically using javascript animation - Amit Patil says:

May 26, 2012 at 8:18 pm

[…] Facebook like status update link extractor […]

richardboss says:

June 4, 2012 at 8:07 am

I have been searching for something which could be really well coded and easy to understand for data extraction. Use something like cURL to get the page and then something like Simple HTML DOM to parse it and extract the elements you want.

Stephin says:

June 4, 2012 at 9:02 pm

nice

Alexis says:

July 15, 2012 at 9:06 am

Thanks very nice blog!

Aruba says:

July 29, 2012 at 4:02 pm

Heya i am for the first time here. I found
this blog and I find It truly useful & it helped
me out much. I hope to give something back and help others like
you aided me.

- Tarsem Singh says:
  
  June 19, 2013 at 8:59 am
  
  Thanks for script 😀
  
paras dalsaniya says:

February 11, 2015 at 10:16 am

I am using the angular js in my site and i need link extractor using angular js
Is It possible using the angularjs ???

- Amit says:
  
  February 18, 2015 at 7:03 am
  
  Yes its absolutely possible
  
Ario says:

June 11, 2015 at 3:06 pm

Hi Amit,

I learn can you advise how save data base or i need loc img,title for send mysql thanks for you

Hublaa says:

March 8, 2016 at 8:20 pm

Really nice Tutorial, glad to have found this site.

Facebook like Status update Link extractor – Best Plugin Jquery says:

October 1, 2016 at 11:24 am

[…] Read More […]

Facebook like status update link extractor

Final Product – Facebook like link extractor

Facebook like status update link extractor – Browser Support

CSS

Few lines of HTML

JavaScript (jQuery)

Download code below

Related

15 Comments

Leave a Comment X

Let your friends know what are you reading

Final Product – Facebook like link extractor

Facebook like status update link extractor – Browser Support

CSS

Few lines of HTML

JavaScript (jQuery)

Download code below

Related

You may also like

15 Comments

Leave a Comment X

Let your friends know what are you reading