Facebook like button – Display the images and content you want.

When a user likes your site using the facebook like button. Facebook posts an image, a link and a description to their wall. But how do you get facebook to show the image and text you want it to display? Afterall this is a good way to advertise and an opportunity not to be missed.

By inserting a couple of metatags (open graph tags) into the head of your page you can select the content you wish to display really easily. You can find comprehensive information on how to do this on the facebook developer site.

However I am going to give you a quick summary of my interpretation of this information.

The header of your site should contain the following:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Page Title</title>
            <meta property="og:title" content="Site Page Title Goes Here"/>
            <meta property="og:type" content="article"/>
            <meta property="og:url" content="http://yoursite.com"/>
            <meta property="og:image" content="http://yoursite.com/images/thumbnail.jpg">
            <meta property="og:site_name" content="Site Title"/>
            <meta property="og:description" content="A description of your site"/>
            <meta property="admins" content="12345"/>

Notes on the above code:

  • Ensure you have all the extra information required after
  • og:title should be your page title
  • og:type should be set to article. There is a wide range of types available however article seems to be the most relevant for a page that is transient. eg a blog post or marketing landing page. Article also seems the most reliable option and produced the least amout of errors for me in facebook lint.
  • og:url This should be your website url and the page you have this code on. This may sound stupid but the url must be url of the page with this code on! Modifying this to the live url (before the page is live) will mean facebook cannot find the correct image path.
  • og:image This should be the path to a thumbnail image of your choice.
  • og:description A short description of your page.
  • admins Despite facebook suggesting you use “fb:admins” I found this to be buggy. “admins” seems to be more reliable. You can find out your facebook admin by clicking on an image within your photo album and looking at the url for the numbers proceeding ?fbid= e.g http://www.facebook.com/photo.php?fbid=NUMBERHERE&set=t.11111&type=1&theater

Verifying your code
You can check your code by using Facebook Lint Tool. This will let you know any mistakes and also make facebook aware of your page.

Hopefully the above code helps! More information on Open Graph Tags or the like button can be found on the facebook developer website.

Insites Tour 2011

Last week I attended the London leg of the Insites Tour. It was a great evening with some interesting stories/biographies from the speakers and lots of networking. However reflecting back on it now, I am not sure how much I personally took away from the evening. Having been to this, I have decided I think I may favour the normal conference style format with code and design slides/presentations. Does that make me a little geeky? Or maybe i am just greedy and would like a little of both!

A quick pic from my iphone…

Learning JQuery

Over the past year I have been considerably brushing up on my JQuery skills. I thought I would take this opportunity to give a few pointers to others who may be a little nervous about taking their first JQuery steps.

1. Debugging
The best thing I learnt was how to use console.log() in firebug.
console.log() is great way of checking your code as you go. Its far less annoying than using alert() because you can see what is going on behind the scenes without nasty popups to keep closing.
You can use it to check that the selectors you are targeting are correct or that the script you are including has been included correctly.

2. Reading
A really friendly book to get you started is JQuery from Novice to Ninja by sitepoint. Its really easy to understand and has some nice tutorials to get you going.

3. Making use of JQuery documentation
Pretty much all you need to know is on the JQuery official site. Take some time to look around and understand the difference between events, selectors and traversing. Once you know how it all fits together its easy to reference whatever you need. All docs have real source code examples too.

4. Comment your code
It goes without saying that commenting your code whatever language, is good practice. It not only helps you but everyone when maintaining code in the future.

Whilst learning, I think it is a good idea to comment as much as possible. I found that I might copy and paste some code from somewhere (not necessarily the best approach I have to say but it does start to make you more familiar with seeing JQuery) and then modify it to fit what I needed. Its really easy in the early days of learning JQuery to do this and then forget later why or what is going on. Simple commenting of each line of code in laymans terms forces you to learn and understand what the code is actually doing.

5. Write it down before hand
A colleague of mine told me to do this so many times. If you write down what you want to achieve in simple terms on a piece of paper it helps you break down a daunting task into more manageable chunks. e.g click the button, fade in the div etc

A few good tutorial/reference sites:

50 JQuery Snippets
JQuery Videos
JQuery for Designers

