Sponsored Links
Social bookmarks make your blog visible in social network-king sites like Facebook, Twitter and Google+. If you have easy access buttons for sharing, readers can just click on them and make your site be seen outside the blogosphere. With your blog posts in these social networks, it can drive more traffic to your blog and provide more info for other curious readers outside the blog industry. Always remember, readers are the better judges of your blog as they put verdict on your posts and they are also the best recruiters!
As you can see in my blog, I have place these social bookmarks in two areas of this blog. One is found after the post title and the other is found at the post footer. The process is easy and can be done even by newbies.
The Widget
The widget is composed of the Facebook Like and Share buttons, the Twitter Tweet This button and the Recommend This in Google+ button. You can also alter the codes depending on your needs, just tweak the values inside the codes.
 |
| Social Bookmark Widget After Post Title |
Installation
Installing this is in two parts. With the new blogger Edit HTML, you may not need to backup your template. You restore your old one by simply pressing the undo buttons (CTRL+z) even after hitting the save button. But if you want to save time, you can just copy your old template in a notepad and save it in case you don't like the result of the tweaks.
Part I. In your Blogger account, go to your template.
1. click Edit HTML. Then press CTRL+F and find the </head> code.
2. Then copy-paste these codes above or before it.
<!-- Social Bookmark -->4. Hit SAVE.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
// Stumbleupon
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="http://static.ak.fbcdn.net/connect.php/js/FB.Share";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();
</script>
<style type='text/css'>
/*Social Bar ----------------------------------- */
#SocialBar {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
width: 610px;
margin-bottom: 15px;
margin-left: -10px;
margin-top: 10px;
}
.headingsharer h5 {
float: left;
padding-right: 20px;
padding-top: 15px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 10px;
}
.tweety, .fbwolo, .g-plusones, .Fbshare {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
}
.g-plusones {
margin-left: 20px;
}
</style>
</b:if>
<!-- Social Bookmark -->
Part II. Installing it where you want the widget to appear.
i. After the post title (before your post)
1. Press CTRL+F again and now find the <div class='post-body entry-content'> code.
2. Copy-Paste these codes above or before it.
<!-- Social Bookmark Start widget-->3. Hit Save.
<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
<div class='headingsharer'>
<h5>SHARE Via</h5>
</div>
<div class='tweety'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='fbwolo'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send;=false&layout;=button_count&width;=80&show_faces;=false&action;=like&colorscheme;=light&font;&height;=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='g-plusones'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='Fbshare'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</div>
</b:if>
<!-- Social Bookmark end widget -->
ii. After the post (at the footer)
1. Press CTRL+F and find the second <div class='post-footer'> code in your template (there's always two in your template).
2. Copy-Paste these codes above or before it.
<!-- Social Bookmark Start widget-->3. Hit SAVE.
<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
<div class='headingsharer'>
<h5>SHARE Via</h5>
</div>
<div class='tweety'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='fbwolo'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send;=false&layout;=button_count&width;=80&show_faces;=false&action;=like&colorscheme;=light&font;&height;=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='g-plusones'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='Fbshare'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</div>
</b:if>
<!-- Social Bookmark end widget -->
Note: You can change the type of your FB share button just edit the red button_count to button if you don't want the number of shares showing.
Always remember to save your template to see the effects. You now have the buttons the way I have in my blog! Maybe you can start sharing my posts with my buttons below!
Drop me a comment below.
Sponsored Links
0 comments:
Post a Comment