Do you know how easy it is?
With just 3 simple edits in the HTML-code you can have the "Like" button on your site making it easier for people to share your content. I will show you one of the ways you can do this in this post.
There are three steps needed to include the Like button.
- Adding the XML Namespace in the HTML header. (once per page)
- Adding the FB Javascript SDK (once per page)
- Adding the button code (Wherever you want the button to appear)
To make this project a little easier I will go through each step more thoroughly.
Step 1:
Adding the XML Namespace in the HTML header of your page.All pages on the internet have a <html> tag in the beginning. All we need to do is add a little bit of code to this tag. Here is an example from blogger.com's index.page.
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>
 | ||||||
| Figure 1 |
From your dashboard menu select Template. (1)
Then select Edit HTML (2)
Select Proceed when you are given a warning message.
 |
| Figure 2 |
If you look at the second red marking you can see I have added
xmlns:fb='http://ogp.me/ns/fb#' at the end of the html-tag.Paste it in there.
Choose to save the template. (orange button on bottom)
But don't close the window just yet...
Then we go to step 2...
Step 2:
Adding the FB Javascript SDK Further down on the HTML-file we see in Figure 2 we need to find the start of the document body.
Search for the phrase: <body
Then after the closing > add the following code:
<!-- FACEBOOK SDK START -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nb_NO/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- FACEBOOK SDK END -->
Now we're ready for step 3.
Step 3:
Adding the button code Now you should decide where you want the Like-button to appear.
Currently in my blog I put the button in when someone is viewing the full article.
Here's what I did:
I selected to Expand Widget Templates (shown in the upper red circle of figure 2)
In the HTML-code I found the position that says: data:post.jumpText
Then I added the following code:
<b:else/>
<!-- FACEBOOK LIKE BUTTON START -->
<br/>
<div class='fb-like' data-action='like' data-colorscheme='light' data-font='verdana' data-layout='standard' data-send='true' data-show-faces='false' data-width='550' style='display:block;'>
</div>
<!-- FACEBOOK LIKE BUTTON END -->
 |
| Figure 3 |
Save the template again. And close the template.
View your blog to see if the changes are there. (You may need to Ctrl-R to refresh the page)
If all went well you should have both the Like- and Send-button when you view your posts.
Step 3 is not necessary. You can manually add the code in only the posts you want to. In that case you must remember to switch to HTML while editing your post.
No comments:
Post a Comment