Setting Google Friend Connect Up on Your Blog

There’s been a lot of buzz being given to Google’s new Friend Connect service, which is definitely interesting — Friend Connect allows users of a Website to connect by “joining” the Website’s community. Users can “friend” each other (think MySpace) and do potentially all sorts of other neat things, depending upon the Friend Connect widgets in use on the site in question.

This is definitely a step up from “external” social networking where “you” are represented by a profile page stored on a third party Website halfway around the world. This brings socialization home, to your own Website, which I believe ought to be the “central nexus” of one’s identity online. Yes, I realize there are valid reasons to the contrary, but I’m a whole lot more comfortable having control over my “social network” rather than allowing gargantuan third parties to make use of my friendships to make a gazillion dollars off of advertising. Oh, and nevermind the fact that if those companies go belly-up, so does the social network, shared media, and so on that goes along with them.

Google Friend Connect brings social networking to the “local” level — my site, my rules — though it still stores all of the data externally and relies upon JavaScript to do basically all that it does.

A small step in the right direction is still a step in the right direction, so I signed up for Friend Connect straightaway. How did I get it set up on my site, though?

The process was fairly simple, and this is what I did. (The thumbnails link to full-size images so that you can see what is going on!)

  1. On the Google Connect site, follow the link to Set Up a New Site.

  2. The next screen consists of a brief overview of the steps you’ll need to follow. Press the “Continue” link to — wait for it… — continue.

  3. You’ll be prompted for the name and address of our site; don’t leave Google hanging in anticipation: go ahead and fill that puppy out! “Continue” to move on…

  4. Now you’ll need to download two files — rpc_relay.html & canvas.html. These files will need to be uploaded to the root directory of your domain. This means that if your domain is demo.example.com, the files should be located at — to use the first file as an example — demo.example.com/rpc_relay.html. Then “Continue”; catching on to that bit yet? :)

  5. At this point, Google will attempt to find the two files from the previous step on your server. If you don’t have them in the correct directory, you won’t be moving to the next step very quickly. The Big G doesn’t believe in compromise — which could explain why it hasn’t married yet.

  6. Continue working your way through the steps until you get to the point where you need to set up a Members gadget. This is when Google will need more information from you — yeah, I know, they’re supposed to know everything, but humor them for a bit longer. First up is the size of the widget we want.

    The widget must be at least 200 pixels in either direction, which results in it being too wide for either of my sidebars. I made the decision to place the widget just below my multimedia box, which Firebug revealed to be a delightful 405 pixels wide. Your width may very likely vary, though. I also decided that I didn’t want the gadget to take up a significant portion of my sidebar, so I chose the minimum height — 200 pixels.

  7. The next step involves doing a bit of research — what colors will work best in your design? I scoured my stylesheet and pulled appropriate colors to plug into the provided form, resulting in what you see in the screenshot. What colors should you use? Well, only you can answer that one, but feel free to go ahead and rub some funk on it.

  8. The “Generate Code” button… Click it. ;)

  9. The code that is generated appears in a textarea below the button. This is the code it generated for me:

    <!-- 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-1228409167294" style="width:405px;border:1px solid #BEC3ED;"></div>
    <!-- Render the gadget into a div. -->
    <script type="text/javascript">
    var skin = {};
    skin['HEIGHT'] = '200';
    skin['BORDER_COLOR'] = '#BEC3ED';
    skin['ENDCAP_BG_COLOR'] = '#e7e9f8';
    skin['ENDCAP_TEXT_COLOR'] = '#111111';
    skin['ENDCAP_LINK_COLOR'] = '#1E39CC';
    skin['ALTERNATE_BG_COLOR'] = '#FBFBFE';
    skin['CONTENT_BG_COLOR'] = '#ffffff';
    skin['CONTENT_LINK_COLOR'] = '#1E39CC';
    skin['CONTENT_TEXT_COLOR'] = '#111111';
    skin['CONTENT_SECONDARY_LINK_COLOR'] = '#728E92';
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#728E92';
    skin['CONTENT_HEADLINE_COLOR'] = '#0B1447';
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
     { id: 'div-1228409167294',
       site: '06399306853693405554'},
      skin);
    </script>

    Eww, yucky. Unnecessary comments. Inline style. The JavaScript isn’t commented out. … Let’s just say, I found some room to improve upon the code when copying it over. I came up with this:

    <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
    <div id="div-1228409167294"></div>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    	var skin = {};
    	skin['HEIGHT'] = '200';
    	skin['BORDER_COLOR'] = '#bec3ed';
    	skin['ENDCAP_BG_COLOR'] = '#e7e9f8';
    	skin['ENDCAP_TEXT_COLOR'] = '#111111';
    	skin['ENDCAP_LINK_COLOR'] = '#1e39cc';
    	skin['ALTERNATE_BG_COLOR'] = '#fbfbfe';
    	skin['CONTENT_BG_COLOR'] = '#ffffff';
    	skin['CONTENT_LINK_COLOR'] = '#1e39cc';
    	skin['CONTENT_TEXT_COLOR'] = '#111111';
    	skin['CONTENT_SECONDARY_LINK_COLOR'] = '#728e92';
    	skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#728e92';
    	skin['CONTENT_HEADLINE_COLOR'] = '#0b1447';
    	google.friendconnect.container.setParentUrl('/');
    	google.friendconnect.container.renderMembersGadget({
    		id: 'div-1228409167294',
    		site: '06399306853693405554'
    	}, skin);
    //--><!]]>
    </script>
  10. Getting the code is just half the fun; you also have to do something with the code. Crazy, I know. Being a fanboy of the Thesis theme for WordPress, this step is Thesis-specific. (You all should be using Thesis anyway; it totally rocks your socks, even if you don’t realize it yet!)

    Open your custom/custom_functions.php file for editing and add this block of code to the end:

    function friend_connect_code() { ?>
    <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
    <div id="div-1228409167294"></div>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    	var skin = {};
    	skin['HEIGHT'] = '200';
    	skin['BORDER_COLOR'] = '#bec3ed';
    	skin['ENDCAP_BG_COLOR'] = '#e7e9f8';
    	skin['ENDCAP_TEXT_COLOR'] = '#111111';
    	skin['ENDCAP_LINK_COLOR'] = '#1e39cc';
    	skin['ALTERNATE_BG_COLOR'] = '#fbfbfe';
    	skin['CONTENT_BG_COLOR'] = '#ffffff';
    	skin['CONTENT_LINK_COLOR'] = '#1e39cc';
    	skin['CONTENT_TEXT_COLOR'] = '#111111';
    	skin['CONTENT_SECONDARY_LINK_COLOR'] = '#728e92';
    	skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#728e92';
    	skin['CONTENT_HEADLINE_COLOR'] = '#0b1447';
    	google.friendconnect.container.setParentUrl('/');
    	google.friendconnect.container.renderMembersGadget({
    		id: 'div-1228409167294',
    		site: '06399306853693405554'
    	}, skin);
    //--><!]]>
    </script>
    <?php }
    add_action('thesis_hook_after_multimedia_box', 'friend_connect_code');

    If you’re using Thesis along with the essential plugin OpenHook, you can add the code even easier via the Thesis OpenHook panel; simply drop the corrected code from step nine into the “After Multimedia Box” box, save the page, and you’re all set to go!

  11. Friend Connect is up-and-running at this point, but it doesn’t quite look right… Where are the nice borders around the box that the setup page had? And what’s with it setting so closely to the sidebar widgets below it?

    This is where some simple styling comes into play. Remember the inline styles from step nine which was removed? Let’s bring that back, making some slight tweaks to it for optimal effect. We remove the border from the left-side as there is already a border present; additionally, we set the width to 100% to take advantage of the em-based layout, allowing the gadget to resize with its container. To resolve the closeness with the sidebar widgets, we add in some margin space on the bottom of the Friend Connect gadget. This is the line of code I used; your code will vary depending upon the unique ID given the gadget:

    #div-1228409167294 { width: 100%; border: 1px solid #bec3ed; border-left: none; margin-bottom: 2.2em; }

    For Thesis users, that styling should be placed in your custom/custom.css file; if you’re using another theme, the stylesheet name will very likely vary.

