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!