Unless you’ve been hiding in a cave for the last five years, you’ll know social bookmarking is the way forward for online marketing. By adding Facebook Like, Tweet This or Google +1 buttons to your website, you can increase visitors to your website with very little work. It’s free, extremely effective and very easy to setup.
However, I’ve been speaking to quite a few people recently who struggle to understand the fundamentals of online marketing and getting the basics on their website.
On a recent project, I was keen to include the three main players in the social marketing arena in a consistent format. You are often supplied with a variety of choices to get the buttons on your website but very few look similar apart from the “large” buttons (normally vertically stacked with a count of clicks above the button).
By way of sharing my findings, I thought it may be useful to others who are also keen to standardise the appearance of their social sharing buttons as well with the following code (just replace yourwebsite.com with your website address – obviously).
Facebook Like
<iframe src="https://www.facebook.com/plugins/like.php?app_id=145583522190869&href=http%3A%2F%2Fwww.yourwebsite.com&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:90px;" allowTransparency="true"></iframe>
(Source)
Tweet This
<a href="http://twitter.com/share" data-url="http://www.yourwebsite.com" data-count="vertical" data-via="yourusername">Tweet</a> <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
(Source)
Google +1
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" callback="http://www.yourwebsite.com/"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
(Source)
★ Consistent Facebook, Google and Twitter buttons http://t.co/np1jC5w (via @si) Handy, nice one!
That man @si shows you how to do consistent Facebook, Google and Twitter buttons: http://jobl.in/p9
Great resource, Si. I’ve just used this as a reference to add these social buttons to my blog (long overdue!) Thanks 😉
It’s nice to see others using them. Placement works well on The Web Design Blog too. Just a shame that Twitter count is a few pixels too tall.
Nothing shouts ‘I’m desperate for page views’ like adding as many social media buttons to your website; constantly sized or not. These cheapen the web (and your website) in my view. I long for the day these horrible turds fall out of fashion.
Rant over.
It’s a fair point Paul. Nothing looks worse than visiting a website to see single/double digit “likes” on a social network. That said, many clients are keen to exploit the power of social marketing so, where possible, as designers we need to comply in the most tasteful way possible.
Agreed it is only a trend – in several years time, I’d be amazed if all three of these still exist – but the Web is built on trends. It’s just a matter of time before the next über-cool concept comes along that requires some unwanted attention from the world’s web designers.
Exactly where is the facebook like button ?
Totally agree with Paul and Ci. Someday all these “social misunderstandings” will fall apart from inside.
Hopefully soon.