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.

The default Tabber look and feel is acceptable. I did not need to make a lot of changes to make it look good on my web site. Compared to MooTabs, Tabber requires a lot less work to customize.

Step 1: Download Tabber

Go to Tabber’s web site and download the latest version of Tabber.

Step 2: Upload Tabber to Your WordPress Theme’s Folder

I like to store my Javascript files in a folder called “js”. For my CSS files, I like to store them in a folder called “css”. Let’s assume my template folder is called “cooltemplate”, you should upload the Tabber files in the following manner:

1. /wp-content/themes/cooltemplate/css – Upload example.css here. Alternatively, copy and paste all the contents of example.css into your theme’s style.css.
2. /wp-content/themes/cooltemplate/js – Upload tabber.js here.

Step 3: Add Tabber References to Your WordPress Theme’s header.php

Add the following code to your theme’s header.php file in between the head tags.

<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber { display: none; }<\/style>');</script>

If you only display Tabber on the blog pages, do this to prevent the loading of the Tabber files on non-blog pages.

<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber { display: none; }<\/style>');</script>

Step 4: Add Tabber Code into Your WordPress Theme’s sidebar.php

<div class="tabber">
     <div class="tabbertab">
	  <h2>Tab 1</h2>
	  <p>Tab 1 content.</p>
     </div>
     <div class="tabbertab">
	  <h2>Tab 2</h2>
	  <p>Tab 2 content.</p>
     </div>
     <div class="tabbertab">
	  <h2>Tab 3</h2>
	  <p>Tab 3 content.</p>
     </div>
</div>

This is the default code of the Tabber. The text between the h2 tags will be displayed as the titles of each tab. You don’t have to display the content of each tab in the between the p tags. I did it with the HTML list tags.

<div class="tabber">
	<div class="tabbertab">
		<h2>Recent</h2>
	</div>
	<div class="tabbertab">
		<h2>Popular</h2>
	</div>
	<div class="tabbertab">
		<h2>Most Commented</h2>
		<ul></ul>
	</div>
</div>

The Tabber is a great place to insert all the comments and post lists. I personally use it to display the recent posts, popular posts, most commented posts, recent comments and top commenters.

Apart from the code I mention, WordPress recommends adding this to your style.css too:

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

If not it might mess up the layout of your post. What I am trying to do right now is typing in filler text to illustrate my point. The good thing about WordPress’ built-in media upload function is that it has 3 sizes for you to choose – thumbnail, medium and full size. The picture on the left is the thumbnail-sized picture, which I further reduced in size to match the content of this post.

This picture is now aligned to the right of my content. The trick in aligning pictures is to have enough space to the left or right. In this case, I have enough space right above this paragraph to squeeze in a picture on the right. I used the thumbnail-sized picture and left the size untouched.

This picture is now aligned to the centre of the page. There isn’t any room to display text on the left or right if you choose to display your pictures in the centre. The picture below is the medium-sized picture that WordPress generated for me.

If you did something similar in your WordPress blog and it did not align like my pictures above, you must have forgotten to add some WordPress CSS code into your CSS style sheet. WordPress didn’t tell you that, did they?

Add this code to the style.css of your WordPress template to enable these WordPress alignment features in your blog:

/* IMAGES */
img.alignleft
{
float: left;
}
img.alignright
{
float: right;
}
img.aligncenter
{
display: block;
margin: 0px auto 0px auto;
}

That’s it! Once you have this block of CSS code in your style sheet, you should be able to align your pictures in WordPress properly.

The WordPress Align Center Bug?

I find this “bug” rather interesting. Maybe it isn’t a flaw in WordPress but it was way this way. Okay, here’s the thing about this align centre feature…

When you try to align your picture to the centre the first time, WordPress adds some HTML code that looks like this:

<img src="http://whatever.com/picture.jpg" class="aligncenter" />

If you try to align your picture to the centre for the second time, WordPress adds more HTML code and it looks something like:

<p style="text-align: center;"><img src="http://whatever.com/picture.jpg" class="aligncenter" /></p>

Notice the extra P HTML tag that is added to your HTML code. Strange isn’t? Well, if you have added the block of code above, you don’t have to worry about centre aligning 2 times just to get your picture to align to the centre of the page. It sounds silly but that was what I did before I knew what WordPress actually adds to the HTML code when you try to centre align stuff.

P.S. This picture is really nice “Kodak” moment of 3 of my 4 cats. The cat lying down with the back facing the front is Mini. The kitten on the left is Coco and the other kitty on the right is Moca. All my cats have names with 4 letters and I try to give them a cool and “yummy” name.