archives

Posts tagged Blog design

This is the first in a series of posts on major advances this year which have impacted the way we design blogs for our clients and where we see things are heading in the future.

Facebook’s “Like” button and its other social plugins

In April, Facebook launched its set of social plugins, with the like button popping up on over 50,000 websites in less than a week after launch.

Here are the three main ways people are using the social plugins on their blogs:

Like Button

The like button is usually just placed on individual blog posts. This serves multiple purposes, the most obvious being that when someone clicks the like button, it’s recorded on their wall and their friends’ news feed with as link back to the blog post giving the blog an opportunity to gain more traffic. It also serves as a useful popularity measure when scanning through blog posts – a visitor may be more likely to stop and read a post, or click from an excerpt to the full post if they see lots of “likes”.

Unfortunately there is not yet a social plugin to show the most popular posts on a blog, but this has been heavily requested. Once it’s available, it will be a widget many blog owners will be looking to add.

One side effect of adding the like button is that it is reducing the number of comments on blogs. It’s great at eliminating repetitive comments thanking the author for the post and providing aggregated feedback to the author, filtering the comments down to ones which are ideally more substantial and engaging visitors who would never have filled in a comment form. However, it can be less meaningful or personal to for the author to not receive thoughtful feedback and just a sterile number of likes to deal with. Facebook has provided an option for adding comments as to why they like it but most sites aren’t using this.

One of the biggest issues with the like button is the fact that it is provided in a fixed-width iframe. The most common type of like button used is the button_count option, which just shows the like button and the number of likes beside it. However, this has substantial design restrictions. For example, this version of the like button cannot be right-aligned; if you try to put the button at the top right of your post, the extra horizontal space added for the number of likes makes it look very bad, especially when ’0′ likes doesn’t even display at all.

The same spacing issues crop up when trying to have a row of sharing options – it is virtually impossible to have a tweet button and like button side by side without the design looking very messy due to the extra blank space required by the iframes.

Like box

The like box is usually placed in a blog’s sidebar and set to not show the stream (you are already on the blog, so showing the latest posts isn’t needed). The Like box enables visitors to show their interest in the blog and let their friends know at the same time, helping to increase traffic. Just as importantly, it will add the Facebook page updates to their news feed, potentially gaining visitors back to the blog time and time again – especially if blog posts are automatically added to the Facebook page. Your blog will also appear in the “activities and interests” section of the user’s Facebook profile.

Further, when doing a search within Facebook for a topic or company, a “like” is a major factor in the search results algorithm. As more people use Facebook to conduct their searches, having lots of “likes” will be vital SEO.

Share

Facebook share has been around longer and is now being discouraged by Facebook, but is still important and different from the like button. Share requires a little bit more effort on the part of the visitor as it’s not just one click but means that a little excerpt and picture from the blog is added to their wall and their friends’ news feed. Blog owners can optimize their code using Facebook’s Open Graph to automatically pick a good image to display (instead of an ad, for example), increasing the chances someone will click through to the blog post.

Syndicating to Facebook

While RSS readers aren’t going away, RSS is now being used more to syndicate blog posts to Facebook, Twitter or email. Surprisingly, it seems difficult to find out how to syndicate blog posts to Facebook, and since Facebook changes so rapidly, blog posts on how to do this are quickly out of date and confusing for newcomers.

One of the easiest methods of getting blog posts automatically pushed through to your blog/company Facebook page is by using Facebook notes:

  1. Log into Facebook
  2. Go to http://www.facebook.com/pages/manage/
  3. Click on “edit page” for the page you wish to link to your blog
  4. Click on “applications” in the left hand menu
  5. Click on “go to application” below Notes
  6. Click on “Edit import settings” in the left hand menu
  7. Enter your blog’s website address (or the feed address), check the permissions box and click “Start importing”

If you wish to encourage visitors come over to your blog, set your feed to be an excerpt, rather than the full post, or create a special feed just for Facebook to use. There are some potentially major disadvantages to this method:

  1. Facebook only checks your feed every 2-3 hours so posts are delayed before showing up.
  2. A user has to click twice to get to your blog – once to view the note and then again to jump to your site, losing visitors along the way.
  3. You’re unable to edit notes imported in this way, only delete them. If you update your blog post, it’s not reflected in Facebook.
  4. Comments on notes don’t show up on your blog.

A popular alternative which has none of the above disadvantages is to use a WordPress plugin called Wordbook. One disadvantage of this plugin is that it currently posts all blog posts to Facebook, not just ones you select. With Facebook notes, you can select which posts you want to import into Facebook by making a blog category for your Facebook posts and using this feed in Facebook.

