How to Customize the Google Friend Connect WordPress Plugin’s CSS & Make It XHTML Compliant

This is a follow up to my previous post on how to install the Google Friend Connect WordPress plugin. This plugin by Google is really rough on the edges and it requires some tweaks for people concerned with the XHTML code and CSS design.

Fixing the Google Friend Connect WordPress Plugin’s XHTML Errors

The Google Friend Connect WordPress Plugin has a few XHTML errors.

• It uses the <br> tag, which has been depreciated and the <br /> tag should be used instead.
• It uses the <b> tag, which is depreciated and the <strong> tag should be used instead.
• There is an unnecessary <br> tag in the fc_wp_comment_form() function. This may cause your comment form to look weird.
• 1 of the img tags does not have the closing />.

To fix these errors, you need to make the following changes.

Original code:

'<img align="left" src="' +  viewer.getField("thumbnailUrl") + '">' +
'<b>Hello ' +  viewer.getField("displayName") + '!</b><br>' +
'<a href="#" onclick="google.friendconnect.requestSettings()">Settings</a><br>' +
'<a href="#" onclick="google.friendconnect.requestInvite()">Invite</a><br>' +
'<div id="loadprof"></div>';

// The fc_wp_comment_form function
// This just creates a div tag that will be replaced by the javascript code
// when the page gets loaded
function fc_wp_comment_form() {
 ?>
   <br>
   <div id="profile">
   </div>
 <?
}

Edited code:

'<img align="left" src="' +  viewer.getField("thumbnailUrl") + '" />' +
'<strong>Hello ' +  viewer.getField("displayName") + '!</strong><br />' +
'<a href="#" onclick="google.friendconnect.requestSettings()">Settings</a><br />' +
'<a href="#" onclick="google.friendconnect.requestInvite()">Invite</a><br />' +
'<div id="loadprof"></div>';

// The fc_wp_comment_form function
// This just creates a div tag that will be replaced by the javascript code
// when the page gets loaded
function fc_wp_comment_form() {
 ?>
   <div id="profile">
   </div>
 <?
}

1. Replace all <br> tags with <br />.
2. Replace all <b> tags with <strong>.
3. Remove the <br> tag in the fc_wp_comment_form() function on line 49.
4. Add a back slash to the <img> tag on line 150.

Editing the CSS of Google Friend Connect WordPress Plugin’s Sign In Box

Original code:

#profile {
font-size:13px;
margin: 20px 40px;
border: 1px solid blue;
padding: 15px;
background-color: #E5ECF9;
}

Edited code:

#profile {
font-size:12px;
margin: 0px;
padding: 0px;
}

This really depends on how you want the sign in box to look like. I hate the blue border and how it was aligned to the centre of the page. So I removed the border and margin/padding space.

You might also encounter CSS problems with the code below:

Original code:

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
h2 {color: #3366CC; font-size: 18px; font-weight: normal}
h3 {font-size: 13px; font-weight: normal}
h4 {color: grey; font-size: 11px; font-weight: normal}

Google adds this code to your WordPress site whether you like it or not. This to me, is very sloppy coding from Google. They could have added classes instead of forcing all h2, h3, h4 tags to look the way they want it to. Lucky for me, I use CSS classes to control how my h2, h3 and h4 tags so I am not affected by this code. However, if you use a general h2, h3, h4 without any classes or IDs, then good luck!

Edited code:

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
h2 {color: #3366CC; font-size: 18px; font-weight: normal}
h3 {font-size: 13px; font-weight: normal}
h4 {color: grey; font-size: 11px; font-weight: normal}

I found that it was okay for me to remove the body code and it did not affect the sign in box.

Hopefully we will see some improvements to Google’s plugin in the future. It is still rather buggy at the moment.