View Demo

Its been so long, after switching from windows to Ubuntu.Things are more easy, attractive ans secure.
This Tutorial is for creating a FACEBOOK LINK LINK SHARING INTERFACE.
The script used php, javascript expressions, jquery and some css too.
Ok, lets start

Lets us create an Interface First
call the file index.php… Why.. well you can have Index.html also. Incase you are not loading any data from database…
Since I’m loading the previously shared links so its index.php

Facebook Like Links Sharing
<!--Loading Jquery Below-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 

Next you need a Textbox and a publish button. Here we go

 <textarea id="contentbox"></textarea>
 <input id="submit" onclick="saveLink()" name="Publish" type="Submit" value="Publish" /> 

Ok Now we need a Script that Fetches whatever you write and then process it, to show you. Guess what… It uses jquery.

   $(document).ready(function() {      $("#contentbox").keyup(function()//--the script catches all your written text as you type     {         var content=$(this).val();         var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&amp;%@!\-\/]))?/;         var url= content.match(urlRegex); //---Filtering URL from the content using regular expressions------          if(url.length>0)//--check for length-----         {              $("#linkbox").slideDown('show');             $("#linkbox").html("<img src="link_loader.gif" alt="" /> Loading Data.....");             $.get("urlget.php?url="+url,function(response)//---sending your url as parameter to "urlget.php" and fetching the response----             {                  var title=(/(.*?)<\/title>/m).exec(response)[1]; // Loading <title>data                 var logo=(/<img src="(.*?)" alt="" /><img class="img" src=""+logo+"" alt="" />

<div><strong>"+title+"</strong> "+url)             });          }         return >false;     });  });  

So that one will do nothing.. You need thet urlget.php so here we go

Using the Above code will show the logo or any first image and the url details. Next would be saving the data in database.. when you click on PUBLISH. here is the table

 CREATE TABLE `links` (    `link_id` int(11) NOT NULL AUTO_INCREMENT,    `link` varchar(250) NOT NULL,    PRIMARY KEY (`link_id`)  ) 

Now the script to insert the data.

 function saveLink()     {         var content=$('#contentbox').val();         var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&amp;%@!\-\/]))?/          var url= content.match(urlRegex);         if(url.length>0)         {             $.get("saveurl.php?url="+url,function(response)             {                 var title=(/(.*?)<\/title>/m).exec(response)[1];                 var logo=(/<img src="(.*?)" alt="" />
 
	<li id="updates">
<div id="lft"><img class="img" src=""+logo+"" alt="" /></div>
<div id="rt"><strong>"+title+"</strong> "+url+"</div></li>
");                  $("#linkbox").fadeOut();             });         }         return >false;     } 

The Script seems similar the difference is that it calls another php Script saveurl.php . That captures and saves data. Here is the code

The Above Script Uses a config file config.php

 $mysql_hostname = "localhost"; $mysql_user = "root"; $mysql_password = "root"; $mysql_database = "fb";  $cn = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong"); mysql_select_db($mysql_database, $cn) or die("Opps some thing went wrong"); 

Thats it now Now If you want to load the the previous shared links use this in you index.php file. Just paste this code below your publish button

   <script type="text/javascript">// <![CDATA[
             function lods()             {             window.onload = loadHistory("");/****javascript method that takes a parameter ans uses it to extract and load data ****/         //              }             window.onload = lods();
// ]]></script>

</div>

Thats All.Below are the links to Download and Demo

View Demo

Download the Script

Comments will be appreciated.

Thank you

By bluejavax is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.