Adding the HTML 5 Facebook Like Button to Blogger

Facebook Like buttons are a cool feature to add to your blog. They really do work to drive more engaged traffic to your precious posts.

The reason is they are not just a static AddThis/ShareThis type of button. Those things never really worked very well. Facebook's buttons, by contrast, add social proof (or lack thereof) to your posts. They do this by:

• showing how many people already like the page
• showing photos of these people

They also provide a very easy way for people to quickly share content with their friends. Since 50% of Facebook's 800 million users log in every day, the chances of someone browsing your blog being already logged in to Facebook is pretty high. If they are logged in, when they see the Like button, they literally need to press it and your blog's title, URL, description, and image is instantly posted to their wall. Within seconds others will see it, and may comment, or click through to your site.

So the bottom line is: leverage the astoundingly lively Facebook ecosystem to get more clicks to your site. More importantly, these clicks are coming with a pre-recommendation from their Facebook friend.

Rules of thumb for Facebook buttons:

1. Make sure the Like/Share/Send is referencing the actual post URL, not the blog's home URL.
2. Include them at the end of the post - just after the content - so when people have finished reading, it's the next logical step.
3. Make them prominent and try to nicely integrate them into your page layout.
4. Customise:
1. Choose the word Like/Recommend depending on the context. Like is suitable for most sites, but Recommend might be better for product reviews, music, movies, etc..
2. Use the light/dark colour theme to best match your site's look.
5. Use Open Graph tags to maximise the impact of your integration - more about that later.

How to Integrate the HTML 5 Facebook Like Button Into Blogger

In a blogging platform like Wordpress, just use a plugin to insert the Like Button - it's the easiest way. But on Blogger, it's not so simple. Having said that, if you want total control, you can use the instructions below to include the Like Button right in your Wordpress Theme's post.php, category.php, or any other relevant file.

I suggest using the HTML 5 code because it's the most simple to integrate. Most browsers should be able to handle it, and this is increasing each day. In addition, the mobile world is heavily investing in HTML 5 so it helps ensure the button will work on mobile browsers too.

If you really can't use HTML 5, you can use the XFBML option with one extra step, or the Iframe version. Keep in mind the Iframe will be blocked by some user's configurations, and does not support the Send button.

1. Go to https://developers.facebook.com/apps
2. Set up an Application for your site. If you are only interested in the Like Button, you really just need the App ID, so don't worry too much about what you enter here unless you actually want to create a proper App related to your site.
3. Then go to:  https://developers.facebook.com/docs/reference/plugins/like/
4. Configure the button
5. Put anything in the url, e.g. http://test.com - we will change this later
6. Click Get Code
7. The code will pop up - make sure you are looking at the HTML 5 tab.
8. At the top, select the Facebook App you just created.
9. Select everything in the first box and copy it to the clipboard.
10. Now go into your Blogger Dashboard
11. In the blog you want to modify, go to Template, then click Edit HTML (I am using the latest Blogger Dashboard, if you can't find this, let me know in the Comments.), then click Proceed.
12. Click 'Expand Widget Templates'
13. Add the Javascript Facebook SDK code:
1. Scroll all the way to the bottom of the HTML window, and paste the Facebook code just above the </html> tag.
2. Then make a blank line after the <script> tag and before the </script> tag.
3. After the <script> tag, add:  //<![CDATA[
4. Before the <script> tag, add:   //]]>
5. This makes sure the javascript remains intact.
6. By the way, Blogger will move this code higher up in the template when you save it. I found that it's easy to add it here, then let Blogger do its thing.
14. Add the Facebook Like button code:
1. Go back to the Facebook Like Button Developer page and copy the code from the second box.
2. Search for "<div class='post-footer'>"
3. Just after this line, paste the Facebook code.
4. Now we need to edit the URL.
5. In the code you just pasted, change the data-href attribute to: expr:data-href="data:post.url". The entire line of code should look something like this: <div class="fb-like" expr:data-href="data:post.url" data-send="true" data-width="450" data-show-faces="true"></div>
6. Copy the line you just edited.
7. Search again for "<div class='post-footer'>" to find the mobile section of the template, and paste the line in again, after the line with "<div class='post-footer'>".
15. Click Preview and check how it all looks.
16. When you are happy with it, click Save Template.
17. That's it! You may like to change the built in Blogger widgets to remove the Facebook button, as now it's redundant.

Here are some screenshots to help you:

Facebook SDK code at bottom of template

The code for adding the button to the post

That's all you need to do to integrate the button, but we can do a bit more by adding the Open Graph information to the template's meta tags.

Adding Open Graph Information to your Blogger Blog

I don't know much about Open Graph, but I assume it will become more and more used by Facebook. They releases a new version last year, so this shows that they are committed to it.

In relation to the Like Button, it allows you to better control what actually gets posted to the user's wall.

You basically need to add six meta tags. You can generate these on this page and then modify them slightly for blogger. Again these instructions can be pretty easily adapted for use with Wordpress Themes.

Read about how Open Graph works.

On the Facebook page:

1. Leave Title blank - we will modify this later
2. Under Type, select Article, or something else if it makes more sense.
3. URL: leave blank
4. Image: leave blank unless you have a URL to a logo you want included. If so, paste in the full URL to the image. In Blogger, I don't know of a way to dynamically insert image URLs from a given post, but this is pretty easy in Wordpress.
   
   I have noticed that if you leave this tag out of your template, Facebook will automatically grab the first image from the post when someone posts it to their wall. So you can just leave it out unless you want to post a specific image.
   
5. Site name: leave blank
6. Admin: leave with the ID already included.
7. Click Get Tags and copy the output.

Now to your Blogger template:

1. Again go to Edit Template in Blogger.
2. Expand Widget Templates
3. At the top of the HTML box, find the line with the text:  <meta expr:content='data:blog.metaDescription' name='description'/>
4. Paste the tags you copied under this line.
5. Now we need to edit them like so:

<meta property="og:title" expr:content="data:blog.pageTitle" />

<meta property="og:type" content="article" />

<meta property="og:url" expr:content="data:blog.url" />

<meta property="og:image" expr:content="http://test.com/image.png" />

<meta property="og:site_name" expr:content="data:blog.title" />

<meta property="fb:admins" content="your user id, e.g. 123456789" />


It's also recommended to add the following tag:

<meta property="og:description" expr:content="data:blog.metaDescription" />

If the tag content is blank, you should not leave them in your template, as it will cause an error.

Now save your template and test your Like Buttons!!

Any questions - please fire away in the comments.