Comments Wall Gadget for Sidebar.

Comments in Blogger are made under and on posts. The Main Page has a Comments link under each post for the viewer to click and post his/her comments. There is no facility to put in a general comment on anything under the sun!


The Friend Connect Gadget provided a Comment Wall which you could put in the sidebar for inviting general comments. The Followers gadget is being upgraded to the Friend Connect gadget and hence it is now not possible to add the latter gadget in the usual manner. If you have Custom Domains then only you can add the Friend Connect gadget in the usual manner.


Here is a workaround to add the Comments Wall in the sidebar to a blogspot.com blog......................

1. INSTALL FOLLOWERS GADGET

If you do not have a Followers gadget in the blog the first step is to install it in the usual manner for adding gadgets to the blog. Login at Blogger.com and click Layout lik for your blog on Dashboard. On Page Elements subtab click Add Gadget link and in popup window click on Followers gadget. New blogs have this gadget by default.

2. GET SITE NUMBER FOR BLOG.

The next step is to get the site number for your blog. To get it Login at Blogger.com and click on View Blog link on Dashboard for blog. Blog will open in browser. Go to View---->Page Source from browser menu. In Page Source do a Ctrl+F (Edit--->Find) for 'site' in the Followers gadget. It will appear like this :

......
......
google.friendconnect.container.renderMembersGadget(
{ id: "div-1238464215135",
site: "BIG_NUMBER" },
skin);
</script>

Copy down the 'BIG_NUMBER' in the page source.

COMMENTS WALL CODE

In this step copy the code for the comment wall gadget given below :

<!-- 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-comment-wall" style="width:210px;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['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
 { id: 'div-comment-wall',
   site: 'BIG_NUMBER',
   'view-params':{"disableMinMax":"true","scope":"SITE","allowAnonymousPost":"true","features":"video,comment","startMaximized":"true"}
 },
  skin);
</script>

Put the site number from step 2 instead of 'BIG_NUMBER' in the code above. To customize it further change :

div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>

width(210) in above code and border size(1px) and border color(cccccc). Change the colors by changing the hex numbers at the end of these lines :

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';

You can get hex color numbers here.

To change number of comments shown change '5' (any number from 1 to 15) in this line :

skin['POSTS_PER_PAGE'] = '5';

To prevent spam delete :

"allowAnonymousPost":"true",

PASTE CODE IN HTML GADGET

Lastly copy the modified code and paste in a HTML gadget in sidebar. Login at Blogger.com and click Layout lik for your blog on Dashboard. On Page Elements subtab click Add Gadget link and in popup window click on HTML/Javascript gadget. In contents window paste the modified code and save. Here is what it looks like :