Tweaking The Followers Gadget

With Following becoming increasingly important in many blogs, as part of creating an exciting and ongoing community, many blog owners are using improved versions of the Followers gadget. Repositioning the Followers gadget, outside the sidebar, will let you show more Followers - or you can show the same amount of icons, but larger ones, in a gadget with the same height. If you want to encourage more Followers, using larger icons wouldn't hurt.

All that you need to do is publish the Followers gadget as a static page, using the Pages Editor, in "Edit HTML" mode. You can display Followers in a separate page, without having to edit the template. Or, you can use an HTML / JavaScript gadget, instead of the default Followers gadget.

Just use your browser, and display source. Alternatively, use the Template Editor "Edit HTML", select "Expand Widget Templates", and find the working code from your blog. And tweak what you have, using my example below.

We used to have an option to get the code from the Friend Connect website, but that's no longer offered.

As previously announced, we are retiring Google Friend Connect for all non-Blogger sites on March 1, 2012.

Here's the source for the gadget, from my test blog.

<script type="text/javascript">
        if (!window.google || !google.friendconnect) {
          document.write('<script type="text/javascript"' +
              'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
              '</scr' + 'ipt>');
        }
      </script>
<script type="text/javascript">
      if (!window.registeredBloggerCallbacks) {
        window.registeredBloggerCallbacks = true;
        
        gadgets.rpc.register('requestReload', function() {
          document.location.reload();
        });
        
        gadgets.rpc.register('requestSignOut', function(siteId) {
          
          google.friendconnect.container.openSocialSiteId = siteId;
          google.friendconnect.requestSignOut();
        });
      }
    </script>
<script type="text/javascript">
    
    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};  
          
            holder.postFeed = "http://www.blogger.com/feeds/603671751736178698/posts/default";
          
            holder.commentFeed = "http://www.blogger.com/feeds/603671751736178698/comments/default";
          
          holder.currentBlogUrl = "http://nitecruzr-test-following.blogspot.com/";
          holder.currentBlogId = "603671751736178698";
        
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height + 'px';
      }
    });

    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();
  }
  </script>
<div id="div-p6bujtk8fk0x" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#222222";
    skin['ENDCAP_LINK_COLOR'] = "#2288bb";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
    
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#2288bb";
    skin['CONTENT_TEXT_COLOR'] = "#222222";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#2288bb";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#999999";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-p6bujtk8fk0x",
     height: 260, 
     
     site: "03522147474618161170",
      
     locale: 'en_US' },
     skin);
  </script>

The default icon size is 32 px; I changed mine to 48. The default gadget height is 260 px (specified in 2 places, above); I changed mine to 1560. After editing those 3 lines of code, I copied the contents into my Pages Editor, and published "followers.html".

You can look at my Expanded Followers page, if you like, and see the result.

>> Top