blog content

20 December 2011

Design Hive 2012 desk calendar

Design Hive 21st Anniversary Calendar

Design Hive Ltd are proud to announce our 2012 desk calendar, this year following a symbolist art theme. Bringing a welcome splash of colour to any desktop.

Design Hive 2012 Calendar

2012 calendars are available to all our clients and should be with you by Christmas. There will also be a limited stock available from our offices, so if you require extra copies, or didn’t receive yours in the post, please don’t hesitate to contact us (available whilst stocks last).

Calendar Thumbnails 2012

by Phil Wareham | no comments

web design

05 July 2011

Facebook integration with Textpattern CMS articles

It's nice to share

Facebook provides a couple standard ways to get their services (such as comments, like buttons etc) integrated into your website, and it’s quite straightforward to get those services (plugins) to work directly on a Textpattern CMS powered website via FBML.

You could insert Facebook services as a simple iframe, but by far the more flexible method is to use their FBML option – it’s trickier to set up initially but provides much more feedback and features, you can also make those features load asynchronously so they don’t hinder the rest of the page from rendering.

Even if you don’t directly want to add Facebook features to your site (and there are plenty of valid reasons for that), you can still benefit by adding the Open Graph meta data since many users have Facebook plugins installed directly into their browser of choice which let them ‘like’ and ‘send’ a page anyway, even if the page itself has no Facebook button embedded directly in it. Note that HTML5 format code is used in this tutorial, so add any self-enclosing tags /> and any other necessary attributes if you are coding for XHTML instead.

getting started

First you’ll need to register as a developer on Facebook, in order to retreive your Facebook app id code. Follow their instructions and you’ll be issued with a unique ID for your website.

In very top of your page template, above the <!doctype html> tag, add the following snippet, this checks whether the browser user-agent is actually the Facebook spider – the reason for using this is explained below in the ‘Open Graph protocol’ section…

<txp:php>
  function is_facebook(){
  if(!(stristr($_SERVER["HTTP_USER_AGENT"],'facebook') === FALSE))
  return true;
  }
</txp:php>

open graph protocol

Add this code into the head meta section of your page template…

<txp:if_individual_article>
  <txp:output_form form="meta_sharing" />
</txp:if_individual_article>

Create a ‘misc’ type form named ‘meta_sharing’, this form will utilise the variable you set in the PHP code at the top of the page template. The reason? The FBML method relies on using the Open Graph protocol, unfortunately that protocol does not currently validate as HTML5, so you’ll use the variable to check the user-agent and only provide the Open Graph code to the Facebook spider, thus allowing the code to be effectively hidden from other user-agents (and not affect the validity). This may change in the future but here and now it’s a good method – and although Facebook has proposed Open Graph as a universal protocol, only they seem to use it in any meaningful way at present.

If you are not bothered about totally valid HTML5 code then you can safely omit the variable and PHP code altogether, it will not stop the page from working at all.

<txp:if_variable name="is_facebook" value="">
  <meta property="og:title" content="<txp:title no_widow='0' />"> 
  <meta property="og:description" content="<txp:excerpt />">
  <meta property="og:type" content="article">
  <meta property="og:image" content="<txp:site_url />images/style/site-logo.png">
  <meta property="og:url" content="<txp:site_url /><txp:page_url />">
  <meta property="og:site_name" content="<txp:site_name />">
  <meta property="fb:appid" content="{YOUR_FACEBOOK_APPLICATION_ID}">
</txp:if_variable>

Replace {YOUR_FACEBOOK_APPLICATION_ID} with your own unique Facebook app id.

Note on images: The example above uses a static site branded logo for the og:image meta, you could of course use any image, including a <txp:article_image /> tag. But for branding reasons you might prefer to use a universal logo for all your Facebook correspondence.

Note on excerpt: The example above populates the og:description meta using <txp:excerpt />. That relies on your setting the write page option for Excerpt Markup to ‘Convert linebreaks’ because we want to strip out the <p> tag from that excerpt – however that means you can’t use the excerpt elsewhere on your site without making sure you add <p> wraps onto it like so <p><txp:excerpt /></p>. There are a couple of other easy methods to handle excerpts instead:

1. Install the etz_striptags plugin and wrap the excerpt like so:

