Jul
25

Facebook Like URL data Extract Using jQuery PHP and Ajax

You have seen in Facebook, that how we give a url and it extract data such as images, title and description. Here now you can get this amazing script at 99Points. You have seen amazing and popular facebook style tutorials which can help you to get some amazing effects on your websites. I have created this awesome tutorial which is 99% same as facebook style. Check the demo and download the source code.

JQuery Code

// <![CDATA[	
$(document).ready(function(){	
 
// delete event
$('#attach').livequery("click", function(){
 
	if(!isValidURL($('#url').val()))
	{
		alert('Please enter a valid url.');
		return false;
	}
	else
	{
		$('#load').show();
		$.post("fetch.php?url="+$('#url').val(), {
		}, function(response){
			$('#loader').html($(response).fadeIn('slow'));
			$('.images img').hide();
			$('#load').hide();
			$('img#1').fadeIn();
			$('#cur_image').val(1);
		});
	}
});	
// next image
$('#next').livequery("click", function(){
 
	var firstimage = $('#cur_image').val();
	$('#cur_image').val(1);
	$('img#'+firstimage).hide();
	if(firstimage <= $('#total_images').val())
	{
		firstimage = parseInt(firstimage)+parseInt(1);
		$('#cur_image').val(firstimage);
		$('img#'+firstimage).show();
	}
});	
// prev image
$('#prev').livequery("click", function(){
 
	var firstimage = $('#cur_image').val();
 
	$('img#'+firstimage).hide();
	if(firstimage>0)
	{
		firstimage = parseInt(firstimage)-parseInt(1);
		$('#cur_image').val(firstimage);
		$('img#'+firstimage).show();
	}
 
});	
// watermark input fields
jQuery(function($){
 
   $("#url").Watermark("http://");
});
jQuery(function($){
 
	$("#url").Watermark("watermark","#369");
 
});	
function UseData(){
   $.Watermark.HideAll();
   $.Watermark.ShowAll();
}
});	
function isValidURL(url){
var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

if(RegExp.test(url)){
	return true;
}else{
	return false;
}
}
// ]]>

index.php

<input type="hidden" name="cur_image" id="cur_image" />
<div class="wrap" align="center">
 
	<div class="box" align="left">
 
		<div class="head">Link</div>
		<div class="close" align="right">
			<div class="closes"></div>
		</div>
 
		<br clear="all" /><br clear="all" />
 
		<input type="text" name="url" size="64" id="url" />
		<input type="button" name="attach" value="Attach" id="attach" />
		<br clear="all" />
 
		<div id="loader">
 
			<div align="center" id="load" style="display:none"><img src="load.gif" /></div>
 
		</div>
		<br clear="all" />
	</div>
 
</div>

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

Enter your email address:

Delivered by FeedBurner

fetch.php

I have get images and title using fopen method of php but for description I used get_meta_tags() function which returns meta tags of url. After getting all images I just put a loop and get all images which size is greater than 100px so that small images should not be included. I have created this tutorial separate from our facebook style wall posting and comment application and facebook profile edit. However if you want to add this functionality in that script just download all files and add your code.

<?php
$url = $_REQUEST['url'];
$url = checkValues($url);
 
function checkValues($value)
{
$value = trim($value);
if (get_magic_quotes_gpc()) 
{
	$value = stripslashes($value);
}
$value = strtr($value, array_flip(get_html_translation_table(HTML_ENTITIES)));
$value = strip_tags($value);
$value = htmlspecialchars($value);
return $value;
}	
 
function fetch_record($path)
{
$file = fopen($path, "r"); 
if (!$file)
{
	exit("Problem occured");
} 
$data = '';
while (!feof($file))
{
	$data .= fgets($file, 1024);
}
return $data;
}
 
$string = fetch_record($url);
/// fecth title
$title_regex = "/<title>(.+)<\/title>/i";
preg_match_all($title_regex, $string, $title, PREG_PATTERN_ORDER);
$url_title = $title[1];
 
/// fecth decription
$tags = get_meta_tags($url);
 
