Wednesday, 17 April 2013

How to add all in one social network widget in Blogger




Hello Readers, social networking websites has influenced the blogging to a great extend. You publish a new post and share it to your social networks; it gives your followers and fans instant updates about your content. They visit your blog and you get plenty of traffic. In order to make all this happen you need to make a good following and fans on social networks like Facebook, Google+ and Twitter. Many people add different widgets for Facebook, Google+ and Twitter on their blogs and websites that may affect your page loading time. To reduce the page loading time and space used by all these widgets you can smartly use one widget that includes all of them.
all in one social network widget

Today I will share how you can add an all in one social network widget in your blog that includes Facebook, Twitter, Google+ recommend, Email subscription via feed burner and your Google+ author profile. I bet you will save a lot of space by adding this widget and you can utilize the freed space by monetizing your blog with ads networks like Adsense, Adhitz, Qadabra for earning online money.

How to add all in one social network Widget:


  • First of all, go to your Blogger dashboard by logging in to your account.
  • Click on Layout, to open the Layout of your template.
  • Now click on add a gadget and select HTML/JavaScript gadget.
  • Paste the following code in it and change the profile names with your profile names.
<style>
    /* Social Widget */
    #UT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
        width:300px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 10px 0 10px;
        border: 1px solid #D8E6EB;
        margin-top: -2px;
            height:80px;
    }
    .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;}
    .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-linkedin 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-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }

    #other-social-bar .other-follow li.my-linkedin {
        background: url('http://4.bp.blogspot.com/-ht4UMG88lvM/TwHZFFgc-1I/AAAAAAAAFvs/BBmINSJhUsk/s400/linkedin-16x16.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="UT-mashable-bar" > <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/unziptech&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;

    font&amp;height=100px&amp;appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us</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=unziptech&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" style='background:#EDF4FF'>

    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=unziptech', '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="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />     
            <input type="hidden" value="unziptech" 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/unziptech" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="#" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/u/0/102111280721002623355" 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://unziptech.blogspot.com">Social Network Widget</a></span></div></div>

    <!-- End Widget --> </div> <!--end of social widget-->

  • Once you have done this, Click on OK and re-arrange it, where you want it to be displayed.
I have highlighted the things you need to change in the code by Red color. If you face any problem, you can comment here. I will be Glad to help you. Make sure you do not modify the other things, it may stop working.

If you want to change the width or in case it did not fit in your sidebar change the value in highlighted with green color.

You should also check out our blogging and seo section for more cool tutorials. It will improve your blogging experience.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+, stumbling our posts on stumble upon or giving us a link back via the links below. Stay tuned for more tech updates. 

Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:
author pic
Author: Mohammad Zafar Ahmad
Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

22 comments:

  1. Great Work BRo.. May GoD blEss U :)

    ReplyDelete
    Replies
    1. Thanks Brother..Connect with us via Social networks for more updates and keep visiting here,,

      Delete
  2. what am I supposed to replace the # in red with?

    ReplyDelete
    Replies
    1. @Joanna
      You need to replace the # with your Linkedin profile url, if you don't have one, let it remain unchanged..

      Delete
  3. The follow by email didn't work. Was there something I was supposed to change?

    ReplyDelete
    Replies
    1. You need to replace unziptech with ur feedburner username..it should be written twice in the follow by email code..i have highlighted it in the post..

      Delete
  4. # stands for what in above post.

    ReplyDelete
    Replies
    1. you need to replace the # in red with your linkedin profile url..if you don't have one leave it unchanged..

      Delete
  5. Thank You brother i was searching for this .....now i got this widget finally.......regards...

    ReplyDelete
  6. And One more thing brother i want this widget to be transparent...if it is possible give the script

    ReplyDelete
    Replies
    1. Thanks Nauman..I will try to make this widget transparent..Keep visiting and subscribe to us for the latest updates..

      Delete
  7. hi i have a question in the facebook social plugins page,in the url to like box i have to enter my site url or facebook page url?

    ReplyDelete
    Replies
    1. You need to put your facebook page URL in there.,.,

      Delete
  8. I am having trobles with the feedburner part of this code



    I have no idea what exactly to enter in the RED parts ...i wish you could have explained that part step by step, i think most people would have troble with that one

    i went to my feedburner section and i know all about it but the parts of feedburner where it has (unziptech) i have no idea what to put there?

    any help would be appreciated :)

    ReplyDelete
  9. Ok i replaced the red feedburner parts with my feedburner username which is (27na8ihfhbpliv57k6aljbgvic) and i replced it twice and it just keeps on saying when someone enters there enter to subscribe

    (Your feedburner subscribe option is the enabled)

    but in my feed burner account under "email subscriptions" it is enabled

    what the hell do i do to make it work? =;0//

    ReplyDelete
    Replies
    1. @jack sparow
      Calm down brother..You just need to replace the red ones with your feedburner username..If someone enters their email id to subscribe to you, they will have to verify their email address in order to receive email updates from your blog..

      Delete
  10. Thanks!your post was helpful and what to do with "https://plus.google.com/u/0/102111280721002623355.
    What is a feed burner id and where can i get in my blog.I have no idea.

    ReplyDelete
  11. There is no twitter widget.....And i replaced the red part with my feeder username...why its saying your subscription is disabled..And about the google plus/....The above thing doesnt give me the total info..plz reply back

    ReplyDelete
    Replies
    1. About Twitter:
      There is a Twitter follow button on this widget. If you want more twitter widgets search our blogger tips and tricks section..
      About the Google+ URL:
      Replace it with your Google+ profile URL..
      About Feedburner:
      Feedburner is a feeds management tool powered by Google..It creates an XML summary of your blog posts and help you offer email subscriptions..Simply go to feedburner's website and register your blog in it..

      Delete
  12. input type="hidden" value="" name="uri"

    Value= ?

    What should i replace it to get enable the subscriptions.

    Can u plz say it asap.

    ReplyDelete
    Replies
    1. Sammy you need to place your feedburner username there..hope you have already setup your feedburner account..

      Delete
    2. Not gmail but your feedburner account username..

      Delete