The Blog Doctor.

Blog Members

Here is how to show off your blog members. These are members of your blog community who have joined your blog through Google Friend Connect. Put all your members on a special page in your blog...........

CREATE A PAGE IN BLOGGER

Blogger does not have any method for creating pages (at present). You can workaround this by creating a post. In Blogger (Layout Templates) each post is published on a separate page. So login at Blogger.com and click New Post button under blog title on Dashboard. The Post Editor will open. Give a title and put in some message to your blog members.

To ensure that the post will not appear on Main Page of blog click the Post Options link in bottom frame of Post Editor. Change the date here to any date BEFORE the date of the last post on your Main Page. Publish Post.

ADD MEMBERS GADGET TO BLOG

First step is to sign up at Google Friend Connect. Then get the code for the Members Gadget. It will look something like this :

<!-- 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-1236939855410" style="width:282px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '385';
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';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-XXXXXXXXXXXXX',
   site: 'XXXXXXXXXXXXXXXXXXXXXXXX' },
  skin);
</script>

In above code change :

style="width:282px;

to 282px to 100% and also change the hex colors :

skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';

to match your site design. Change the height of the gadget by modifying '385' in :

skin['HEIGHT'] = '385';

Then save the gadget.

GADGET APPEARS ON SPECIFIC PAGE ONLY

We do not want the gadget to appear on every page. We want it to appear only on the 'Blog Members' page. For this we use the power of conditional tags. The first step is to get the permalink of the Blog Members post published in Step 1 above. Look in the Blog Archives gadget as the post was backdated. Click the post link to open the post page. Copy the link from the address bar. It looks like this in my example :

http://www.blogdoctor.me/2007/03/blog-members.html

Then we have to modify the widget code. Login at Blogge.com and click Layouts link on dashboard. Then click Edit Html subtab of Layout tab. Click on Expand Widgets Template checkbox at top of Template Code box. Wait for page to refresh. Scroll down to the code for the Blog Members gadget. It will look like something this :

<b:widget id='HTML28' locked='false' title='BLOG MEMBERS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "http://www.blogdoctor.me/2007/03/blog-members.html"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Put in the two lines in bold as shown above. In the first line :

<b:if cond='data:blog.url == "http://www.blogdoctor.me/2007/03/blog-members.html"'>

Put the permalink of your Blog Members post obtained in Step 1. Do not forget to put in the second line :

</b:if>

in exactly same place in the widget code. Save Template. As you can see the Members gadget showing all the present members appears only on this post.

Followers and Friends How they Connect?

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 :