Clement Faria - Barbados Website Multimedia Developer


By Clement Faria   Published: February 6, 2013  

I was developing a custom facebook like button script for one of my websites. The default code from facebook makes you to insert the direct url that you want to like. Even though the default like button is great, I have no intention of copying links and creating lots of buttons for my pages and blog posts.

After a bit of research, I came across some php code that basically grabs the entire web page address / url from the browser's address bar. That’s when the idea hit me, if I can grab the current webpage url and incorporate it into facebook's like button code, then I could just include that code in my website's template and never look at it again.

In this tutorial, I will show you how to use that php code and incorporate it into the generated like button code that facebook provides. We will use the server request code from one of my articles here. See the code below:

Server url Request Code

<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
echo $url; ?>

This code should output your browser's current url, now let’s take a look at the generated facebook code for the like button. You can go to to access the like button generator.  After generating your code from facebook we are going to copy the <iframe> code and insert it into a new php document.

Facebook Generated Like Button Code

<iframe src=";layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

If you look at facebook's code you will notice the website address somewhere in there. What we will do now is replace that address with the  $url variable from the server request code. You can see the final script below.

echo '<iframe src="'. $url . '&layout=button_count&show_faces=false&width=80&action=like&font=lucida+grande&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 60px; height: 21px;" frameborder="0" scrolling="no"></iframe>';

You can find lots of uses for this code snippet, you can insert it directly into a template or even call it into the script via 'require' or 'include'. I am sure they are other ways to create a custom like button, but this method works for me and works very well.  Make sure you use out like button below and share this blog post as well.

« Back

Hide Comments (0)

Sorry, your account does not have access to post comments.