There are many ways of putting social media buttons in your blog. The best way being 'floating social media buttons' like the one shown in this blog. Other ways are Facebook Like box, social media connect buttons, Social media share buttons at the beginning and end of each posts. Among all social networks, Twitter and Facebook are still the greatest medium of content spreading and traffic building. Sharing content in these networks works like a gem and your content/work gets noted to the world quickly and easily.
We had seen how to put Like box in blogger as well as How to include social media share buttons in my earlier posts. These two formats allow you to place the buttons almost anywhere in your blog's layout. Anyway, We will now learn 'how to include Facebook Like and share buttons' at the beginning as well as end of each posts like the one shown below.
Step - 1
Sign in to your blogspot account and goto your blog > Template as shown below. Click 'Edit HTML'.
Step - 2
Now select the entire HTML (by holding Ctrl and A buttons simultaneously in the keyboard) provided in the space given in the HTML box. copy the entire HTML and save the copied code in a notepad, just as an extra precaution; in case if something goes wrong. (I bet it works fine !)
Step - 3
After you made a backup of your blog template. Open 'Find' tool by clicking Ctrl and F simultaneously. Search for the below code in the HTML page by pasting the below code in the Find tool and clicking enter in your keyboard.
<data:post.body/>
Step - 4
Your blog may contain the above code at more than two places, navigate to the last place. I mean, say if your blog template has three such code at different lines goto the third one.
Step - 5
If you wish to include like and share button at the end of each post, then copy the below code and paste immediately after the line <data:post.body/> that you found above (the last one).
-----------------------------------------------------------------------------------------
<p><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=120& action=like&share=true&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:35px;'/></p>
------------------------------------------------------------------------------------------
Below picture shows the placement of code; for the case of buttons to be placed at the bottom of each blog posts.
If you wish to include the buttons at the beginning of each post (after page title), then paste the same code just above the line <data:post.body/> as shown in the below picture.
Step - 6
Now click 'Save template', thereafter view your blog only to see the buttons appear, You are done !
Wait, some more tips for you !
If you don't want to include share button and wish only like button to be seen, then remove the highlighted line from the code that you pasted in the HTML editor.
--------------------------------------------------------------------------------------------
<p><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=120& action=like&share=true&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:35px;'/></p>
---------------------------------------------------------------------------------------------
If say, you want to change the size of the buttons for better appearance, then change the highlighted values as you wish, the recommended values being width = 120 and height = 35.
--------------------------------------------------------------------------------------------
<p><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=120& action=like&share=true&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:35px;'/></p>
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
Hope this helps.
Hi,I tried this but it did not work.
ReplyDeleteHi,
DeletePlease consider the following,
1. Check whether the codes have been properly pasted or not
2. Make sure that you post this code only AFTER the tag instead of before
3. This code is for blogspot blog only
I hope, it should work, I have been using this for my other blogs too. Please confirm after you verify the above.