How to implement Facebook Connect on a PHP website

With 250 million users worldwide, Facebook can’t be ignored. If you have a website where users can log on to, Facebook Connect can help getting your usage numbers increased. Facebook Connect allows for an easy way for users to log on to your site.

A simple Facebook Connect button button will allow the user to log on to your site with their Facebook credentials. They don’t have to register, choose and remember a password, click on a confirm link, … The advantages seem to be clear.

Adding Facebook Connect to your website is not that hard, as a lot of information can be found at http://developers.facebook.com/connect.php. But there are some missing pieces to make it really easy if you have a website running PHP. So let me try to fill in the gaps.

The main steps can be found at http://wiki.developers.facebook.com/index.php/Connect/Setting_Up_Your_Site:

  1. Create an application with the Facebook Developer application. This will provide you with an Facebook Platform API key.
    Follow steps 1-9 and note your public API key and a secret code.
  2. Download the Facebook PHP Client Library from http://wiki.developers.facebook.com/index.php/PHP.
  3. Upload all files in the /php folder to a folder on your webserver:
    • facebookapi_php5_restlib.php, facebook.php, facebook_desktop.php
    • all files in the /php/jsonwrapper subfolder

To use the API in your php-pages, you need to create a new Facebook object with your public AND secret API key:

require_once("../functions/facebook.php");
$facebook = new Facebook('public_key','secret_code');
$fbid = $facebook->user;

$facebook->user is the facebook userid. If this is empty, the user has not yet logged in. You can get show a Facebook login button by using some XFBML-code:

if (!$fbid)
  { ?>
    <p>Log in with your facebook-account:
    <fb:login-button onlogin='window.location="redirect-page";'>
    </fb:login-button>
    </p>
   <? }

For this to work, you need to set up your site. Follow steps 1-5 for the XFBML code to work.

If the facebook userid is not empty, you can get information about the user with the users_getInfo method:

else
  {
    $user_details = $facebook->api_client->users_getInfo($fbid, 'first_name,
pic_square');
    if ( isset($user_details) )
      { ?>
	<p><? if ( $user_details[0]['pic_square'] != '' )
               { ?>
                 <img src="<?=$user_details[0]['pic_square']?>" />
            <? } ?>
           Hello <?=$user_details[0]['first_name']?>, you are logged on
via Facebook.</p>
           <p><a href="#"
onclick="FB.Connect.logoutAndRedirect('/connect/logged_out.php')">log out</a></p>
    <? }
  }

JavaScript uses url-encoded UTF-8 strings to perform Ajax POSTs

Today, I had an encoding issue with a website I was working on. I had a

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

tag in the <head>-section, to ensure the page would correctly display and interpret all characters, including accented ones, like à and é.

The page was an administration page, to update texts on a website. Everything worked fine when I used standard <form> and <input>-tags, but I wanted to use Ajax to save any changes – to avoid a full page reload when something simple as a title had to be modified – things started to go wrong.

I used the spectacular jQuery library to do that, using a $.post-statement. At first sight, this seemed to be working fine, until I used some accented characters. When I entered “Soirée Théâtre” as title, the characters “Soirée Théâtre” were stored in the database.

I first thought it was an issue similar to the Bulgarian character set issue in mySQL I encountered a few months ago. But I was just using French in this case, so iso-8859-1 and mySQL character set “latin1_swedish_ci” should suffice in this case.

After some googling, I found this website, that explained that in the case of Ajax POSTs, “JavaScript serializes all the fields and it always uses url-encoded UTF-8 strings for this”. A simple utf8_decode in the PHP program that received the Ajax post-statement solved my issue.

UFT-8 on a website based on mySQL and PHP

I spent quite some time today trying to get the text on a website with Bulgarian characters to show properly. The text is coming out of a MYSQL 5.0 database, configured to use utf8_general_ci and the website is generated by PHP 5.2.5.
I knew I had to use
meta equiv=”Content-Type” content=”text/html; charset=utf-8″
to display the Bulgarian characters properly (like Велико Търново) and that worked fine for static text, but I got ???????? when using the text from the database.
I tried all sorts of things, and visited various websites with proposed solution, but finally I got it working by one simple setting, explained by this website. I needed to include
mysql_query(‘SET NAMES utf8’);
when connecting to the database. That solved the issue.