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.

Most of us are familiar with HTML – the markup language that websites are written in. However, although it’s been around for a long time, we might not know as much about XHTML. What’s the “X” stand for? XHTML is an acronym for eXtensible Hypertext Markup Language. It has the same depth of expression offered by HTML, but it conforms to XML syntax. There are a lot of benefits to converting your old HTML page to XHTML.

There are a few versions of XHTML. The first is XHTML 1.0 Strict. This works almost the same as HTML 4.01, but XML syntax rules are enforced, resulting in greater readability, faster load timesand better search engine indexing. XHTML 1.0 Transitional uses the same syntax as Strict, but it lets you do more, too. You can use a number of extra elements and attributes, which helps people who are still using older versions of HTML (3.2 and earlier) make the change. That means you can still use the <center>, <u>, <applet> and <strike> tags.

Benefits of XHTML 1.0 Over HTML 4

Unlike HTML 4, XHTML provides a lot more accessibility. That means that even people who are disabled can view your page, sometimes using special devices. Accessible websites are actually part of the Disability Discrimination Actand now we have the ability to create it. Complying with XHTML standards makes it easy for blind or vision impaired people to read your website without a problem. However, that’s not the only thing that’s great about it.

If you convert your old page to XHTML, search engines will have an easier time finding it. Using XHTML compliant code means that your site is well structuredand spiders from your favorite search engine can index it more effectively. That improves your search rankings. In fact, just upgrading your site could give you a better position without any other changes. For many businesses, this is a significant benefit.

Since XHTML enforces better code standards, file sizes are smaller and load times are faster. If you combine your XHTML page with CSS, you’ll see even faster load time. Since a slow site turns many users off, this can allow you to keep more visitors.

When Should You Use XHTML Strict or XHTML Transitional?

Pages that are being adjusted from HTML 4.01 should use strict, since the basic content is the same. If you’re using older “presentational” elements, try using Transitional instead, to ease your way into the new language. Of course, if you’re not comfortable with all the ins and outs of coding in XHTML, talk to a professional. A skilled web developer will know what to use and when to use itand can help you make the transition smoothly, producing a lean, speedy, easy to index page that’s fully XHTML compliant.

If you’re still using a page that runs on older code, think about making the change. XHTML pages load faster and are better for users. They even allow leaner, faster browsers that don’t take up as much memory. There’s no reason to stick with an old fashioned webpage when XHTML can make things better for all of us.