Now Google Friend Connect is a depreciated product. Its new available alternate is Google+ Followers. I’ll recommend you to work more upon Google+ Followers rather than Google Friend Connect. Today when you use Google Friend Connect gadget you have four (4) rows of faces of followers. Sometimes you may feel this gadget is making you blog slow especially when you put this gadget just below the header. So this very import to reduce the blog loading time and use this gadget in middle or lower part of blog’s sidebar.

friendconnect only two rows

I know if you have more than 500 followers or some figure that is pretty good you’ll not remove this gadget from your blog and add it’s alternate. But good thing is to optimize this gadget and use both. For this purpose I will suggest you to use only two (2) rows of faces of followers in Google Friend Connect because it will help you to improve your page speed i.e. blog loading speed.

Now I will tell you how to optimize your Google Friend Connect gadget for two (2) rows of follower’s faces. This is not very hard for you. You can do this in 6 easy steps:

1. Open your blog homepage in Mozilla Firefox or Google Chrome
2. Do right click and select View Page Source
3. After that you’ve to find the following code

var skin = {};

4. As shown in the following image you should identify and copy the div id and site id for use:

friendconnect code for two rows

5. Now use this div id and site id to optimize our Google Friend Connect for 2 rows. For this you’ve to change the div id and site id in the following code:

<!-- friend connect -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-1qt44hknpopem" style="width:100%;border:0"></div> /* Change with you blog's div id*/
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "";
skin['TITLE'] = "";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#000000";
skin['ENDCAP_LINK_COLOR'] = "#000000";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#000000";
skin['CONTENT_TEXT_COLOR'] = "#000000";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#000000";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#a3a3a3";
skin['CONTENT_HEADLINE_COLOR'] = "#4e4840";
skin['FONT_FACE'] = "normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
skin['NUMBER_ROWS'] = '2'; /* Change the number to control number of rows*/
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{id: 'div-1qt44hknpopem', /* Change with you blog's div id*/
site: '07982277196184713336' }, /* Change with your blog's site id*/
skin);
</script>
<!-- friend connect -->

6. You can use this code in html/javascript gadget to display on your blog.

Now you can see 2 rows of follower’s faces in friend connect gadget. You may question, is it possible to use 1 row in this gadget or any number of rows? Answer is YES, you just have to change the number highlight in red color.

Download:
1. Mozilla Firefox
2. Google Chrome