At this point, the Friend Connect gadget should be installed and looking great on your site. All that remains is building your community.

Speaking of which, would you mind joining this site’s community? It only takes a moment, and you very likely won’t even need to sign up for a new username or password! As always, thanks for your support.

Find this tutorial useful? Won’t you take a few seconds and submit it to your social site of choice? Thanks!

Finally, feel free to share Friend Connect best practices, tips, or other such stuff in the comments. I would love to hear how you’re getting the most out of this new service!

7 thoughts on “Setting Google Friend Connect Up on Your Blog”

  1. Prashanth: Well, it looks like you have a fairly bare-boned site there, so you could go just about any direction with it.

    Personally, I can’t sing the praises of a WordPress + Thesis setup often enough; if, however, you’re not interested in WordPress, I’d check out a Google search for open source styles. There are plenty of free designs out there which you can use on your site.

  2. Hi Rick!

    Great tutorial. Thanks.

    Got a quick question: Where in your revised code do I need to place the line of border code – #div-1228662592999 { width: 100%; border: 1px solid #bec3ed; border-left: none; margin-bottom: 2.2em; }

    I’m clueless on coding and will be grateful for your help.

    Thanks
    Robert

    Thanks

  3. At Blogger, the Followers gadget generates a locale=’pt-Br’
    It already worked as WordPress widget and now I had to remove
    the locale option. Any idea?

Leave a Comment

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

Use your Gravatar-enabled email address while commenting to automatically enhance your comment with some of Gravatar's open profile data.

Comments must be made in accordance with the comment policy. This site uses Akismet to reduce spam; learn how your comment data is processed.

You may use Markdown to format your comments; additionally, these HTML tags and attributes may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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

the Rick Beckman archive
Scroll to Top