Display Google Friend Connect Members Count

Now a days many are more fund of using APIs to display a particular data from various services than by using the readily available widgets, by doing this one can achieve or  maintain their site look and feel. Many are crazy about the counters to display in their site like, Alexa Rank, Technorati Rank, RSS Readers Count, Google Indexed Pages, Delicious Link Count, etc. I am also more fund of displaying the numbers :) to show my site popularity, as recently I have worked on WordPress Author profile page which is still under construction, in this page you can find various counters like, number of articles written by particular author, twitter followers, etc.

Google Friend Connect Members Count
Google Friend Connect Members Count

Click here to view DEMO.

Going in the same direction, got an idea to display Google Friend Connect Total Members Count. So immediately started exploring the most user friendly APIs of Google Friend Connect. Finally I have come up with a small snippet with which you can display Google Friend Connect Total Members Count.

Before you go through the Friend Connect inline JavaScript code, make sure you have set up your website in Google Friend Connect site. Head to http://www.google.com/friendconnect/ and click “Set up a new site”. You’ll be asked to input some information about your website, and to upload two files to your web server. For assistance with these steps, please consult the Friend Connect help FAQ.

Once you have your site properly set up for Friend Connect, visit the Friend Connect panel and click the “For Programmers” link on the list of links underneath the name of the site you have just set up. The “For Programmers” page will give you a snippet of code to copy and paste into the HTML of any of the pages of your website. For reference, this will look something like the following:

Here is the Javascript:


Let me explain you the Javascript:
I have used Google Friend Connect Javascript API to build this Google Friend Connect Members Count.

  1. The first line you see above is to load “the Google AJAX API Loader”.
  2. The second line loads “the Google Friend Connect javascript library”.
  3. Make sure you replace SITE_ID = ‘####################’; with your site ID generated for every site once you setup the Google Friend Connect for your site.
  4. Then specify the location of rpc_relay.html and canvas.html
  5. The next line initializes the OpenSocialApi connection.
  6. On page load we will be calling the following callback function initAllData(), which is passed as a security token.
  7. Request the OWNER in the initAllData() function.
  8. Specify a callback function named setupData() that will handle the server’s response.
  9. Check the server’s response for an error.
  10. Place the Total Members Count into an HTML element, in our case the DIV element which has an id – memberscount.

And the single line HTML is as follows:

Google Friend Connect Members Count

I don’t think there is anything to explain in the above snippet right? :)

And the following CSS will give you a custom look – can modify as per your site look and feel:

.memberscountdisplay { display: block; border: 10px solid #e8d7a2; padding: 10px; background-color:#fef5d8; margin:0px auto; text-align:center; height:145px; float:left; width:760px; }
#memberscount { font-size: 100px; text-align:center; width:100%; display:block; }

Here too :)

So for your reference, here’s the empty HTML file from the start of this article should now look like:

Google Friend Connect Members Count

Here is the DEMO of the Google Friend Connect Members Count.

Liked this? – Then Spread it all over and happy Google Friend Connect.

Published by Sravan Kumar

A Creative Web Designer, Developer, User Interface and User Experience Expert.

Join the Conversation


  1. Pingback: devmarks.com
  2. Pingback: designfloat.com
  3. Superb post I never knew about this I’ll recommend this site to my friends and family members amazing blog :)

Leave a comment

Your email address will not be published. Required fields are marked *

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

Thank you for sharing the article across social media. You can follow us in these paltforms to receive latest updates from WittySparks.

Send this to a friend