Back in April i wrote the post ‘Add The New Facebook Like This Share Icon To Your Blog Posts‘ showing you how to add the then new Facebook Like Icon to your blog. This has been a very popular post and in this post i will show you how to add a New compact version of the button to your blog. The great thing with the Facebook Like Button is how easy it make it for readers to share your posts on Facebook. All that’s required is one click and readers don’t need to leave your blog, or get a pop up and have to fill in details. The differance between the default button and the compact button is the Compact button does not have any text just the button.
Live Demo – Here is a working version of the button i will be showing you how to add to your blog.
Try It Out :
Add The Compact Facebook Like Button To Blogger
As with the default Facebook Like Button i will show you how to place the button At the top of your posts and below your posts.
Step 1. To have the button anywhere on your blog you must first add a little javascript to your template.Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)
</head>
Step 2. Paste This code Directly Above/Before </head>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
Step 3. Find the following code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code – More Info)
<data:post.body/>
Note – If this code is in your template more than once find the last occurrence.
Step 4. Copy the Like button code below :
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><a class="addthis_button_facebook_like"></a>
Above Posts – To place the Compact Like Button at the top of your posts paste the button code Above <data:post.body/>
Below Posts – To place the compact like button at the bottom of your posts paste the button code Below <data:post.body/>
You can also add the button code to a Html/Javascript gadget in your sidebar or elsewhere in your design page.
Tip – If you have Images, Video or other media in your posts add the button code below them in the post.This will get more people sharing yor posts, however add the button code just before you publish and publish when viewing the post editor in Html view.
That’s you compact Faceook Like Icon, check out more great Facebook tips for your blog.Let us know what you think or if you need extra help in the comments.
