Skip to main content

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

Comments

Anonymous said…
Very nice tweak :D
Mary said…
Thanks.

I'm not big on Followers. But I've been wondering about this approach for putting a gadget into a page/post for a while. I did some experiments with the Labels gadget a while ago, but failed. Glad to see that it works in some cases.
DaisyCrazy said…
I'm wondering whether you can do this and keep the followers gadget in the sidebar as well?
I'd prefer it that way I think.
Chuck said…
Daisy,

Did you look at my Expanded Followers page, for an answer?
DaisyCrazy said…
Yes I did. I thought that you had to lose the one you already have to get the expanded one. Turns out you can actually have both.
Thanks this is really great I'll try it out!
Naturaleza said…
I cannot see your tweaked followers gadget :( Can't see any of your gadgets. Is your blog having an issue to showing the followers list/gadget? Wanted to see first what it looked like before I try to tweak it myself.
Lisa said…
Thank you for this. I have been trying to figure out how to actually move the Followers to a static page and off the main page.

Thank you!
Arianne Teodoro said…
you could customize my followers? I can not help me?
Chuck Croll said…
Arianne,

This problem may be a lot easier to deal with, using the Blogger Help Forum: How Do I? interface.

Popular posts from this blog

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.

Help! I Can't See My Blog!

I just posted to my blog, so I know that it's there. I can tell others are looking at it. But I can't see it.

Well, the good news is you don't have a blog hijack or other calamity. Your blog is not gone.

Apparently, some ISPs are blocking *.blogspot.com, or maybe have network configuration or infrastructure problems. You can access Blogger.com or you can access Blogspot.com, but you can't access nitecruzr.blogspot.com, or bloggerstatusforreal.blogspot.com.

You can't access them directly, that is. If you can access any free, anonymous proxy servers, though, you may be able to access your blog.

Note: You can use PKBlogs with the URL pre packaged. Here is the address of this post (with gratuitous line breaks to prevent the old post sidebar alignment problem):
http://www.pkblogs.com/bloggerstatusforreal.blogspot.com/
2006/07/help-i-cant-see-my-blog.html


And an additional URL, to provide to those suffering from this problem, would be the WordPress version of this post:
ht…