February 28, 2012

Mashable Sharing Widget For Blogger - Version2


mashable sharing widget for bloggerWe previously published the first bloggerized version of Mashable Sharing Plugin for wordpress and it was well received by all of you. At that time Google Plus badges were still under development and were not released and web masters often preferred third party plugins like "Add to Circle". Since now when Google plus is the hot social media networking site growing in numbers and traffic and with extra ordinary added Google Search features, I thought the mashable widget should be upgraded. I simply added a Google+ bade to the sharing widget and replaced the LinkedIn icon with twitter because most of you asked for it. Linkedin is a great place for business professionals to attract targeted clients  but if you have just started blogging and don't have much experience in freelancing then you may avoid it at an early stage. The installation is extremely easy and you simply need to copy and paste the code. That simple!


Live Demo

A demo for the previous version is already available and this version does looks like the one shown in the intro image. I did not added this new version to MBT lab in order to avoid putting further load there.

Add Mashable Sharing Widget To Blogspot

  1. Go To Blogger > Design
  2. Choose "Add a gadget"
  3. Select HTML/JavaScript Widget
  4. Paste the following code inside it,
    <style>
    /* Social Widget */
    #MBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin-top:15px;
            height:45px;
    }
    .googleplus {
        background: #F5FCFE;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family: "Arial","Helvetica",sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}
.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}

    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}  
    #email-news-subscribe .email-box input.email:focus{color:#333}  
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}  
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

    </style>

    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>
    <![endif]-->
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/111121903130358474387" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render --> <g:plus href="https://plus.google.com/111121903130358474387" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/bloggertricks&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp; font&amp;height=100px&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div>
<div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=mybloggertricks&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/mybloggertricks"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/111121903130358474387 target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mybloggertricks.com" target="_blank" >Blogger Widgets »</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget-->
Make these important changes:
  • Replace bloggertricks with your Facebook username
  • Replace mybloggertricks with your twitter username
  • Replace tntbystc with your Feedburner title. Your Feedburner title is the word added at the end of your Feedburner link. Example: http://feeds.feedburner.com/tntbystc
  • Replace http://feeds.feedburner.com/tntbystc with your feedburner  link.
  • Replace https://plus.google.com/111121903130358474387 with your Google Plus profile link   
      5.  Next search for this ]]></b:skin>   Paste the following code just below it
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

       6.  Now save your widget and you are all done!

Credits

If you wish to share this new version or the previous version of mashable sharing widget with your readers, then kindly linkback to this page or MBT's homepage.

Need Help

This widget will look clean and neat on sidebar layouts with 300px width or higher. For any customization help just feel free to let me know dudes. Peace and blessings buddies. :)




If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

