Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
6th March 2012

GO FOR IT – Part 2, Facebook

Get social and integrate the hottest networking services into your web-design projects, with a special look at Google+, Facebook and Twitter

GO FOR IT – Part 2, Facebook

This feature originally appeared in Web Designer issue 190, authored by Matt Gifford and Pete Simmons

Download the full code examples associated with this feature.

With over 30,000,000 Facebook users in the UK alone, it’s never been more important to ensure your website utilises as many Facebook platform features as possible. In this section we’ll be showing you how to implement various Facebook elements into your website, from Like buttons to full-blown login systems.

What is the Graph?

Facebook Graph is essentially the raw data that makes up Facebook. It’s in a JSON format and requires some level of authentication to get personal data about a user. Once you are authenticated you can then use the Graph’s data to populate information on your own website. Doing so is quite advanced in the spectrum of what can be done with the Facebook platform, and we’ll cover this in more detail later. In the meantime, we’ll look at using tools that Facebook provides to add social features to your website. Let’s kick off by looking at the simple Like button.

GO FOR IT – Part 2, Facebook

The Like button

Facebook Like buttons have become almost as commonplace as images and text, and are the easiest way to share a piece of content from your website, with a visitor’s Facebook friends. It’s extremely flexible as you can apply the Like button to individual pieces of content – for example, a single blog entry – or you can apply the Like button to your entire website.
Facebook has put together a set of tools that enable you to quickly generate the code needed to implement Facebook features into your website.
Now that you have an App ID, navigate to http://tinyurl.com/likeplugin. On this page you will be presented with a step-by-step guide on how to generate the code needed for a Facebook Like button. There is a certain level of customisation available, but beyond that you enter the realms of CSS hacks and additional code libraries. Input your website’s URL into the URL to Like box, customise the button as you see fit, then, when you’re done, hit Get Code.
A box will pop up and give you the code you need to input your website source code. Notice that you can select both HTML5 and XBML now that we have a valid App ID. Ensure that your newly created app is selected from the drop-down menu on this popup.
The next step is to add the code snippet from earlier into your page; this can go anywhere you like, but for the purpose of this example we will add it directly after the JavaScript SDK code.

001<div class=”fb-like” data-href=”YOUR_URL” data-send=”true” data-width=”450” data-show-faces=”true”></div>

Depending on which options you selected, the code snippet may look different. Run this code in a browser to see the results. The advantage of using the HTML5 framework is that users will be presented with a comment box once they press Like, enabling them to add a personal touch to their Like, at no extra coding cost. You will also notice that this example features a Send button. The difference between Send and Like is that a user is able to select individual Facebook friends to share content with, instead of simply posting it universally on his or her wall.

Implementing Like buttons on individual pieces of content

So now we have covered adding a Like button to your entire website for a single URL, we’ll look into adding this feature for individual site elements. This is useful if you run a blog, and want users to be able to share individual blog posts rather than your whole site.
Depending on which blog service you use, there are a host of open-source plug-ins that enable this feature; a Google search will point you in the right direction. If you hard code your blog then simply change your second code snippet from the previous example, to the following:

001 <div class=”fb-like” data-href=”<?= $_SERVER[‘HTTP_HOST’] . $_SERVER[‘PHP_SELF’] . $_SERVER[‘QUERY_STRING’]; ?>” data-send=”true” data-width=”450” data-show-faces=”true”></div>

Make sure you save this page out as a PHP file, rather than HTML. What this does is take the current page address and adds it into the FB Like code snippet; run this page and view source to see it in action. If you don’t want to change your page to PHP, you could use the JS window.location function.

Comments

Following on from the previous example, we can easily add a Facebook comments box to our website with the following code snippet:

001 <div data-href=”YOUR_URL” data-num-posts=”2″ data-width=”500″></div>

You will need to keep the Facebook JS snippet in the top of your page for this to work, but this code can be placed in your source code, at the position in which you wish it to appear. You will also need to replace YOUR_URL with the URL of the content being commented on; this can also be made dynamic with the PHP $_SERVER code from before.

GO FOR IT – Part 2, Facebook

Pages: 1 2

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.