Other plugins are available (for example, Simple Facebook Connect, as well as plugins for other content management systems). These all involve setting up a Facebook Developer Application, which tends towards being too complicated for an everyday blog user to set up – especially when a large majority of instructions found by searching are outdated. Setting these up for a client isn’t particular easy either – you either need to log into Facebook as the client yourself (often involving getting through numerous security checks due to logging in from a different country), or invite the client to be your friend on facebook before you can grant them admin access to the application.

If you have multiple blogs you’d like to import automatically into Facebook, you will need to use a tool such as Yahoo! Pipes to mix the feeds together first.

Facebook SEO

As more people use Facebook to conduct their searches, optimizing blog meta tags for Facebook using the Open Graph will be an important part of SEO practice. Get in early with this strategy and you won’t have to force Facebook to re-scrape your page or have popular blog posts’ meta data locked down in Facebook and unable to be updated.

As mentioned above, when doing a search within Facebook for a topic or company, a “like” is a major factor in the search results algorithm. As more people use Facebook to conduct their searches, having lots of “likes” for your blog or company page will be vital SEO.

Footnotes

Not too long ago, clients would come to us asking for a “Web 2.0″ blog. Now the requests are always about being “Facebook/Twitter integrated” or “social media enabled”.

Redesign Helaine Smith's business website and blog, along with adding in a forum.
Redesign Rechelle's personal - and very quirky - blog.
Business site with galleries built on Wordpress.
Design and develop a new community website for women bloggers.
Complete redesign of popular Drupal-based site, DIY Photography.
"I hired the cre8d design design team for a complete site redesign job for DIYPhotography.net (a Drupal based site). Working with Stephen and Rachel on the project was a fun experience and produced outstanding results. The Cre8d team communicated well to accommodate my requirements accepting changes on the go, making me feel that my site is a top priority to them. I found out that the team is not keeping to design in the strictest sense and assisted with module installation, Drupal questions and even did a bit of coding. In short, cre8d rocks!"

It’s been a year since my guest post on Mashable on 10 Ways Twitter will Change Blog Design in 2009.

Looking back, I was actually pretty spot-on with them all!  Twitter has of course since added lists, which I referred to as TwitterRolls.  The integration of blog and twitter comments, Tweetbacks, was picked up on rapidly by WordPress plugin developers and external tools such as Disqus have taken this a step further, making it easy to use your preferred social networking login when commenting on a blog and even better, pulling in dispersed reactions to your blog posts on other social networking sites.  Twitter has indeed moved right to the top of the ShareThis! tool and many bloggers have ditched general sharing tools for just TweetThis and FacebookThis.  TweetMeme has made tweet stats front and centre of many blogs.  Most bloggers now have some sort of Twitter widget on their site.

So where to next?  Here’s 4* more ways Twitter will continue to change blog designs in 2010:

  1. Stop Subscribing, Start Following
    My hunch is that more bloggers will ditch promoting their RSS feed (besides, browsers do a pretty good job of alerting you to them – if you’re a feed reader sort of person).  They’ll focus on getting people to follow their tweets or subscribe to their blog via email.  Of course feeds are still the glue which automatically tweets your latest blog posts and is often used to create the newsletters. Likewise, the number of followers will be more promoted than the number of subscribers.  Facebook’s “Become a fan” popular widget which shows avatars of Facebook fans of the blog and highlighting your own friends will be rivaled by similar ones for Twitter.  (Google’s friend connect widget is another such example.)
  2. Most Tweeted Widgets
    A widget for bloggers to show their own most-tweeted posts of all time (or some other time period).  TweetMeme told me last year that it was in the works but I haven’t yet heard back about the status of this. I’m surprised there aren’t more twitter analytics packages in use on blogs.
  3. Latest Tweet focus
    More will become a part of a blog’s introduction or header area.  Originally tweets were relegated to blog sidebars, then integrated into the content column.  Just the latest tweet will be displayed, rather than multiple tweets. Maxvoltar is one example of this.
  4. Bye Bye Gravatar, Hello the new Gravatar
    Twitter and Facebook avatars will become the de-facto official avatar online, instead of Gravatar.  More blogs will use Twitter and Facebook integrated login systems for their commenters (or switch to a system like Disqus).  As people regularly change their Facebook (and less so, Twitter) avatars, these will be more relevant to display than a hardly-ever-updated Gravatar.

* Because why make a list with a “nice” number if it just means trying to fill a list ;)

Elsewhere: Skype MSN Messenger Twitter Facebook