Website Administration Services

WebsiteAdministrator.com.au

Website FaceBook Like Button

 

Website Administrator Know How Articles

Social Networks Series

 
Website Sponsors for Jobs
 

Add the FaceBook Like Button with automatic php code

Up dated: 17th July 2013

This article follows on from our article on adding valid W3C pass for the facebook like button.

The last method on that page gave us a nice piece of code we can use to ensure we will still have valid html code if the page is checked using a W3C compatible vaildator.

Manually inserting the url for the FaceBook Like Button

But we also needed to manually insert the page url [uri] so that the likes will be attributed to the correct page. If you were using cut and paste each time you created a new page, you may forget to change this and so the likes were not going to the right page. With the Google PlusOne code, you only need to ensure you correctly use the canonical meta tag in the head section and that was that.

Automatically inserting the url for the FaceBook Like Button with php

Well, if you have php active on your web pages, you can of course modify the like html code we gave on that previous page. This means that we can just copy and paste the same code into all of our new pages and php will insert the correct rul [uri] each time. Simply copy and paste this code into the place you would like the Like Button to appear. You note the php script is in the middle of the code.

The automatic PHP FaceBook Like Button Code

Your copy and paste code:

<!-- start www.websiteadministrator.com.au php facebook like code-->
<div id="FaceBookLikeButton">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var fb = document.createElement('fb:like');
fb.setAttribute("site","<?php $url=$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];echo $url;?>");
fb.setAttribute("action","like");
fb.setAttribute("layout","button_count");
fb.setAttribute("show_faces","false");
fb.setAttribute("width","100");
fb.setAttribute("font","arial");
document.getElementById("FaceBookLikeButton").appendChild(fb);
//]]>
</script>
</div><!-- end www.websiteadministrator.com.au php facebook like code-->

 

That's it! Easy huh?

How to add the FaceBook Recommend Button

Simply change the "action" from "like" to "recommend" in the above code.

Help! My old FaceBook Like Button Stopped Working!

Yes, FaceBook decided to not support the "href" attribute in their tags and make a bunch of old Like Button enthusiasts fix their pages or be damned. The updated code above will work, as you can see at the top of our page. Dont forget to "recommend" us if you found this page useful.

Here's our how to article to add the google +1 button should you like to add that to your page too.

Valid XHTML 1.0 StrictValid CSS
test if this page passes W3C CSS & HTML validation

(opens in a new window or tab)

Fin.