HS.Hannah Stothard | Web Designer & Front End Web Developer

i love arty crafty things, making websites, interiors, travelling & growing my own veg.

recent posts

Jan 2012

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

Posted in web | Leave a comment

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">
<head>
<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"/>
</head>

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.

Oct 2011

HTML 5 – Page Structure

Posted in web | Leave a comment

Having built this site using HTML5. I thought it would be good to share a few of my learnings, resources and tips that I have picked up along the way.

As far as I can gather there is absolutely no reason why not to start using the HTML5 doctype. Its short and simple to write and completely backwards compatible. Well the doctype at least. Most of the new features are not, but some do degrade nicely, especially some of the new form elements. As long as you are aware what features have cross browser compatibility issues then you are good to go.

<!DOCTYPE html>

Page Structure
As you can see by viewing the source code of this site I have started implementing some of the new HTML5 tags. In particular:

<header> – For containing header content. A good replacement for <div id=”header”></div> or whatever <div> you might have used to hold your logo or main page heading content. This tag can also be used for content headers or other heading sections on your page. Feel free to use this tag multiple times if needed.

<hgroup> – Used to wrap several heading tags (h1,h2,h3,h4 etc) if they should be read together. Such as a main title and its sub title.

<section> – Exactly what it says. Used to wrap sections of your page. This will probably end up replacing alot of <div> tags.

<article> – Most likely to be used in blogs or news sections. Wraps each piece of news or each publication.

<footer> – Very similar to the header tag. This would most likely replace your <div id=”footer”></div> or the last section of your page. It can also be used multiple times if required.

To see these tags in action I have put together a really simple site structure as an example:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title>This is a test</title>
</head>
<body>
<header>This is the main header of the page</header>
<section>
    <header>
        <hgroup>
            <h1>Header of this section</h1>
            <h2>Sub heading of this section</h2>
        </hgroup>
    </header>
    <p>Content for the section</p>
    <footer>Footer of this section</footer>
</section>
<footer>This is the footer for the page</header>
</body>
</html>

You can also see an example of the tags in use by viewing the source of this page.

Semantics
The biggest benefit of the new HTML5 tags is achieving really semantic code. If written correctly your page should have a really logical structure. A good way to check if your code is well written is to use one of the following links:

http://code.google.com/p/h5o/
http://gsnedders.html5.org/outliner/

Cross browser compatibility
To ensure that our new tags are rendered correctly by all browsers, we need to add a small piece of css to set these elements to display as block level elements. This way we can style them in the same way we would the <div> tag.

article, aside, canvas, details, figcaption, figure, footer, header. hgroup, menu, nav, section, summary{display:block}

For IE we need to add some javascript. Setting the elements to display block is not enough. IE doesnt recognise the tags and therefore will completely ignore any styling on them. Using the below JS will fix this problem.

http://code.google.com/p/html5shiv

Resources
Some of my favourite HTML5 resources at the moment are:

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#1
http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
http://spyrestudios.com/21-incredible-html5-experiments/

Jul 2011

Insites Tour 2011

Posted in play, web | Tagged , | Leave a comment

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…

Jun 2011

WordPress Custom Post and Custom Taxonomy Permalinks

Posted in web | Tagged , | 1 Comment

I have the following setup:
- A custom post type called Products.
- A custom taxonomy called Product Categories.
- A page called Products with a custom page template assigned to it. This page template allows me to query my custom posts and display them in a layout of my choosing. Slug is set to /products.

I wanted my urls for my products to display in the following way:
/products/product-category/child-product-category/product-name.

Or to be more specific:
- View my “Products” page set with the custom template at the url /products
- View each “Product Category” on a url of /products/product-category
- View my custom post type “Products” on a url of /products/product-category/product-name

But nothings ever easy. The trouble I was having was that both my product page and product post type wanted to use the same slug (/products) and therefore conflicted causing 404′s. Not only that but custom taxonomies by default do not show the category in the url, and finally although in my head it made sense as a user to see the url /products/product-category/product-name they were not in any kind of heirarchical structure within wordpress to order them in a url this way.

So after a lot of googling and after finding this really helpful article I finally managed to put together some code that fixed the problem.

add_action( 'init', 'register_custom_post_types' );
 
//Set up Product Post Type
function register_custom_post_types() {
	register_post_type('products', array(
		'label' => __('Products'),
		'singular_label' => __('Product'),
		'public' => true,
		'show_ui' => true,
		'capability_type' => 'post',
		'hierarchical' => true,
		'rewrite' => array( 'slug' => 'products/%productcats%' ),
		'publicly_queryable' => true,
		'query_var' => true,
		'has_archive' => true,
		'supports' => array('title','editor','thumbnail','excerpt'),
	));
 
        //Set up Product Categories
	register_taxonomy('productcats', 'products', array(
		'hierarchical' => true,
		'label' => 'Categories',
		'singular_label' => 'Category',
		'rewrite' => array( 'slug' => 'products' ),
	));
 
}
 
//Fix Permalinks
add_filter('post_link', 'product_permalink', 10, 3);
add_filter('post_type_link', 'product_permalink', 10, 3);
 
function product_permalink($permalink, $post_id, $leavename) {
	if (strpos($permalink, '%productcats%') === FALSE) return $permalink;
 
		// Posts
		$post = get_post($post_id);
		if (!$post) return $permalink;
 
		// Custom Taxonomy
		$terms = wp_get_object_terms($post->ID, 'productcats');
		if (!is_wp_error($terms) && !empty($terms) && is_object($terms[0])) $taxonomy_slug = $terms[0]->slug;
		else $taxonomy_slug = 'uncategorized';
 
	return str_replace('%productcats%', $taxonomy_slug, $permalink);
}
 
//Flush permalinks
flush_rewrite_rules( false );

For a step by step explanation of the permalink function please refer to the original article I found on google. You may find you need to go to settings/permalinks in your admin and save again for the changes to take effect. You will already need to have the custom permalink structure set to /%postname%. More information on setting up custom page templates, custom post types and custom taxonomies can be found on the wordpress codex.

May 2011

Learning JQuery

Posted in web | Tagged , | Leave a comment

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.
http://www.sitepoint.com/books/jquery1/

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:

JQuery
50 JQuery Snippets
JQuery Videos
JQuery for Designers