|
|
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.
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.
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.
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?
Simply change the "action" from "like" to "recommend" in the above code.
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.
test if this page passes W3C CSS & HTML validation
(opens in a new window or tab)
Fin.