WordPress to end support for IE 6

I’ve just been checking out the release notes for the upcoming WordPress 3.2 and it came to my attention that they will  no longer be providing support for IE6. Yippeeeee!

It would seem that the argument for dropping support for IE6 is starting to have some real weight behind it. With WordPress following in the footsteps of many other big names over the last 18 months including Google, YouTube and finally Microsoft themselves it looks like the task of convincing clients to apply the method of graceful degradation is going to become a much easier task.

WordPress Comments Form – How to change HTML

I searched high and low for a good tutorial on how to change the HTML of the wordpress comment form. From the articles I did find I managed to put together something that works. Feel free to post a comment if there is a better way of doing this…

I put the below code in functions.php and comment_form(); in my comments.php

The code below is my modified version. For defaults simply add or replace my code with http://codex.wordpress.org/Function_Reference/comment_form

add_filter( 'comment_form_defaults', 'my_comment_defaults');
function my_comment_defaults($defaults) {
	$req = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );
	$defaults = array(
		'fields'        	   => array(
		'author' => '<div><label for="author">' . __( 'Name' ) . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="author" name="author" placeholder="your name" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
		'email' => '<div><label for="email">' . __( 'Email' )  . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="email" name="email" placeholder="email@address.co.uk" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>'
		'comment_field' => '<div><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"  placeholder="your comment"></textarea></div>',
		'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
		'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
		'comment_notes_before' => '<fieldset>',
		'comment_notes_after'  => '</fieldset>',
		'id_form'              => 'commentform',
		'id_submit'            => 'submit',
		'title_reply'          => __( 'Leave a Comment' ),
		'title_reply_to'       => __( 'Leave a Reply %s' ),
		'cancel_reply_link'    => __( 'Cancel reply' ),
		'label_submit'         => __( 'Comment' ),
    return $defaults;

You will notice I have made the following modifications

  • Removed the website field
  • Added type=”email” to the Email field (HTML5)
  • Added placeholder text (HTML5)
  • Removed the default text from the top and bottom of the form and replaced with <fieldset></fieldset>
  • Moved the required * inside the label
  • Changed the “Leave a Reply” title to “Leave a Comment”
  • Changed the text of the submit button

WordPress 404 on Custom Post Types

I came across a nightmare of a problem today. Everytime I viewed my custom post types I kept getting a 404 error.  I just couldnt understand what was going on.  Thanks to this article I finally solved the problem.

When setting up custom post types and a custom permalink structure add the below code to the function used to create custom posts.

flush_rewrite_rules( false );

I just wanted to write a quick post to highlight the problem but an explanation of why this is needed can be found on the wordpress codex.

How to use Post Formats in WordPress 3.1

WordPress 3.1 has seen the introduction of Post Formats. They provide the ability to target posts within templates using get_post_format() and through css using the extra classes wordpress now adds automatically to posts. This will save on creating extra categories or tags just for targeting and styling these types of content.

So how does it work…

Add this to the functions.php file in your theme. You only need to list the formats you wish to use.

// This theme uses post formats<br/>
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link','image', 'quote', 'status', 'video', 'audio', 'chat' ));

You will then see a list of radio buttons in your edit post right hand column.

Once a type is selected you can style using the following class added to your post on listing pages

and using the following class added to your tag on single pages.

Within your templates you can target posts by format using the following code

 if ( has_post_format( 'image' )) {
  echo 'this is an image format';

WordPress 3.1

Yesterday saw the release of WordPress 3.1 and it has some pretty nice features for both general users and developers like myself.

New Admin Bar
An admin bar has been added when logged in. Its a nice little touch for the not so experienced wordpress user. It makes the admin section and the front end appear more seamless by allowing you to click through to create a new post, manage your personal details, appearance, comments and updates whilst browsing the front end of your site. For multisite users it makes switching between sites quick and easy.

Continue reading

Google PAC-MAN

I love google homepages. They are always really creative, original and a great way to learn about special days in the year.

This one however has to be my all time favourite. Its PAC-MAN’s 30th Birthday and to celebrate they have designed a google game for everyone to enjoy. Its great and even has an insert coin button for two players. Enjoy Everyone!