how to add facebook twitter and g+ share button on blogger
Social media could be great source of quality traffic for any blog.There are many popular social media sites like twitter,stumble upon,Digg and Facebook.There are many social media widgets available for blogger like Pop Up Fixed Bookmarking Gadget For Blogger and Twitter one Click Follow button For Blogs.So today I am going to share How to Add Facebook Share Button in Blogger posts.
Recommended:Cool Flying Twitter Bird Gadget For Blogger
Floating Facebook Like and Retweet Counters for Your Websites
Hope you find this useful.Share if you like it.Drop comments in the comment box.
How to Add Social Media Buttons to Blogger Posts
1.Back Up your blog's template
2.Go to Layout then Edit HTML tab.
3.Check Expand Widget Templates.
4.Now find this code:
<data:post.body/>
1.Back Up your blog's template
2.Go to Layout then Edit HTML tab.
3.Check Expand Widget Templates.
4.Now find this code:
<data:post.body/>
Place the following code right before the code.
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<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>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
How to Add Facebook Share Button in Blogger posts
|
|
Social media could be great source of quality traffic for any blog.There are many popular social media sites like twitter,stumble upon,Digg and Facebook.There are many social media widgets available for blogger like Pop Up Fixed Bookmarking Gadget For Blogger and Twitter one Click Follow button For Blogs.So today I am going to share How to Add Facebook Share Button in Blogger posts.
Recommended:Cool Flying Twitter Bird Gadget For Blogger
Floating Facebook Like and Retweet Counters for Your Websites
Steps to Add Facebook Share Button Below Post Title
It is very easy to add Facebook Share Button in Blogger posts.
1.Back Up your blog's template
2.Go to Layout then Edit HTML tab.
3.Check Expand Widget Templates.
4.Now find this code:
5.Place the following code right before the code.<data:post.body/>
<!-- Facebook Button --> <div style='float: left; padding: 5px; '> <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> </div> <!-- Facebook Button -->
6.Save your template and that's all.
Steps to Add Facebook Share Button Below Post Body
1.Back Up your blog's template
2.Go to Layout then Edit HTML tab.
3.Check Expand Widget Templates.
4.Now find this code:
<data:post.body/>
5.Place the following code right Below the code.
<!-- Facebook Button --> <div style='float: left; padding: 5px; '> <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> </div> <!-- Facebook Button -->
Button modifications
You can also change the button type like adding a counter with the button. All you need is to replace TYPE OF BUTTON from the above code with:
1.box_count for a button like this:
4.Icon for a button like this:
1.box_count for a button like this:
2.button_count for a button like this:
3.button for a button like this:
4.Icon for a button like this:
Hope you find this useful.Share if you like it.Drop comments in the comment box.
This
will be the background that you work on to create a header. Once you
have this, you can get as creative as your heart desires. Use the text
option to the left, and whatever else you would like. Here is a very
simple example of what can be done using text and geometric shapes.
Next,
you will crop your image into a rectangle. After you crop, you will
need to resize your image to about 800-900 megapixels wide, and about
200 tall. To figure out the width of your blog, go back into the
Template, hit Customize, and then Adjust widths. This will show the
width of your blog in terms of megapixels. After sizing, SAVE the
image (always as .png to avoid a grainy image) to your desktop. The
final image will look like this:
