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.
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.
Related Posts :
17 to “Facebook Like URL data Extract Using jQuery PHP and Ajax”
Post comment
Who Am I

Zeeshan Rasool
Software Engineer - PHP
Lahore - Pakistan
Skype: zeeshan-rasool
gTalk: zishan.rasool85
Categories
- AJAX (24)
- Codeigniter (16)
- CSS (7)
- Facebook (8)
- Joomla (1)
- JQuery (34)
- Miscellaneous (3)
- Mootools (1)
- MySQL (4)
- PHP (43)
- SEO (2)
- Technology (6)
- Twitter (1)
- Web Development (58)
Archives
- August 2010 (7)
- July 2010 (9)
- June 2010 (9)
- May 2010 (8)
- April 2010 (17)
- March 2010 (13)
- February 2010 (3)
Tags
Comments
- Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL | Bodeezy Bux on Ajax Rating System: Create Simple Ajax Rating System using jQuery AJAX and PHP.
- Adam on Create Animated Tabs using JQuery and CSS.
- ZeeShaN on Reloaded: Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax.
- Marco on Reloaded: Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax.
- Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax | Programmer Heaven on Facebook Style TextArea with Wall Posting Script using jQuery PHP and Ajax.
ZeeShaN





nice work, but there seems to be a problem with the image extraction. i tested a website, the script shows me 11 images, but the switch between them (left and right arrow icon) does not work, shows only 2 of these 11… i tested: blog.macropage.de
Thanks michabbb, it gets error with some urls but not for all. I think when it gets html of url this issue is inside content. Or we can place a check with if image exist then include it.
Nice stuff i hope will work out
[...] awesome tutorial which is 99% same as facebook style. Check the demo and download the source code.Source Link $(document).ready(function() { $('#social_nav_vertical li a').hover(function() { [...]
thanks….. your tutorial was very good…….
@webandrank, @badboyz … Thanks dear
Hi ZeeShaN,
I have been looking for this exact solution for my website. I am not a software engineer and have no idea what to do with the code you provide. It’s great that the tutorial shows how the code works.
Could you kinkdly give me some tips on how I would integrate it into my site:
I have talked to so many people about being able to populate content into my site, “share to facebook” style and no one has been able to point me in any solution orientated direction.
This is great that you have done this.
Thank you,
Josh
Oh, to be clear. I want to use your “facebook URL data extract” to populate content INTO my site, not have the code as a button to EXTRACT content from my site.
Thanks,
Josh
Thanks Josh: Its my try always that I would create some out standing and awesome work for my users. This code is even simple and clear You just need some help about php to get it done. Good Luck !
Hi Zeeshan,
Thanks for your time in response, which is very kind of you
To be clear, I want to make your code into a “widget”, that sits in my bookmarks bar, similar to the “share to facebook” widget, so that I can use your code to populate content INTO my site, with the fb look , as I browse the web. Here is my site:
http://simulacrum.squarespace.com/ ( it’s not much, lol )
Is your code the correct solution for my need? My web host company says they don’t use .php
As I don’t know “a .php” from an API, ( just kidding, but you get my point – I’m not a coder ) I have been running around in circles trying to accomplish, to this novice, what seems to be a very basic need that all the pros I’m talking to are not understanding:
I just want to:
- “share to facebook style” link and meta data ( just like your example above )
-INTO my site ( as a way of populating content in same )
-Exactly like I “share to facebook style” links into by fb profile.
Simple enough to this layman. I’ve been working on driving a solution to this for 4 days, talking to ‘experienced” developers. You’ve got the idea with “URL extraction” I just don’t know how to get my “browser bar” button/widget done.
Am I explaining this clearly?
Thanks for your time in response my friend,
Josh
Very nice
Very good script .. well explained. Only prob that michabbb mentioned and you have given solution too..
Thanks Zeeshan for posting.
Thanks Amit,
hi 9c script it worked perfectly.
but my problem is if try to attach ****http://www.punchng.com/Articl.aspx?theartic=Art20100827632898***
i get ****http://www.punchng.com/Articl.aspx?*** instead of
The Punch:: PDP primaries begin September 11
http://www.punchng.com/Articl.aspx?thear...
The primaries are to elect the party’s candidates for the State Houses of Assembly, the National Assembly, governorship and the presidential elections.
i will be grateful if u can help me out on this
Hi , actually some urls creates problem with this. I already mention this above. Thanks
[...] liked my previous facebook like tutorials, specially facebook style wall posting application and facebook like url data extracting with jquery. So I thought to give another script which a web developer wants to put into his [...]
I am still learning but I like this one
Can you give more detail how do I add a database and its link shows post 20 links page