70 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. I will sort out your problem tomorrow haider. Grant me admin rights :)

    ReplyDelete
  2. as the google is redirecting our blogger domain to their country specific now so now on which domain we should start making backlink blogspot.com or .in?because previously my blog pr is 2 with .com and now 0 with .in.

    ReplyDelete
  3. Thank you for your tip

    but when i Add a gadget and paste code. Why Google+ detail does not appear (Top part of this widget) ????

    ReplyDelete
  4. Thanks Bro for sharing this highly demanded widget, I was waiting for this from last few days. Thanks again.

    ReplyDelete
  5. The Google +1 (Top) part of the widget is not appearing ! Help !

    ReplyDelete
  6. Thanks For the Gadget I added it, you will see it when your cursor hits address bar...

    See Here => http://onlybabugiri.blogspot.in/

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. @NomYi Jung


    Bro add Below script under ]]></b:skin> in your template
    I was facing the same problem....

    <script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

    ReplyDelete
  10. Good day Muhammad, please i want you to explain to me how you put those dotted lines above and below words instead of underline. Like the case of "Credits" and "Need Help" in this post. thanks

    ReplyDelete
  11. I forgot to add the javascript code for google plus badge. I have updated the post by adding step#5. Simply add the code in step#5 inside your templates.


    @Freebies worldz
    You may continue linking your blog using the original domain extension i.e. .blogspot.com and follow my posts on country specific urls for many solutions.

    @webmaster

    Thanks pal for reminding. :)


    @FAPOHUNDA STEPHEN

    Please rea dthis tutorial : Style Headings in Blogger

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Hi admin, this is very helpful post. All works fine to me except the feedburner thing.
    When I tried to enter my email on the subscription box, it said "this feeds does not require email subscriptions."
    I guess there is something to do with setting up my feedburner.
    But all credits to you admin. Great tutorial.
    You rock! ;-)
    Thanks a million!

    Regards,

    Robi

    ReplyDelete
  15. @NomYi Jung

    I have the same problem, I added the script in my template but it still does not appear. What is even stranger is that it shows under your template but as soon as I change the G+ to my google plus number it disappears.

    ReplyDelete
  16. alayına isyan hepsine mokoko thanks you
    sohbet
    chat
    sohbet odaları

    saolun varolun

    ReplyDelete
  17. How do you adjust the width to this. I would like this at 275width if anyone can help please

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Dear Admin,

    Your Widget is awesome.All works fine to me except the feedburner thing. When I tried to enter my email on the subscription box, it said "this feeds does not require email subscriptions."
    I guess there is something to do with setting up my feedburner.
    URl of my feed is http://feeds.feedburner.com/blogspot/Bbrrt
    Please tell me what shall i do to solve this problem??

    Please reply soon my email id is deepak3115@gmail.com

    ReplyDelete
  20. @Studycafe

    Your Feedburner link is not correct. It should look like http://feeds.feedburner.com/Bbrrt and this feed do not exist. Go to your feedburner account then go to Publicize >Email subscriptions and check your feed link inside the code provided.


    @Elizabeth
    You may replace the entire link with your profile link and not just the ID. Replace this https://plus.google.com/111121903130358474387 with yours.

    @Reynaldo Stephens

    To change the width kindly find width:300px; in the code above and change it with width:275px;

    You will find width:300px; just at the top of the code

    ReplyDelete
  21. hello admin, please help me to change the two items below:
    * just names appears beside facebook like button, how can i show pics of fans instead of names

    * (we'r on g+) ..how can i change this word with my page name ?
    thanks

    ReplyDelete
  22. also email subscribe button does not work

    ReplyDelete
  23. there is something wrong in feedburner please check

    ReplyDelete
  24. Thanks a lot for sharing this code. :)

    ReplyDelete
  25. If your upper does not appear then change plus.google.com to Google + page link

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. I have a problem. There is a gap in the border between the fb like box and the google+ column, link: http://raisingsport.in

    ReplyDelete
  28. thank you MBT , I like this very much
    added to my blog Tech Tips and Tricks

    ReplyDelete
  29. Hello Sir! I just want to change the "We're" word to put our own name. How can I do that?
    Plz hurry up! Its Urgent!
    Thanks in advance!
    mauritiantechie.blogspot.com

    ReplyDelete
  30. I have used the widget in my blog but i was thinking if the width of the widget could be decreased a little bit. If it is possible than kindly mail me at parthasarathi108@gmail.com. Thanks

    ReplyDelete
    Replies
    1. I've got same problem too, but what i did is to change my side bar to 345 and it fits!

      Delete
  31. @Mohammad Mustafa AhmedzaiYou have a little problem with your widget when someone install your widget and click on enter your email here, to add an email the word (enter your email here) does not disappear. It works fine in your demo

    ReplyDelete
  32. @Mohammad Mustafa Ahmedzai
    I did that but nothing seemed to work. Than I recently bought a domain name. For some strange reason it works under my domain name just fine, digital-businesscards.net. but not my free gmail plus account. I did all types of test. That plus account even works on all my other blogs, just not my original one.

    ReplyDelete
  33. @Mohammad Mustafa Ahmedzai hey Mohammad bro i see there is Google analytic tracking code in this mashable sharing widget part 2...is it necessary to add this tracking code

    ReplyDelete
  34. mohammad thanks for the widjet but the how to remove the suscribe button given with this widjet??

    ReplyDelete
  35. oh .thnks post full .
    http://rapbyrap.blogspot.com/2012/02/lala-extended-vocal-club-mix-dj-hoang.html

    ReplyDelete
  36. Thanks very very much for sharing!

    ReplyDelete
  37. hai admin
    can you help me do a widget like this blog http://scratch-strain.blogspot.com/

    he blend together 3 in 1 widget = mashable + some guides + remainder

    can you provide html code or guide me to do widget like that blog please

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. hello sir

    2 things are not working properly subscribe button when entering mail we have to delete the written dialogue there i:e "enter your mail here..." and feed subscription is not working it says "The feed does not have subscriptions by email enabled" rest is working fine for me check here http://android-tweak.blogspot.com/

    ReplyDelete
  40. I want this for black color template. how to modify this?

    ReplyDelete
  41. thank to give this code
    http://onsign.blogspot.com

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. @Elizabeth, Goonoo, Ghandour

    Insted of using google plus profile link try to make a google plus page after that go to the google plus page the copy the page profile link (the replacement of google plus profile link)

    We're on the top of the widget is your google plus page name.

    i do it on my blogsite
    www.webscythe.info

    ReplyDelete
  44. thanks for the info.


    a2-studios.blogspot.com
    Cricket gaming Mods & Patches (IPL5 Patch)

    ReplyDelete
  45. Even after after adding the step 5 in my template , the first Gplus and facebook devisions are not working , it shows blank space!!!
    GadgetPedia.in

    ReplyDelete
  46. Great widget really helpful i have added this on my blog have 78 % rise in followers thankyou for providing this http://mobilehacktrick.blogspot.in/

    ReplyDelete
  47. Please check the Mashable Sharing Widget Version 2. It is not displaying the facebook like button and the Google+ Add to Circles widget.

    ReplyDelete
  48. Agree with Liaqat Qazi. Mohammed bro please check into the same! Have the same issue.

    Regards
    Harsh

    ReplyDelete
  49. google circle widget still not working after applying the step no.5 too.. please help bro

    ReplyDelete
  50. @Vijay Varma

    I face same problem and when click on gplus button so it share content from other site.

    ReplyDelete
  51. Please check the Mashable Sharing Widget Version 2. It is not displaying the facebook like button and the Google+ Add to Circles widget. and when click on +1 it button so it share content from other site.

    ReplyDelete
  52. Hai, In this widget facebook not working. please post the
    solution

    ReplyDelete
  53. Facebook Like Option is not appearing in the widget in my case?
    Can you help me out please

    ReplyDelete
  54. Very nice and awesome widget u share with us thanks
    Virtual Soft Zone

    ReplyDelete
  55. Hi! Nice to meet you here. It is very helpful. Visit Our Cinema Blog, @ CineDen

    ReplyDelete
  56. Please Admin Can You Check My Blog And Fix The ERRORS .........PLEASE This is my request http://www.latestgames2.blogspot.com

    ReplyDelete
  57. Hello MBT. I am having two problems.

    1. Subscribe button is appearing too large. Please help me to fix this and bring to the proper size.

    2. Instead of showing We're on G+, its showing my "Full Name". Please help me to change its to "We're on G+".

    This is my blog - http://bloggerbuzzers.blogspot.in/

    Please have a look on my blog. By the way, thanks for this awesome mashable widget.

    ReplyDelete
  58. This comment has been removed by the author.

    ReplyDelete
  59. Hello there iJust tried it at my site and if your twitter is not working on the small icon below check this:

    On the HTML above which is href=http://twitter.com/mybloggertricks" where in you need to change it to your twitter name, remove the extra " because it has no pair at all and if you just change mybloggertricks w/o removing the " then your twitter cannot be found. Check one of my page in my newly built blog at http://petloverhouse.weebly.com/2/post/2013/12/the-best-way-to-care-for-your-chinchilla.html

    ReplyDelete
  60. This info you provided in the blog that was really unique I love it!!!
    digital cinema

    ReplyDelete