Add Twitter and Facebook Buttons To Blogger

2 comments
Facebook and Twitter Buttons
Hello my friends, today I’m going to explain the way to add Twitter’s following, and facebook like buttons to your blog. Twitter button permits the visitors to follow you without the need to get out from your blog. Also Facebook like button permit the visitors to like your page on the network social without get out from your blog. In addition to this, the buttons doesn’t blemish body of your blog, because the two buttons are very small and lends aesthetic in the form of the blog.
First, we’ll start with twitter,  you can choose the form that you want, just follow the steps below:
 
If you like to make the button appear on the top of the entry past the above code from what you like after/before the following code.
copy and past the following codes and past them on HTML/JavaScript widget
for the Share a link button: 
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://myway2blogging.blogspot.com/" data-via="mywaytoblogging">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

* change the blue link with your blog link.
* change the red text with your one from twitter account.

For the Follow button: 
<a href="https://twitter.com/mywaytoblogging" class="twitter-follow-button" data-show-count="false">Follow @mywaytoblogging</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

* change the blue link with your twitter account link.

* change the red text with your one from twitter account.

For the Hashtag button: 



<a href="https://twitter.com/intent/tweet?button_hashtag=mywaytoblogging" class="twitter-hashtag-button" data-related="write-what-you-want">Tweet #myway2blogging</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

* change the blue text with your one from twitter account.

* change the red text with any thing you want.

For the Mention button: 



<a href="https://twitter.com/intent/tweet?screen_name=mywaytoblogging" class="twitter-mention-button">Tweet to @mywaytoblogging</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

* change the blue text with your one from twitter account.


the buttons it should be like that :













Now we move to add facebook like button:
Go to Design --> Edir HTML --> then search for the tag  
<data:post.body/>
  • If you want the button appears below the article just copy the code below and past it just after <data:post.body/>
  • If you want to show the button at the top of the article, then copy the code below and past it just before the tag:  <data:post.body/>

This is the code that you should to add it :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <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=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>


You can change the red text tahoma with the style you want like Arial, Times...
If you chnaged this light to dark the color of button will be changed.
450px is responsible for the size that the addition will appear with it, you can change it according to your blogtemplate.
Save your template. 
That’s all…Be free to leave your comments, 

Greetings and happy blogging.

2 comments :

  1. thz great post but plz help me twitter is working but facebook is not working y??? on my blog:  http://godliveinourheart.blogspot.in

    ReplyDelete
  2.  Welcome Alok, thanks for commenting, i fixed the problem you can now add it to your template without any problem ;)

    ReplyDelete