Andrew Bleakley

If you're new here, you may want to subscribe to my RSS feed or subscribe by email. Thanks for visiting!

• Tweet
• Share
• Email
• Sharebar

• Tweet
• Share
• Email

Google Friend Connect is a set of Google gadgets designed to turn your blog or website into a community with nothing more than copy and paste.

Adding Friend Connect features to a website requires no programming skills; you just copy and paste snippets of HTML code onto your site. You can can also add custom integrations with Friend Connect’s API.

Unfortunately for WordPress users (more specifically Firefox visitors to WordPress blogs) it doesn’t work quite that easily. Simply pasting the provided code into a sidebar text widget won’t work for any of your site visitors using Firefox. Internet Explorer is OK – and that is about the only time that phrase will leave my lips.

Before you start take the opportunity to join my Google community – please- come on it looks sad there with no one in it. My mum checks this blog, I want her to see I have some friends.

How to make Google Friend Connect with Thesis, WordPress and Firefox

Step 1.

Log into Google Friend Connect and get the code for your members gadget.

The code comes in three parts.

The Google Friend Connect Library

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

The DIV tag (marking the insertion point for the gadget)

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-4138360605280xxxxxx" style="width:276px;border:1px solid #cccccc;"></div>

The skin (or render) JavaScript

<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-4138360605280xxxxxx',
site: '06043523137538175547' },
skin);
</script>

Step 2.

In WordPress go to Appearance, Widgets and add a new Text widget to the sidebar where you want the gadget to appear.

Leave the title blank (my preference, feel free to do what you like)

In the body of the widget paste ONLY the DIV portion of the Google Friend Connect Code

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-4138360605280xxxxxx" style="width:276px;border:1px solid #cccccc;"></div>

Step 3.

Go to Thesis Options (/wp-admin/admin.php?page=thesis-options)

Expand the Footer Scripts option panel.

Above any code that may already be in there (like Google Analytics) paste

<script>
window.JSON = {
parse: function(st){
return st.evalJSON();
},
stringify: function(obj){
return Object.toJSON(obj);
}
};
</script>

Below this snippet (required for Firefox) paste the Google Friend Connect Library code and the  skin JavaScript.

<!-- Render the gadget into a div. -->

<script type="text/javascript">

var skin = {};

skin['BORDER_COLOR'] = '#cccccc';

skin['ENDCAP_BG_COLOR'] = '#e0ecff';

skin['ENDCAP_TEXT_COLOR'] = '#333333';

skin['ENDCAP_LINK_COLOR'] = '#0000cc';

skin['ALTERNATE_BG_COLOR'] = '#ffffff';

skin['CONTENT_BG_COLOR'] = '#ffffff';

skin['CONTENT_LINK_COLOR'] = '#0000cc';

skin['CONTENT_TEXT_COLOR'] = '#333333';

skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';

skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';

skin['CONTENT_HEADLINE_COLOR'] = '#333333';

skin['NUMBER_ROWS'] = '4';

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderMembersGadget(

 { id: 'div-4138360605280xxxxxx',

 site: '06043523137538175547' },

 skin);

</script>

Conclusion

There really isn’t one. I have no idea why Google’s code doesn’t work – I can not understand the management decision making that allowed it to be released.

The code above will work for any WordPress site, but instead of being able to paste the code into a Thesis Option panel, just open your footer.php file in the WordPress Theme Editor and paste it directly above the </body> tag.

Would love to hear from anyone this helps, remember to use the code Google gave you, not my code – sing out if you have any trouble.

Related posts:

1. WordPress – always open sidebar links in new window
2. Open links in a new window and still validate
3. Fix Paypal Buttons in Thesis

Tags: Thesis