Monday, October 10, 2011

Add The New Facebook Like This Share Icon To Your Blog Posts

/ Monday, October 10, 2011 /
Facebook Like Icon For Blogger
Facebook have just made a simple Like Button available for bloggers and webmasters.The Like Button or Icon will be a great help in the effort to get readers sharing your posts on Facebook.Social networks and social bookmarking sites are constantly coming up with ways to make it easier for people to share the content they find online with their friends.From Twitter to Digg and Facebook to Stumble Upon there are lots of buttons and icons available on blogs, news sites and other websites allowing you to share their stuff with others.


While this is great for users to let their friends know what they find interesting as a blogger it's one of the best ways to get your blog content shared and attract new readers.We covered this subject in more dept a while back in a post titled What is social bookmarking /How does it work / How can it help my blog ?.Facebook have just released a new option for people to easily share your blog and in this post i will show you how to be one of the first to make this option available to your readers.
The new button just made available from Facebook make sharing blogs as easy as possible and this is great news for us bloggers.With the New Facebook Like Button Just one click is required in the very same way as you would click like on a friends picture or comment your own Facebook homepage.Unlike other sharing options you don't get a pop up or have to go to the website you just click like or recommend and your done...Nice Ehh ?

Update - We Recently Added A Post With A New Compact Facebook Like Icon You can use.

Update 2 - You can now add the New Facebook Send Button beside you Like Button - The New Facebook Send Button.

New Facebook Like Button Demo

Below is a working example of the Like Button, Try It Out !

How to add the facebook buttons to your Blog

First up i will give you the code for the button and then we will look at were you can add the buttons in your blog posts.
Facebook Like Button Code :


<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/><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>

Were To Place The Button

In this post we will look at three places you can add the button
*Below the post title
*At the top of the post
*Below the entire post

First go to your blogs html by following these three steps - In your dashboard click 'Layout' > 'Edit Html' > Tick the 'Expand Widget Templates' box.

Blogger layout
edit html blogger
Expand widget templates blogger

To add the button directly below the post titles Find the following code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code )
<div class='post-header-line-1'>
Now paste the facebook button code Directly Below / Under <div class='post-header-line-1'>
To add the button at the top of the posts Find the following code in your blogs Html
(Click Ctrl and F for a search bar to help find the code )
<data:post.body/>
Now paste the Facebook button code Directly Before / Above <data:post.body/>
To add the button directly below the posts Find the following code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code )
<data:post.body/>
Now paste the Facebook code Directly Below / Under <data:post.body/>
Once you have the Facebook code pasted were you want the button to appear and your template saved go check out your new share option.
More From Facebook - Follow this link to check out our recent post bringing you 8 Great Facebook Icons and widgets for your blog !

Thanks To :  Spiceupyourblog

0 comments:

Post a Comment

 
Copyright © 2010 Note Life Blogger, All rights reserved
[Close]