Monthly Archives: April 2011

Implementing Facebook’s ‘Like’ Button to your site

Adding the ‘Like’ button to a web site is fairly simple. Facebook actually have quite a good Developer web site which tells you how to do this.

There are a few steps you need to follow to do this successfully.

  1. Visit the following web site: http://developers.facebook.com/docs/reference/plugins/like/
  2. Scroll down to ‘Step 1 – Get Like Button Code
  3. Add the web address for your site to the ‘URL to Like’ field
  4. Leave the rest as it is and click on ‘Get Code’
  5. Copy the code from ‘iframe’ and paste it somewhere in the <body> section of your page
  6. Next – scroll down to ‘Step 2 – Get Opn Graph Tags
  7. In ‘Title’ add something like ‘My site’
  8. In ‘URL’ add the address of your site
  9. If you want an image to appear next to the ‘Like’ on Facebook add a web link to it in the ‘Image’ field
  10. In ‘Site name’ add the actual name that you want people to see so ‘Toby White’s web site
  11. Click on ‘Get Tags’ and again copy the code from the ‘iframe’ section to the <head> section of your site – anywhere before </head>

Upload your site and test it out, when you click on ‘Like’ it should pop up and ask you to log in to Facebook if you haven’t already and update saying you ‘Like’ that page. This will update and be reflected on your Profile as well if it’s worked successfully.

To add the button to Tumblr follow the steps above and continue with the following:

  1. Make sure you’re logged into Tumblr
  2. Click on Customize -> Theme -> It should say something like ‘Use custom HTML’
  3. Now that you can see the code you can search using your web browser (Ctrl + F on Windows or Option + F on Mac) to find the specified <head> and </body> tags.
  4. Depending where you want the ‘Like’ button on your layout will depend on what theme you have installed, look for the ‘header’ section in the code

Please leave feedback if you have any questions…

Need a free text editor? – Check out Notepad ++

Okay so it’s only available on Windows but then there are plenty of great editors already available for Linux and Mac so – what’s so great about this one you may ask.

Well – it’s free and what you get for the number of features available is tonnes of power and capability.

I know most dedicated web devs or programmers won’t necessarily be using Windows but for those who do try this out and let me know what you think.

I really do like it!

You can find it here: www.notepad-plus-plus.org