Blog design bit bbc mashable

October 16, 2013 in Blog Design Bits, Web Design Bits

Blog Design Bits: How BBC & Mashable Do Social Media Sharing


A collection of blog design bits that showcase the different approaches the BBC and Mashable have taken in their social media sharing.

BBC Homepage

The BBC’s homepage is based around a large content slider, with literally no social media profiles or sharing buttons in sight. Have the BBC gone Stalin!, dictating our sharing? Well, yes; I expect the BBC know that their visitor ship is here for their news content, and at this stage, are not ready to share.

It’s interesting to note that the BBC homepage does not show what readers are sharing the most, instead – the hierarchy and size of the news posts sets the importance level to the reader.

BBC Homepage

BBC Single Post page

Once you’ve clicked on a news piece and arrive at a single post page the BBC offer a quaint placement of social sharing buttons, a simple row of small icons atop and below the news post.

BBC Social Share Icons

They have 3 main icons in each space; 1.Share This, 2.Facebook, 3.Twitter.

Interestingly the ‘Share” isn’t the typical “Share This” widget you’d normally get from the official Sharethis.com service, it seems the BBC have used the iconology of the green badge with connected node icons and the word “Share” alone.  Click on the Share icon and a box pops up with more social media icons, just like the original Share This service. Obviously, the BBC feel the iconology of the Share This mark is a worthy convention, even for a website of this size.

Mashable Homepage

The Mashable homepage has more shares than a 90’s web start-up. The big blue header houses a row of social media icons (1.Facebook, 2.twitter, 3.Google+) that when hovered over pops up with a large bar with their social media icons, leading to their social network profiles.

Mashable homepage

Mashable know their audience is technical and have designed their social media to be plentiful. You wont find any social media icons further down the homepage though – as Mashable use one of those ‘bottomless glass’ type of content scrolling systems that just keeps popping up with content forever and ever.

Mashable news post

The Mashable homepage is split into three columns of news posts; The New Stuff, The Next Big Thing, and Whats Hot. Each news item has it’s overall shares displayed. If you hover over the latest news post in the Whats Hot column the shares area becomes  a list of social media sharing icons.

They have 6 icons: 1.Facebook, 2. Twitter, 3.Google+, 4.LinkedIn, with each icon displaying the number of individual network shares.

Mashable Single Post Page

Once you’ve clicked on a news post and arrive at a single  post page,  Mashable slap you across the head with a wet haddock full of social.

Mashable single news

This layout has more icons than an Xfactor contestant. We start with a giant overall social share number positioned at eye level (top, left), followed by a large row of social media icons, with the bubbles displaying the different social networks share numbers.

Then follows a line graph, yep, I said that, a line graph. Mashable know how to appeal to their technical audience, it turns out it’s the Mashable Velocity Graph, it shows how quickly people are sharing this news post, it’s technical and geeky, I love it. Though I do feel it’s too abstract and holds no value or clarity of data, a thermometer or speed dial may get across this data with more clarity.

Then to the the right theres a row of social media profile links: 1.Facebook, 2.Twitter, 3. Google+ – just in case your convinced to Like Mashable now you’ve read their content.

Mashable have taken note of how we all love sharing photos, they have a row of social media icons appear when you hover over an image.


About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

Leave a Reply