<meta property="og:description" content="<txp:etz_striptags><txp:excerpt /></txp:etz_striptags>">

or…

2. Set up a custom field with an example name of ‘meta_description’ and use that field for your page description instead of using excerpt:

<meta property="og:description" content="<txp:custom_field name='meta_description' />">

The bonus is you could also utilise either of the two methods above to populate your <meta name="description"> tag, for example:

<meta name="description" content="<txp:etz_striptags><txp:excerpt /></txp:etz_striptags>">

or…

<meta name="description" content="<txp:custom_field name='meta_description' />">

Now the prep work has been done, you can now move on to adding Facebook features to your page. Add the code from here on into the article form you use to display individual articles.

facebook ‘like’ button

The like button is now a hugely popular and recognised concept (whether we like it or not is highly debatable), here’s how to implement it…

<script>
  (function(){
  document.write('<p class="fblikethis"><fb:like href="<txp:permlink />" layout="button_count" width="100" show_faces="false"></fb:like></p>');
  var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
  s1.parentNode.insertBefore(s, s1);
  })();
</script>

You can add/change the attributes within the script (e.g. to add Facebook profile pictures) following this The implementation guide (attribute section).

facebook ‘send’ button

Facebook recently provided a send button. Using this button users can send details about the page to their friends. You may prefer to use this button if you feel the context of liking a page is not in keeping with the philosophy/tone of that page content.

<script>
  (function(){
  document.write('<p class="fbsendthis"><fb:send href="<txp:permlink />"></fb:send></p>');
  var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
  s1.parentNode.insertBefore(s, s1);
  })();
</script>

You can add/change the attributes within the script following this implementation guide (attribute section).

combined facebook ‘like’ and ‘send’ button

If you want both the above buttons together, use this code instead…

<script>
  (function(){
  document.write('<p class="fblikesendthis"><fb:like href="<txp:permlink />" layout="button_count" width="100" show_faces="false" send="true"></fb:like></p>');
  var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
  s1.parentNode.insertBefore(s, s1);
  })();
</script>

facebook comments

Textpattern has very robust in-built comment features, but you may want to supplant that with the Facebook comments system instead.

Very easy to implement using the JavaScript asynchronous method:

<script>
  (function(){
  document.write('<p class="fbcomments"><fb:comments href="<txp:permlink />" width="480" num_posts="20"></fb:comments></p>');
  var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
  s1.parentNode.insertBefore(s, s1);
  })();
</script>

You can add/change the attributes within the script following this implementation guide (attribute section).

You may wish to moderate Facebook comments, if so, add the following line to your meta_sharing form…

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}">

…or if you have lots of articles (recommended)…

<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}">

…the second method allows you to moderate all comments from within your developer app page instead of directly moderating each comment using your personal Facebook account.

other facebook plugins

Now that you should be familiar with the JavaScript functions above, you can easily use that method for adding any of the other Facebook social plugins to your Textpattern articles.

Just amend the FBML tags in the script to that of your chosen plugin (for example fb:live-stream for the Live Stream plugin) and amend the attributes following each plugin’s guide and you should be able to quickly implement any Facebook plugin.

bonus round: add a twitter ‘tweet’ button too!

You can use the concept above to also easily add a ‘Tweet’ button to your page, again it loads asynchronously so won’t delay your page from rendering and uses the Twitter JavaScript API.

Place the following code in your article form:

<script>
  (function(){
  document.write('<p class="tweetthis"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<txp:permlink />" data-count="horizontal" data-via="{YOUR_TWITTER_USER_ID}">Tweet</a></p>');
  var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'http://platform.twitter.com/widgets.js';
  s1.parentNode.insertBefore(s, s1);
  })();
</script>

Replace {YOUR_TWITTER_USER_ID} with your personal twitter account ID name. Done!

Now go and be sociable!

by Phil Wareham | 2 comments

print design

15 June 2011

honours at the Marketing Week Engage Awards

MarketingWeek Engage 2011 Awards

Our client, The Scotts Miracle-Gro Company, scooped third place in the ‘Instore’ category of the Marketing Week Engage Awards 2011, for the launch of their Miracle-Gro Patch Magic product – a project we were heavily involved in from the start. These awards celebrate the very best in UK nationwide marketing.

