Followers Gadget in Blogger's Dynamic View

For real? You bet! Blogger introduced Dynamic Views quite some time ago. It looks awesome and all, but the inability to add gadgets has been a deal breaker for many. If losing your followers gadget was stopping you from trying the Dynamic Views, you better be finding a new excuse now - because I'm about to show you how you can add Followers gadget in Dynamic Views. Let's cut to the chase, shall we?

Step 1:

First, we need to get the code for our followers gadget. Go to Google Friend Connect site and sign-in with your Google account. On your left, click on your blog's title. If your blog isn't listed there, click on 'Add a Site'.

Next, click on 'Add the members gadget' and customise your gadget based on how you want it to appear.

Step 2:

When you're done customising, click on 'Generate code', and copy the code given.

Step 3:

Since Dynamic Views templates do not have sidebars to add gadgets, we're gonna place our Followers gadget in one of our pages. For that purpose, let's create a page. Go to Dashboard - Pages - New Page - Blank Page - HTML. Paste the code that you've copied from Step 2 in your post editor.

This is the code that I've gotten:

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-6634439943315425095" style="width:276px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-6634439943315425095',
   site: '08128118462321429088' },
  skin);
</script>

Step 4:

Not quite done yet. See the two lines that I've highlighted in Step 3? We need to replace those lines.

Replace Line 4 with the following line (delete the existing line, and paste the following line)

<div id="ssfollowers1" style="text-align: center !important; width: auto !important; border:1px solid #cccccc;"></div>

Similarly, replace Line 22 with the following line:

{ id: 'ssfollowers1',

This is how your code should look like now (more or less)

Step 5:

You're good to go! Publish the post, and under 'Show page as', make sure it says 'Top Tabs'.

Sometimes, you might not see the gadget when you click on your pages link. If clicking once doesn't work, click again. And again, and again. It is common for scripts in DV not to get loaded the first time. You might want to add a line in your page that says "If you're not seeing the followers gadget, try reloading this page 2-3 times", or something to that effect. Enjoy your Followers gadget!