// fetch images
$image_regex = '/<img[^>]*'.'src=[\"|\'](.*)[\"|\']/Ui';
preg_match_all($image_regex, $string, $img, PREG_PATTERN_ORDER);
$images_array = $img[1];
?>
<div class="images">
<?php
$k=1;
for ($i=0;$i<=sizeof($images_array);$i++)
{
	if(@$images_array[$i])
	{
		if(@getimagesize(@$images_array[$i]))
		{
			list($width, $height, $type, $attr) = getimagesize(@$images_array[$i]);
			if($width >= 50 && $height >= 50 ){
 
			echo "<img src='".@$images_array[$i]."' width='100' id='".$k."' >";
 
			$k++;
 
			}
		}
	}
}
?>
<!--<img src="ajax.jpg"  alt="" />-->
<input type="hidden" name="total_images" id="total_images" value="<?php echo --$k?>" />
</div>
<div class="info">
 
	<label class="title">
		<?php  echo @$url_title[0]; ?>
	</label>
	<br clear="all" />
	<label class="url">
		<?php  echo substr($url ,0,35); ?>
	</label>
	<br clear="all" /><br clear="all" />
	<label class="desc">
		<?php  echo @$tags['description']; ?>
	</label>
	<br clear="all" /><br clear="all" />
 
	<label style="float:left"><img src="prev.png" id="prev" alt="" /><img src="next.png" id="next" alt="" /></label>
 
	<label class="totalimg">
		Total <?php echo $k?> images
	</label>
	<br clear="all" />
 
</div>

Download all files and use this awesome tutorial.

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.


  • [...] Facebook Like URL data Extract Using jQuery PHP and Ajax | 99Points – Posted in Delicious Link [...]

    January 10 2012
    CommentsLike
    • Deb

      Your code not work.

      December 10 2011
      CommentsLike

      • Thanks for the codes. If you want to see this in .Net, take a look at this open-source project:

        http://nalgorithm.wordpress.com/2011/12/05/embedded-url-representation/

        It is actually a class library, which is called by an MVC application client by using JQuery and its AJAX features.

        December 06 2011
        CommentsLike
        • Debugmode

          Its very helpful. But in Facebook, what is does is when user paste URL in text-area it will automatically extract url data and display it in div. How can we do like this in our project?
          Another issue i got stuck is when user type url in text area and when user press space facebook will extract url details. how can we do this also? Is there any new updates guys for this?

          November 09 2011
          CommentsLike
          • ZeeShaN

            Yes you are right.

            October 23 2011
            CommentsLike

            • get a better webhost and server? I assume the lag is caused by processing power required to curl the site and possible lag when downloading it. I too have this issue.
              My script also failed when the total_count of images was above 9 I had to add:

              if(firstimage < parseInt($('#total_images').val())){
              

              to ensure the whole number was read correctly
              you also dont need the .livequery extension anymore either the builtin .live works great for me.
              other than that thanks for such a great post!

              October 20 2011
              CommentsLike
              • Andrew

                Could you supply a script on how to integrate this into the ‘wall’ script and store data into Mysql through Php as I am new to this web-design scene and I have found All your tutorials Most Helpful so far, just stuck with the ‘integration into the ‘wall’ script’, yours most thankfully :-)

                October 04 2011
                CommentsLike
                • Ilija

                  The demo is not workning not in chrome or mozila

                  October 02 2011
                  CommentsLike
                  • Joseph

                    Hi, Great work. Thanks for the code.. I would like to know how to get URL content like say a news displayed

                    October 01 2011
                    CommentsLike
                    • ZeeShaN

                      Hi Andrew,
                      you can add this to any page if you know working in jquery. You can just integrate it into there and storing the returned data into same table where you are storing posting of wall.

                      September 29 2011
                      CommentsLike








                      Enter your Email:

                      Click Here for Popular

                      Who I Am

                      Zeeshan Rasool

                      Software Engineer - PHP
                      Lahore - Pakistan

                      zeeshan(@)99points.info
                      Skype: zeeshan-rasool
                      gTalk: zishan.rasool85

                      Categories

                      Tags

                      Comments