How to add 'Facebook-Twitter-Google+' follower box techpro365

Today in this post I would like to take you through the process of “Adding a useful followers widget”. As you guys already know about a ‘follow box’. In this widget we have three in one follow box facility for Facebook , Twitter and Google+. This is a cool widget which shows all your followers at one place. Adding this widget to your blog is very easy.

Follow these steps to add this widget to your blog:

1. Login into your blog and go to Layout.
2. Click on ‘Add a Gadget’.
3. Copy and paste the below given code and click on ‘save’.
4. Now open your blog and you can view the widget working.

Before adding the code to your blog, please paste it in notepad and make these changes:

1. Change ‘Techpro365’ to your blog’s fan page.

2. Change ‘techpro4u’ to your twitter.

3. Change the google+ id ‘106197391344352891445’ with yours.

CODE:

 <script src="http://code.jquery.com/jquery-latest.js"></script>  
 <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> 
 <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/m4krejz6tw6sxlf/3%20in%201%20StyleSheet.css" />  
 <script src="https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js"></script>    
 <div id="on">
    <div id="facebook_right" style="top: 12%;">
      
 <div id="facebook_div">
        
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp5CyUT4QxB3-OkqrzhTwj77AlxC1M_X-Z7ag57cJY6SAY07dm4xLrFzcxek-_DTU1k0hXhEDZV-xVU38tJsFiEUAnI7MhICGvGBsVl7wZuj_Coxq3KxK10kkDzQXo7o67YPThE0lcBfQ/s1600/NBTfacebook_right.png" />        
 <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTechpro365&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false"        style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe>      
</div>
</div>
</div>
<div id="on">
    
<div id="twitter_right" style="top: 28%;">
      
<div id="twitter_div">
        
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgHYxAw5zxZw8YslqT1gIqCeXvAEHYWKUkRa0LZ-euBMUFb4Qa2Zcv7l2IjnN3op1a8PZiGQmhAiw9Tgdrlss2MKnHbKr3g-DWHI3tTLWTBp6b-gUKTRshCi4Upsq_B4FK08MjTN58Hmg/s1600/NBTtwitter_right.png" />        
<script type='text/javascript'>        function fanbox_init(screen_name) {          document.getElementById('twitterfanbox').innerHTML = '<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=' + screen_name + '" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';        }        </script>        <div id="twitterfanbox">
          <script type="text/javascript">          fanbox_init("techpro4u");          </script>        </div>
</div>
</div>
<div id="on">
      <div id="google_plus_right" style="top: 45%;">
        <div id="google_plus_div">
          <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rDo9zHHjE4cKIfDAI0Zh9lHNR6ZV0ZkAW8bVk_C8Xv4mNyiZYy7Sw0nZTMA_1jWc_qAuHXJdsdNFcFdDHriwWE0CCNHll27XjOUP2IxAetgjY50f9IyYGr3OC1EoacnGCFJGpVsAg4E/s1600/NBTgoogle_plus_right.png" />          <div style="float: left; margin: 10px 10px 10px 0;">
            <a href='http://techpro365.com'>              <img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqEll4WVNQYy2WJpGuwqW6-cnlVjQ2rQbBwFTP6ZkF6TGYxCDi58hrQNWu0o6kS5B8Ckq1iW9sqCki-lvnlvrZ-MlUTVvOY3wiv0hRgI-FaPgznMY3DxWOJ3Fg2wxHRX-FHDbPs929no2R/s1600/best+blogger+tips.png' />            </a>            <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/106197391344352891445" data-source="blogger:blog:followers" data-width="270">
</div>
<script type="text/javascript">            (function () {              window.___gcfg = {                'lang': 'en'              };              var po = document.createElement('script');              po.type = 'text/javascript';              po.async = true;              po.src = 'https://apis.google.com/js/plusone.js';              var s = document.getElementsByTagName('script')[0];              s.parentNode.insertBefore(po, s);            })();            </script>          </div>
</div>
</div>

If you have any genuine queries about this post or facing any problem feel free to ask by posting in the comment box.

Print Page

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

URL:

https://techpro365.blogspot.com/2013/05/how-to-add-facebook-twitter-google.html

HTML link code:

                        <a href="
                        https://techpro365.blogspot.com/2013/05/how-to-add-facebook-twitter-google.html
                        ">
                        How to add 'Facebook-Twitter-Google+' follower box
                        </a>

BB link code:

                        [url=
                        https://techpro365.blogspot.com/2013/05/how-to-add-facebook-twitter-google.html
                        ]
                        How to add 'Facebook-Twitter-Google+' follower box
                        [/url]