Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Earlier this year, I shared an awesome jQuery floating social sharing widget for Blogger. Now, it's time to share another one, which is from Making Different. It'll really approach your visitors to like, tweet and +1 your blog posts.
Also, it'll appear when your reader will reach your blog post's footer, which will allow him to share this post after reading it.
As of writing, I'am also using this widget on BWidgets. Hopefully, I'll also add this widget to my other blogs, which will help me to gain more social media attention.
Adding This Widget:
Adding this widget is so simple but a bit lengthy. We'll add this widget on our blog in four simple steps. First one is below:
- Go To Blogger > Template > Edit HTML > Click on "Proceed" > Mark the "Expand Template Widgets" option:
Adding jQuery Script:
If your blog already have a jQuery script, then you can skip this step. Now, after following first step, we have to add jQuery script on our template:
- Search and add below snippet code before </head> tag:
<script type="text/javascript" src="https://widcraft.googlecode.com/svn/jquery.js"></script>
Adding Trigger:
This step will work as our widget trigger. Make sure you that "Expand Template Widgets" option is marked:
- Search following code in your template:
<data:post.body/>
- Immediately below it, add the following snippet.
<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>
All Done....Final part time...
Adding Social Sharing Widget:
Finally, it's time for our final step. After this, you can check your blog to see this awesome widget.
- Find and add the below snippet code before </body> tag:
<b:if cond='data:blog.pageType == "item"'>
<script src='https://widcraft.googlecode.com/svn/FloatingSocialSharingWidget.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>
Save your template....It's done :)
Still Not Working?
Widget still not working?? Then just blame it on BIEBER!!! Just kidding,
So, if your template has more than one <data:post.body/> tag then try the last one. Don't forget to leave a comment.....
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
