Animated Social Sharing Widget with Cool Hover!

You must have heard about Shareaholic, The Leader in the creation of stylish sharing scripts. After Their Great Success of The Sexy Bookmarks, recently they just have created another awesome design which is known as SassyBookmarks ( Social Sharing Widget ). Here in this post i’ll let you know how to implement SassyBookmarks or Social Sharing Widget on your wordpress and blogger site! :)

Animated Social Sharing Widget with Cool Hover!
Live Demo!

How to Add Animated Social Sharing Widget to blogs? (Updated!)

Adding to WordPress!

  • Go To Your dashboard, Then Click On Appearance and then Navigate To Editor.
  • Now on The Right Side you can a list of template files, move your mouse to footer.php and then click on that
  • As Soon the page loads completely, Press CTRL+F and Find </body>
  •  Now be careful and paste the below code just about it !
  • Hit on Update File, Now Visit Your WordPress Blog ! You can see it located on The Bottom Left

Adding to Blogger/Blogspot!

  • Go to Blogger Dashboard > Template
  • Take a backup of your template.
  • Now find for below code in your template </body>
  • Add below piece of code just above/before of above code.

 

<!-- Start Social Sharing Widget Sassy Bookmarks HTML (allbloggingtips.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
  var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
  </script>
 <!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
       (function() {
            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script>

<!-- End Shareaholic Sassy Bookmarks script -->

 

Endlines.
Hope You’ve find this implementation interesting. This Social Sharing Widget Code Snippet is a the property of Shareholic so please don’t remove the copyrights ! Peace and Blessing pals :D


Article by

Hello There, This is me Sidharth. I'm currently the admin at TheOpenHub. Well i like to share quality content with my friends, fans... So Stay Tuned :P

Sidharth has written 1 awesome articles for us.

Write for us Guest Post?

Comment below, let me know what do you think?

23 Comments so far add one

  1. Sandeep Kumar (SEO Bloggers Tips) says:

    Hi Sid,
    Thanks for explaining the steps to implement this animated social sharing.
    Sandeep Kumar (SEO Bloggers Tips) recently posted..After Penguin Google is focussing on Page TitleMy Profile

  2. I really like the look of this widget I am going to have to test it out and see how it works on my blog, Thanks for the info.

  3. I Think This Ones Better Then Sexy Bookmarks.Nice Post Btw east and simple
    Saad recently posted..EMF: What’s The Fuss All About?My Profile

  4. WooooW Amazing ! Well Done
    BoMaZeN recently posted..?????? ???? ????? ???My Profile

  5. Hi Sidharth, Thanks for sharing the awesome social sharing buttons. Will be using it on my blog soon.
    Ehsan recently posted..A Complete Affiliate Marketing GuideMy Profile

  6. Hi Siddarth, thanks for such a glowing review! We really appreciate the support. :) Let me know if you have any other questions about our sharing tools.
    Ginny Soskey recently posted..The Ultimate Beginner’s Guide to WordPressMy Profile

  7. Really Awesome widget..!!

    THis is just game of jQuery.. Keep it up.
    Jafar Dhada From TechTrait recently posted..How Pro-Bloggers Generate Huge Traffic to Their Blog?My Profile

  8. It didn’t work for my blog

  9. This one looks really nice! Good share option for the Blogger Guys ;)
    Abhisek Das recently posted..15+ Awesome and Cozy Responsive Magazine WordPress ThemesMy Profile

  10. yaasiin sulaiman says:

    sorry, but i have trouble with ur widget ?
    please help me :(

  11. @All, Code is updated please add code again to your blog :)

    Thanks
    ~Ammar!
    Ammar Ali recently posted..How to Get More Twitter Followers?My Profile

  12. Zaaynab Le'Von says:

    Hi,

    Is there a way to move this to the right side of the blog?

  13. Ammar – Thanks for this. Worked like a charm. Any way to change the twitter share from “Via @shareaholic” to my own?
    Bruce Reyes-Chow recently posted..My Vegan Chunky Chili AdventureMy Profile

Speak Your Mind

CommentLuv badge