Google Friend Connect for Blogspot/Blogger with Only 2 Rows

7

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 your blog slow especially when you put this gadget just below the header. It is very important to reduce the blog loading time and use this gadget in the 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 its 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 Google Friend Connect gadget. You may question, is it possible to use 1 row in this gadget or any number of rows? The answer is YES, you just have to change the number highlight in red color.

7 COMMENTS

  1. मैँ समझता हुँ इसकी जरुरत कम लोगोँ को ही पडेँगा क्योकि यहाँ पर सब ज्यादा से ज्यादा फ्रेँड दिखाना चाहते हैँ कई तो हैडर के पास लगाते हैँ इसे फिर भी अच्छा प्रयास हैँ ।

    • @वरुण दिखावा और समझदारी दोनों की बराबर ज़रूरत होती है। आपको ध्यान रखना होता है कि कब किसकी कितनी ज़रूरत है।

  2. वेबसाइट की गति के लिए तो काफी उपयोगी सिद्ध होगा यह! गूगल पेज-स्पीड इनसाइट द्वारा मूल्यांकन में जिन चित्रों को Optimization की सलाह दी गयी थी मेरे ब्लॉग के लिए उसमें ज्यादातर इस फ्रेंड-कनेक्ट विजेट के आइकन ही थे। आपकी इस युक्ति से शायद मेरे ब्लॉग की गति कुछ और ठीक हो सकेगी। कामयाब युक्ति है यह! आभार इसके लिए।

    • @हिमांशु इसके लिए ही मैंने इस पुराने विजेट पर इतना विचार किया, ताकि पेज स्पीड में कुछ सुधार हो। और इसके लिए फ्रेंड कनेक्ट की ही पुरानी स्क्रिप्ट का प्रयोग आपके सामने प्रस्तुत किया है।

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.