Webeden Blog Social Media How to add a Facebook ‘Like’ button to your Website

How to add a Facebook ‘Like’ button to your Website

9 Replies

Social Media

You may have read about Facebook’s ‘Open Graph‘. This is Facebook’s attempt to takeover the web / make the web more social (delete as appropriate).

Put simply, the Facebook ‘Open Graph’ gives website owners the opportunity to add a Facebook ‘like’ button to their website. Here at WebEden.co.uk we added one last week to the bottom of our website builder homepage. It looks like this:

If you click on a the Facebook ‘like’ button, it automatically adds a status update for you in Facebook which tells your friends that you like WebEden.co.uk. Try clicking it to see what happens (not this one, the one on the homepage).

This is a great way to use Facebook to spread the word about your website, by getting your website visitors to promote your site to their friends and contacts.

You Can Do it Too

And the good thing is, that our HTML Guru Raybo has come up with some code for you to do this too.

If you want to add a ‘like’ button to your WebEden website, just follow these easy steps:

1. Insert an HTML Snippet

2. Paste in the Facebook Javascript SDK

3. Paste in the code of the ‘like’ button

The whole bit of code should looke like this:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

<fb:like href="http://www.webeden.co.uk/" layout="standard" show_faces="true" width="450" action="like" font="verdana" colorscheme="light" />

Where it states http://www.webeden.co.uk you will need to change it to your website address.

Hey Presto. That should work!

Try adding a Facebook ‘like’ button to your Website, and let us know how you get on.

  • http://www.alisoncross4webs.co.uk Alison Cross

    Am loving this!!!! Hang on, am just nipping off to try something, BRB as the kids might say….

    Ali x

  • http://www.alisoncross4webs.co.uk Alison Cross

    oooh yes!!!! You can add it as an HTML widget to your Blogger blog page too! Just insert your blogger domain name where the ‘webeden domain’ is and it works!

    Make sure that you don’t duplicate the http:// info!

    At the moment I’ve got it at the top of my page, because it’s slightly too wide to look good on my right hand column (can’t seem to change the width of the html – even though I’ve changed it from 450 to 300?)

    Another result for Guru Raybo!!!!!

    Ali x

  • http://www.alisoncross4webs.co.uk Alison Cross

    AND, if your website colour-scheme is quite dark, change that ‘light’ at the end of the coding to ‘dark’ and it will better suit a dark background.

    Ali x

  • http://wearsideinteriors.co.uk lee nelson

    how do i insert a html snippet im lost

  • Ray

    Hi Lee,

    On the toolbar go to “Insert” the “HTML Snippet”. Then in the editor box click “setup” and you paste the code in there.

    Hope that helps :-)

  • Dougie

    Tried this and it looked like it worked but then I got an error. Does the domain have to be hosted with webeden?

  • Cris

    Just tried to add this button, it seemed okay. Until I tested it and although it does count “one like”, it brings an error message. Don’t know what can be done. Deleted the button. Can someone help on this one, please?

  • http://www.facebook.com/grahamrlawrence Graham Lawrence

    How do you add the Like button to individual blog posts?

  • http://www.getactiveinstagramfollowers.com/ Jazon

    for add facebook like button i used WP Social Buttons

    getactiveinstagramfollowers.com