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

How to Customize the Google Friend Connect WordPress Plugins CSS & Make It XHTML CompliantThis 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:

144
145
146
147
148
'<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>';
74
75
76
77
78
79
80
81
82
83
// 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:

144
145
146
147
148
'<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>';
74
75
76
77
78
79
80
81
82
// 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.

About the Author

Similar Posts

Facebook Comments

-->

3 Comments On “How to Customize the Google Friend Connect WordPress Plugin’s CSS & Make It XHTML Compliant”

On 9th June 2009 6:42 AM, goddywils said:

Hey,

I follow on in twitter. Just thought of asking you a small help. How to include a power point presentation into a wordpress blog site?

There is also an option i find in slideshare exclusively for wordpress. But only a link comes up. I need a snapshot view to come up in my wordpress page.

Thanks for the help.

On 22nd July 2009 12:41 PM, GatorHerb said:

really appreciate the tip – was trying to configure this plug in for a client recently and it looks really sloppy. I will clean it up now with your recommendations. Any feedback on the FB friend connect plugin?

On 24th August 2009 2:05 AM, Michael said:

Well this is very useful indeed. I have a number of blogs and have been trying to figure this out for a while.

Now it is a bit clearer.

Much appreciated!

Post a Comment


(Required)


(Required)