How to Install the Google Friend Connect WordPress Plugin

I am still very new to this Google Friend Connect phenomenon. I decided to take a closer look at Google Friend Connect after reading Chris Lang’s post about the Google Friend Connect WordPress plugin. It seems like a new way to get traffic and promote user participation on your web site.

Chris Lang’s instructions are pretty good but I plan to go deeper into the installation process to make it even easier for you. Google’s Friend Connect instructions are horrible and they need to work on it as soon as possible before they put off more people from Google Friend Connect.

Step 1: Join Google Friend Connect

[Show as slideshow]

[View with PicLens]

You need to have a Google account to add your web site to the Google Friend Connect database. I shall not go through the Google signup process. Once you have a Google account, click on the huge “Set up a new site” button to get started.

Step 2: Set Up a New Site at Google Friend Connect

[Show as slideshow]

[View with PicLens]

• For WordPress sites, click on the “Friend Connect for standard web sites” link.
• Click on the “Continue” link to skip the overview page.
• Enter your web site’s title and URL and click on the “Continue” link.
• Click on the “rpc_relay.html” button and save the file into your web site’s local root folder.
• Click on the “canvas.html” button and save the file into your web site’s local root folder.
• Click on the “Continue” link to proceed to the next page.
• Upload “rpc_relay.html” and “canvas.html” to your web site’s root folder on your web host.
• Click on the “Test to finalize setup” button to complete your web site’s submission to Google Friend Connect!

Step 3: Download, Edit, Upload and Activate the Google Friend Connect WordPress Plugin

[Show as slideshow]

[View with PicLens]

This is the toughest part of the whole process. Google did not release a very user-friendly WordPress plugin. You will have to extract the plugin files into a specific folder, edit the source code and upload the plugin files before it will work.

40
41
42
43
44

// Please modify the following function to return a value that
// you obtain after registering your site with FriendConnect
function fc_get_site_id () {
  return '14868846668007632003';
}

109
110
111
112
113
114
115
116
117

<!-- Initialize the Google Friend Connect OpenSocial API. -->
<script type="text/javascript">
   var SITE_ID = "<?echo fc_get_site_id(); ?>"
   google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
   google.friendconnect.container.initOpenSocialApi({
   site: SITE_ID,
   onload: function(securityToken) { initAllData(securityToken); }
  });
</script>

• Click on the “Plugins” link on your Google Friend Connect page.
• Click on the “WordPress” link.
• Click on the “Downloads” tab of the Google Code page.
• Click on the “wordpress.zip” file to download it to your computer.
• Create a folder with the name “fc_plugin” in your web site’s local “wp-content/plugins/”.
• Extract the files in the “src” folder of “wordpress.zip” into the new “fc_plugin” folder.
• Open the file “fc_plugin.php” with your favourite HTML editor.
• Go to line 43. It should have something like return ‘XXXXXX’, where ‘XXXXXX’ is the default Site ID number Google added into the file.
• Get your site ID by checking out your address bar when you are browsing your Google Friend Connect page. There should be something like “id=xxxxxx”. The numbers after the “id=” is your Site ID. I have not idea why Google does not display this prominently in the Google Friend Connect area.
• Replace the Site ID in “fc_plugin.php” with your Site ID.
• Go to line 112. Remove everything in the bracket and leave only ‘/’. This is for letting the plugin know your 2 HTML files are in the root folder.
• Upload the “fc_plugin” folder to your web site’s “wp-content/plugins” folder on your web host.
• Activate the plugin at your WordPress plugins page.

Step 4: Test the Google Friend Connect WordPress Plugin

[Show as slideshow]

[View with PicLens]

You should see a Google Friend Connect sign in box at the comment box of every single post. Try signing in and posting a comment to see if it works. It it works, then you’ve done everything right. If it doesn’t, check out line 43 and 112 to see if you entered the right code.

Problems with the Google Friend Connect WordPress Plugin

I am not sure how to edit the positioning and design of the sign in box. It looks pretty ugly at the moment. This plugin adds a lot of extra CSS code to your web site, which may mess up your web site’s design. I will post a tutorial on how to edit the Google Friend Connect WordPress plugin once I have figured out how to do it.