Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

Saturday, April 6, 2013

Add Twitter and Facebook Buttons To Blogger

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.
Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB
Comment Using

Comment Policy : We’re enthusiastic to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

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

Contact Us

Name

Email *

Message *

 
Copyright © . Skill Blogger . All Rights Reserved.
Designed by :- Way2themes