Facebook’s founder Mark Zuckerberg revealed some exciting new upgrades to Facebook Platform last Wednesday at f8. I attended the London Facebook Developer Garage with friends @OliverWaters and @JoshuaBaker and watched ’Zuck’ spill the beans in San Francisco via a live stream. Facebook have created easy to use ‘Social Plugins’ for developers to use across the web. These social plugins allow anyone the ability to add a ‘Like’ button to any webpage on the web. The beauty of the ‘Like’ or ‘Recommend’ button is that for anyone that is already logged into Facebook, your website no longer requires ‘Facebook Connect’ to log them into your site. Adding this new ’social plugin’ will encourage sharing on your website, therefore increasing traffic and engagement via Facebook. Please note: This tutorial teaches you how to embed a single ‘Like’ button.
1. Firstly, click here to go to:
http://developers.facebook.com/docs/reference/plugins/like
2. Style your ‘Like’ button.
Using the form pictured right, add your URL of your webpage. The layout style option allows you to keep it simple (as pictured) or standard with “15 people have liked this”. Faces of those people that ‘like’ can be revealed / unrevealed if 2 logged in users that are friends have both ‘liked’ the page. Choose the width of the Like button in pixels. You can also change the word ‘Like’ to ‘Recommend’ – As seen in the bottom footer of my site. Choose a font family and then choose an appropriate colour scheme. ‘Dark’ and ‘Evil’ are more suited to dark or colourful backgrounds. Once you’re happy, click ‘Get Code‘.
3. Embed the code.
It’s now just of case of copying and pasting the Like button code into your website / blog. Beginners, I recommend using the iframe code unless you understand Javascript SDK. Hope you all ‘Like‘ this post. I will be revealing how to add Like buttons to all your pages and posts next week.
If you enjoyed this post, make sure you subscribe to my RSS feed!
Recent Posts
- 4:21 pm • How to Add a Facebook ‘Like’ button to your website
- 6:18 am • Will Facebook become a Bank?
- 6:46 pm • How to Buy an Affordable Domain Name and Web Hosting
- 8:31 pm • A Revolutionary Twitter Tool Revealed: Tweetspinner
- 1:13 pm • How to Add a Google ‘Buzz This’ Button to your Blog
- 7:26 am • How to Add an RSS Feed to a Facebook Fan Page
Recommendations:
Not loving the entire lack of control… Would like the button to align to the right of the iframe…
I can see your point Rob however, when you embed the code on ’simple’ styling you can add ‘< p class="alignright" >‘ in front of the iframe code and also change the pixel dimensions around the button to 52px(w) by 22px(h). Once you’ve altered these parameters, it will position the button to the right of your body text and position other objects and text around it quite nicely. Does this help?
Love the concept of the FB like button. Alas, with javascript, only Wordpress.org blogs can use this. Yet another good reasonn to move to Wordpress.org from Wordpress.com.
Thanks for posting such clear instructions!
Thanks Nancy – I agree completely. Great work on your blog too.
If anyone is need of starting their own self hosted blog, click here for a tutorial I wrote a while back.
Anybody figure out how to move the button exactly where you want it.
Hi Dillon – I am currently working on a plugin to make this easy for everyone.
Hi Max,
Stumbled in here looking to try and work out how I can put the button where I want it, looks like others wanted to do the same. Any luck with working out how it’s done?
Good post,
Scott
There’s a small box do add custom CSS to align the button left or right or edit the margins. If you need help, fell free to send me a mail at hello@maxrichardson.com – Thanks guys.