Thursday, November 10, 2011

How to put Facebook LIKE/TWEET/STUMBLE Button on Blogspot/Blogger

Once you get your like & share buttons up and running your are bound to have more traffic!!!There have been some questions on how to get the LIKE/TWEET/STUMBLE button on blogger.



Well, for the Facebook "LIKE" button,

Step 1

Go to Dashboard --> Select Layout --> Select Edit HTML

Step 2

Check the ''Expand Template Widget'' option

Step 3

Press CTRL+F to look for this code

<data:post.body/>

Step 4

Copy and Paste this code AFTER the above 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=true&amp;width=100%&amp;height=60&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100%; height:60px;'/>


**BONUS STEP**


Step 5 

If you want the ''Recommend'' button, change the word ''like'' (highlighted in RED) to ''recommend''

Step 6

Save you template and you're done!


As for the TWEET button,

Step 1

Go to Twitter's Tweet Button to add the button to your blog

Step 2

You can choose your button and customize it (optional). 

Step 3

Preview your button and grab the code.


Step 4


Go to Dashboard --> Select Layout --> Select Edit HTML

Step 5

Check the ''Expand Template Widget'' option

Step 6

Press CTRL+F to look for this code

<data:post.body/>

Step 7

Copy and Paste the code AFTER the above code.

Step 8

Save your template and you're done!:)


Now the Stumble Upon button,

Step 1


Go to Dashboard --> Select Layout --> Select Edit HTML

Step 2

Check the ''Expand Template Widget'' option

Step 3

Press CTRL+F to look for this code

<data:post.body/>

Step 4

Copy and Paste the code AFTER the above code.



You can change s=5 to s=1 or s=2 or s=3 or s=4 or s=6 to get the other button styles.



If you need the counter on every page, then remove the two lines of code in Green Color. 
If you want the button to appear on the left side, then change float:right to float:left

Step 5
Save your template and you're done!!

I have not gotten around to fixing my template yet, because i apparently have absolutely have no idea how! If any of you kind souls out there who happen to know how i can get my comment box back and stop the repetitive post, would you please be kind enough to e-mail me. I would really appreciate it!
That's all for now, I hope this helps!! 
Xoxo..Mwah..Mwah!!:-)
anita[dot]joyce[at]rocketmail.com

LinkWithin

Related Posts Plugin for WordPress, Blogger...