Add The Compact Facebook Like Icon Button To Your Blog




| | 5 comments

facebook like button bloggerBack 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.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

5 comments:

  1. Hi I could not find this code on HTML of my blog



    help please..

    ReplyDelete
  2. Ok so I can get the button added, I used a live of code from this tutorial -http://www.spiceupyourblog.com/2011/01/twitter-count-share-button-follow.html to make it so that it only appears in post pages.
    But It says '1 like' for all of my posts and not a different number of likes for each post..if hat makes any sense lol.
    basically i was trying to make it so it would be able to like individual blog posts but it just likes the blog in general, any advice?

    ReplyDelete
  3. Thanks for the tip... Heloped me a lot.

    ReplyDelete
  4. Hay,

    thanks for the tuto, but i have a little problem in my blog :

    Early this button worked fine, but in two of my recent articles when someone clicks on "like" it does not count his click ? I'm really confused her is my blos : http://video-buz.blogspot.com/

    can you help me please ? ^^

    ReplyDelete
  5. Hi I could not find this code on HTML of my blog

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us