Only third, you may think? However, we were up against the big boys of the marketing world who have access to much larger budgets than we do. The winner in this category was Burger King, yet we beat the likes of Magnum Gold (Walls) and Tesco, Persil, Reebok, Sodastream and Vodafone, who were all shortlisted for the award.

Jane Hartley, Scotts’ Trade Marketing Manager, said of the award: “We were thoroughly thrilled to even be shortlisted for this prestigious award. To be recognised by the industry that we are doing a great job versus other big brands was a fantastic acknowledgement. Not winning was not a disappointment, in fact we were delighted to have seen off some huge national companies in a wide range of product categories. It’s fabulous that our great ideas for launching and promoting our products to garden centres and DIY stores are recognised by the whole marketing industry.”

by Richard Huxford | no comments

ideas

23 February 2011

We knit hard for the Innocent Big Knit

Innocent Big Knit - Hatmania!

Here are some of the hats members of our team created for the Innocent Big Knit 2010, which raised money for the Age UK Winter Warmer Campaign. Design Hive Ltd sent of 530 hats in total – with a lot of our hats knitted by the kind ladies of the St Mary’s Mother Teresa Group.

Innocent Big Knit - Selected Hats

Three of Rachel’s hats (including the phantom hugger above, top left) won Innocent’s ‘hat of the week’ competition too. Well done Rachel, you win a woolly hat!

by Phil Wareham | no comments

downloadables

20 February 2011

Hive admin theme for Textpattern CMS

In the spirit of sharing (and cos’ we’re nice), we have decided to release our ‘Hive’ admin-side theme for the Textpattern CMS (v4.3.0 or greater) as a download. This is the same theme we use on all our commercial website builds, and on this very site.

This theme has been tested within a limited commercial setting with no reported problems (and we’ve tested internally with Chrome 10, Safari 5, Firefox 4, Opera 11 and Internet Explorer 9) but there may be a few bugs that slipped through the testing net, especially in older less capable browsers (AKA IE7 and IE8).

If you spot any glitches or have any suggestions on how we might improve the theme then please feel free to leave a comment and they will be investigated in due course (and hopefully fixed in a future release of the theme).

Download: Hive Admin Theme v1.2.3
Size: 39.09kB | Last modified: 24 June 2011 | Downloads: 383

notable features

Clean, simple yet functional design.
Semi-liquid layout adjusts to larger/thinner screen widths (down to 768px).
Monospaced font for all text input fields, since it’s much easier to spot typos/formating (sic!) errors in a monospaced font.
Minimal use of images – keeps the theme lightweight and fast.
An extra ‘custom.css’ CSS file where any styling specific to popular Textpattern plugins (that don’t follow the standard Textpattern layout structure) can be stored. This will be updated periodically with fixes for any popular plugins that currently look hideous in the theme, and can be fixed via CSS.
Also within the ‘custom.css’ file, there are commented out lines which can be used to easily hide any sections of the write/edit screen that are not used in a particular project. See this forum post for details on why that’s good.
Update v1.1: you can now choose between different colourschemes, simply amend the URL line 7 of ‘custom.css’ to point at one of the provided schemes.
Update v1.2: now fully compatible with iPad (and probably Android tablets too).

installation instructions

Download the latest version of the theme from the link below.
Unzip the archive.
Upload the directory ‘hive’ into your Textpattern installation -> theme directory.
Log in to your Textpattern admin area. Navigate to admin -> preferences -> advanced.
Select ‘Hive’ from the ‘Admin-side theme’ dropdown list. Save the preferences.
Log out and then log in again – you should now be using the Hive theme.

one last thing

In this theme, the 3 preview tabs on article write/article edit forms have been removed to save screen estate. They were arguable pretty useless anyway so they were dropped, we have never used them in all our time with Textpattern.

If you really do want to enable these tabs again then comment out the following line near the middle of the theme’s ‘textpattern.css’ file (you’ll have to add some custom styling to them though)…

#article-tabs {display: none;}

We hope you find the theme useful in your projects and continue to find success using the wonderful Textpattern CMS.

by Phil Wareham | 11 comments

← older articles → newer articles 1 2