3DN Technology » coding

Playing with Simple Facebook Connect

Fred Leeflang — Thu, 16 Jun 2011 22:23:19 +0000

As a brief note to myself and other who may experience the same problem: I use the “Simple Facebook Connect (SFC)” WordPress plugin on my site. It’s a very nice modularly written plugin but that’s all described very well on the site. My note is about using this plugin on a WordPress instance running multiple domains however.

While adding ‘like’ buttons to my second domain on the server, I noticed I started getting error message from Facebook saying:

The app ID specified within the “fb:app_id” meta tag is not allowed on this domain. You must setup the Connect Base Domains for your app to be a prefix of http://dutchie.org/rowan-lore/.

Further investigation showed that the

As http://dutchie.org is really running on http://dutchie.3dn.nl but mapped on there with the domain mapping plugin, I figured I’d change the href parameter into http://dutchie.3dn.nl/rowan-lore. This can be done through a bit of an undocumented feature in SFC. I modify the theme files directly through putting an sfc_like() call in the theme file. When used without arguments, the sfc_like() function will generate the URL based on the get_permalink() WordPress API call. However, noticing the function also parses a $args parameter when provided, I decided to do:

$url = urlencode(str_replace('dutchie.org ', 'dutchie.3dn.nl ', get_permalink($id))); sfc_like_button(array('url' => $url));

While of course this little trick is handy to know and resulted in the desired effect, the error message remains.

I’ve also been looking into the FBML tags being put in the header:

And manually tried to force sfc-base.php to generate dutchie.3dn.nl instead of dutchie.org in the og:url field. Alas, this also did not work. Otto, the developer of SFC assured me that there is no way of adding a second domain to a single FB application, but I’m still curious about this as http://dutchie.org is a second domain on the server indeed, but it’s *mapped* to http://dutchie.3dn.nl which is a subdomain of the facebook app.

Facebook Bookmarks for Chrome?

Fred Leeflang — Thu, 19 May 2011 09:15:35 +0000

I visit Facebook quite frequently, post a lot of stuff, and I always find myself wondering ‘hmmm, I posted something about this and that a month or so ago’.

Searching through your own posts on Facebook is a nightmare!

I’m pretty curious if anybody else would be interested in seeing a Chrome plugin that lets you add your own facebook links to your Chrome bookmarks for much easier reference. Like this article if you do and don’t hesitate sharing the idea as I’m just really curious if anybody would even use it.

Add Ajax to Expertise Plugin

Fred Leeflang — Sun, 28 Feb 2010 08:43:32 +0000

The Expertise plugin is nearing completion now. We still need to give experts a method to sign up as experts for the 3DN expertise areas (or to sign out should they no longer want to act as expert). We will be using some WordPress specific Ajax constructs for this.

One of the reasons we would like users to sign up and be logged in when they look at the expertise pages is so we can see right away if somebody who’s visiting the pages is an expert himself or not. This way we can decide what button to show and what action to attach to the button. We have two different buttons to choose from:

These are opt-in / opt-out buttons where a visitor can indicate whether he is or isn’t an expert on the expertise being viewed.

These buttons have a simple onclick javascript that gets executed when the user clicks on them; when the opt-in button is clicked a simple thickbox dialog asking for the user’s expertise level is displayed while the opt-out button simply shows an ‘are you sure’ question. In this article I’ll assume the reader is familiar with thicbox and how to pop-up a dialog.

Using SACK

SACK is the Simple Ajax Code Kit. We don’t want clicking the button on the popup dialog to cause a reload of the whole page so we’re using SACK to send an asynchronous page request to the server to handle the opt-in / opt-out.

To do this, we first need to tell WordPress to include the SACK library javascript:

// Add SACK requirement to head
add_action ('wp_head', 'expertise_js_header');

function expertise_js_header () {
 wp_print_scripts ( array ('sack') );

The only thing somewhat complicated for using SACK is that we need to figure out what page to post the AJAX requests to; WordPress comes with a /wp-admin/admin-ajax.php script for this. It’s a unified Ajax handler script that can be used for all AJAX requests. We only need to tell it about a callback function to use depending on which action the page receives. First we define our own actions, handle_signup and handle_signout:

// Configure AJAX callback
add_action ('wp_ajax_handle_signup', "signup_callback");
add_action ('wp_ajax_nopriv_handle_signup', "signup_callback");
add_action ('wp_ajax_handle_signout', "signout_callback");
add_action ('wp_ajax_nopriv_handle_signout', "signout_callback");

Then in our button javascript we use these action names in the SACK initialization:

// Define custom Javascript function
?>


Playing with Simple Facebook Connect   
New 3DN Techblog   
Add Ajax to Expertise Plugin   
Checking Comments for Requests   
Adding sendmail/SMTP to experts plugin   
Or in the Coding category:
Playing with Simple Facebook Connect   
Facebook Bookmarks for Chrome?   
Add Ajax to Expertise Plugin   
Checking Comments for Requests   
Adding sendmail/SMTP to experts plugin   
If you have any questions regarding WordPress, check out our         Wordpress page or our         Programming page. Note: The code I’m writing about is constantly under development. I can’t write about every little change I make but I try. I’m learning as I go because this is my first WordPress plugin. If you’re interested in the latest code you can always look in SVN through my public Trac server.

Periodic Expertise Events

Fred Leeflang — Tue, 16 Feb 2010 12:37:21 +0000

Earlier I wrote a few articles on creating the expertise plugin and how to add shortcodes to it. Today I want to add scheduled events to the plugin. When somebody posts a question to the expertise page, we could probably write a trigger that checks immediately who’s the expert for the section and send a notice in an email. However, I think it’s also nice to illustrate making a timed even that will check all expertise pages at once for new messages and send out all notifications right away.

Activation Code

One thing we have not yet added to the plugin is a decent activation/deactivation section. We should do this first, we’ll see why later on. In WordPress, a plugin can be activated and deactivated through the administrative plugin menu. These events can be trapped with the register_activation_hook() and register_deactivation_hook() functions. Typically these hooks get used to create extra database tables needed by a plugin, set default values for the plugin etc.

Another thing that can be done in an activation/deactivation section for a plugin is to create / remove a timed event for the plugin:

register_activation_hook(__FILE__, 'expert_activate');
add_action ('expert_msgcheck', 'hourly_msgcheck');

register_deactivation_hook(__FILE__, 'expert_deactivate');

function expert_activate () {
 wp_schedule_event(time(), 'hourly', 'expert_msgcheck');
}

function expert_deactivate () {
 wp_clear_scheduled_hook('expert_msgcheck');
}

function hourly_msgcheck () {
}

The above code snippet sets this all up; The add_action() call at first seems kind of pointless here as there’s no point in time where the WordPress core will execute this action. This all changed when an administrator chooses to activate the Expertise plugin. Through the register_activation_hook function expert_activate() will be called. This function in turn calls wp_schedule_event() which schedules the action expert_msgcheck (and thus the function hourly_msgcheck()) to be executed hourly, starting immediately.

Work with Me

Let’s add some code to the hourly_msgcheck() function. We know that we want it to send email eventually, so to check if the mechanism works we’ll simply let the function send us an email every hour. On my setup I need to use an SMTP mailer as I’m using Google Apps for email. This requires some settings we might as well initialize on activation of the plugin:

function expert_activate () {
 wp_schedule_event(time(), 'hourly', 'expert_msgcheck');
 add_option('expert_settings', array(
 'onpost' => 1,
 'smtp_user' => '',
 'smtp_password' => '',
 'smtp_server' => 'smtp.gmail.com'));
}

function expert_deactivate () {
 wp_clear_scheduled_hook('expert_msgcheck');
 unregister_setting('experts-settings-group', 'expert_settings');
 delete_option('expert_settings');
}

I’ve changed my earlier approach here from a variable expert_onpost to adding all related options into an array. Just learning as I go, and reading over Handling Plugins Options in WordPress 2.8 with register_setting() many times to see if I could figure out what’s going on there.

Remember we used the new API’s register_setting() call in a previous article? Well that’s still compatible with add_option() so it’s safe to set default values for the options with this. I have included the deactivation code though, just to show that you still need to use delete_option() as unregister_setting() does not take care of this for you.

I also added a parameter validation function:

register_setting( 'experts-settings-group', 'expert_settings','expert_onpost_validate');

function expert_onpost_validate ($input) {
 // Our first value is either 0 or 1
 $input['onpost'] = ($input['onpost'] == 1 ? 1 : 0);
 return $input;
}

This simply checks whether the variable onpost is actually a boolean. I haven’t included any validation checks on the other variables yet.

So with the registered variables in place it becomes really very easy to do the actual form building / handling:

function expert_settings_page() {
?>

Experts

 
 
 
 
 On Post in Expertise Section
 
  /> Do Nothing  /> Send Email
 
 
 
 SMTP username
 
 
 
 
 
 SMTP password
 
 
 
 
 
 SMTP server

Notice that there is no form handling in the plugin itself anymore! That’s all done by WordPress itself.

So now that we can actually set some required options, let’s add this send_email() function:

function send_email () {
 // PHP Mailer Variables
 if (!class_exists("phpmailer")) {
 require_once(ABSPATH.'wp-includes/class-phpmailer.php');
 }
 $expert_settings = get_option("expert_settings");
 $mail = new PHPMailer();
 $mail->Mailer   = "smtp";
 $mail->Username = $expert_settings['smtp_user'];
 $mail->Password = $expert_settings['smtp_password'];
 $mail->Host     = $expert_settings['smtp_server']
 $mail->SMTPSecurity = "tls";
 $mail->Post     = 465;
 $mail->SMTPAuth = true;
 $mail->CharSet  = "utf-8";
 $mail->Encoding = "quoted-printable";
 $mail->FromName = "3DN Techblog <3dn@3dn.nl>";
 $mail->AddReplyTo = "Fred Leeflang ";
 $mail->Subject  = "Test Email";
 $mail->Body     = "Testing gmail functionality";
 $mail->AddAddress("fredl@dutchie.org");
 if ($mail->Send()) {
 return 1;
 } else {
 return 0;
 }
}

And add a call to this function in the hourly_msgcheck() function just to see if it works:

function hourly_msgcheck () {
 send_email();
}

If you find this article interesting you might want to read some more articles in the WordPress category:

Or in the Coding category:

If you have any questions regarding WordPress, check out our Wordpress page or our Programming page. Note: The code I’m writing about is constantly under development. I can’t write about every little change I make but I try. I’m learning as I go because this is my first WordPress plugin. If you’re interested in the latest code you can always look in SVN through my public Trac server or simply download the latest development copy.

Expertise Shortcode

Fred Leeflang — Mon, 15 Feb 2010 14:25:35 +0000

WordPress has a mechanism for adding ‘shortcodes’ authors can use in their articles through a plugin. In an earlier article I described how to get started with writing your own WordPress plugins. In this article I’ll show how to add a handy shortcode to the plugin that generates code in the expert pages which allows people to register as experts in a certain area of expertise.

Functionality

Every time I create a new expertise page I try to write a brief introduction to the subject. I also want to add a button to this page. When people click on the button they should get a little popup window where they’re asked to indicate their expertise level. This button is mostly repetitive code which only differs in a few parameters (like ‘which expertise page are we on right now’)

WordPress’ shortcode mechanism is not the best mechanism to get this done but I want to add it this way mostly for educative purposes.

Adding the Shortcode

It’s real simple to add the shortcode to our plugin:

add_shortcode('expertise', 'expertise_shortcode');

That’s really all there is to adding the shortcode. Ofcourse we still need some code to implement expert_shortcode():

function expertise_shortcode ($att) {
 $expert = <<
EOM;
 return $expert;
}

After we added this code to our Expertise plugin, inserting [expertise] into our articles/pages should display a very basic button. Why you still see [expertise] in this article even though the plugin is currently active is because I used double [['s in the article.

The above is ofcourse the easiest thing I could think of to make an introduction from.

Hyperlinks

Besides adding a button on the expertise page, we could also use this shortcode to link to the expertise page from withing an article. We could ofcourse make an entirely new shortcode for that but it's not neccesary at all; We can add attributes to the shortcode. Let's agree first that we'll give every expertise page it's own 'expertise' custom field which holds the name of the expertise. Custom fields are easy to add in the 'Edit Page' screen. As the value for this 'expertise' field we choose a simple name like 'Linux'.

Now we'll add an attribute link to the expert shortcode so we can use it like [expertise link=Linux]. The expertiselink attribute is optional so if we don’t add it we’ll still get the ugly button but if we do add it, the plugin will look in WordPress’ database to find the URL of the page that has custom field ‘expertise’ set to ‘Linux’ and display code for a hyperlink to that page with all the titles etc.

function expertise_shortcode ($atts) {
 global $wpdb;

 // Extract attributes and set defaults if not present.
 extract(shortcode_atts(array(
 'link' => 0,
 ), $atts));

 if ($link) {
 $expertpost = $wpdb->get_row("
 SELECT wposts.*
 FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta
 WHERE wposts.ID = wpostmeta.post_id
 AND wpostmeta.meta_key='expertise'
 AND wpostmeta.meta_value='$link'
 AND wposts.post_status='publish'
 AND wposts.post_type='page'
 ", ARRAY_A);
 $url = get_permalink ($expertpost['ID']);
 $expert = <<{$expertpost['post_title']}
EOM;
 } else {
 $expert = <<
EOM;
 }
 return $expert;
}

That code looks a bit more complex already. First of all we’re using the shortcode_atts() function to check if the attribute link is set in $atts. If it’s not set, it gets the default value of 0. So whether link is set or not becomes an if-then-else construct that determines whether to show the ugly button or an equally ugly link. When $link is set it will be set to ‘Linux’ or something along those lines. We should also do some filtering on this later as it’s value is put into a SQL query and we don’t really want to encourage SQL-injection.

The SQL query uses $wpdb, hence the global $wpdb declaration at the top of the function. If everything works well the query should return a row with all the wp_posts columns set. This sample code doesn’t have error checking yet, which it really should have as the query could also return 0 rows (if the author made a typo, or the expertise page administrator has forgotten to add the expertise custom field).

Finally here’s an example using [expertise link=Wordpress], please go see our Wordpress page!

If you liked this article, maybe you want to read more in the WordPress category:

Or if you have any questions about this article or WordPress in general you might want to visit our Wordpress page.

Adding an Expertise Section to WordPress

Fred Leeflang — Mon, 15 Feb 2010 08:16:55 +0000

I’ve been thinking about a way to get people to add links to our blog on their site. A friendly way to do this is by adding an ‘expertise’ section to the site where people can go after they sign up. Here people can ask questions which will be emailed to the section maintainer(s) so they can answer any questions involving their expertise as timely as possible.

This is not a standard WordPress functionality however so I’m going to write my own WordPress plugin for this.

Requirements

I first created an ‘Expertise’ page to the blog. This page is freely accessible without having to log in. Then I created some pages with the Expertise page as it’s parent page. We need to have the ‘Member Access‘ plugin installed on the blog in order to make the separate expertises member-only. The first three expertise pages I set up were for ‘Linux/Unix’ (maintainers: FredLeeflang, TigerP), ‘Programming’ (maintainers: FredLeeflang, TigerP) and ‘IPv6′ (maintainers: TigerP).

I manually added the ‘maintainers’ custom field to each of the separate expertise pages to get started. When the plugin is done this field should be added automatically.

Getting Started with the Plugin

Creating a plugin for WordPress is easy. Simply go inside the wp-contents/plugin directory, create a new directory there and some files and you’re on your merry way. I also took some effort to import the directory into my public subversion server:

svn import experts https://secure.dutchie.org:444/svn/trunk/experts

So you should also be able to check out the source while I’m developing it by:

cd wp-contents/plugins
svn co https://secure.dutchie.org:444/svn/trunk/experts

So all I did to get the plugin to show up with some meaningfull information was to add a file experts.php and a readme.txt. The expert.php has a header in it:

/*
Plugin Name:    Experts
Plugin URI:     http://wordpress.3dn.nl/experts/
Description:    This plugin allows you to add experts to several pages on your site. Experts will get notified when a comment on the page is posted, allowing them to quickly respond even though they don't check the site every day.
Author:         Fred Leeflang
Version:        0.1
Author URI:     http://wordpress.3dn.nl/

Setup:
 1) Install the plugin.
 2) Go to the admin menus, and in the "Options" panel, select "Expers".
 4) Configure the plugin if you need.

*/

Which by itself is sufficient to make the plugin show up like this in the admin -> Plugins section:

Obviously this doesn’t make the plugin do anything yet but it just goes to show that having a header in a file makes the plugin show up with the correct description etc. in the plugin admin screen, ready to be activated!

Got Admin Options?

First we want to make a basic admin page. This is easily done with:

add_action('admin_menu', 'expert_ap');

function expert_ap() {
 //create new submenu under 'Settings'
 add_submenu_page('options-general.php', 'Expertise Settings','Expertise Settings', 'administrator', __FILE__, 'expert_settings_page');

 //call register settings function
 add_action( 'admin_init', 'register_expertsettings' );
}

function register_expertsettings() {
 //register our settings
 register_setting( 'experts-settings-group', 'onpost', 'intval' );
}

This is not complete yet but this shows two important mechanism; adding a submenu to an existing (eg. ‘Settings’) menu and registering settings for our plugin.

The add_submenu_page() function links our settings menu under WordPress’ settings (through using options-general.php), gives it a label, sets which capability is required and sets which PHP function must be called when the user selects the menu (expert_settings_page() which we have not added yet).

The add_action() function adds the function register_expertsettings() to the admin_init section of the page. There’s actually some pretty tricky stuff going on in register_expertsettings(), people who have coded plugins ‘the good old way’ will find out what I mean later. Essentially the register_setting() call adds a variable and a variable validation to a pulldown we’ll design later on. There will be no $_POST processing, HTML filtering etc, WordPress will do all that for us. We just need to make sure that the form POST’s to options.php and make sure that the variables we want to get from the form get registered with register_setting().

The Form

Because of letting WordPress handle our variables, we only need to build the form itself in expert_settings_page().

function expert_settings_page() {
?>

Experts


 
 
 
 On Post in Expertise Section

On Post in Expertise Section

Sample Expertise Area

I’ve set up a sample expertise area for WordPress Expertise. While I’m developing this plugin further I’ll post some more followup in there and probably later on I’ll add one or more articles about the development so stay tuned!

If you enjoyed reading this article you might also like other articles in the Coding category:

Or in the WordPress category:

Both older and newer articles in the Coding category will be listed here. Should you need (free!) WordPress Expertise, please feel free to check out our WordPress Expertise area.

Adding Facebook Detail

Fred Leeflang — Wed, 10 Feb 2010 20:18:31 +0000

Recently I published a short article on how to create your own Facebook application and a somewhat longer article on implementing some basic code into it. Today I’ll tell you how to get some more Facebook gadgets in the application to make it more enticing for people to share it with others. I’ve touched up the HTML and added to the functionality since the most recent article and won’t be describing much about that process as I assume that most people reading this will be familiar with PHP but are more eager to learn about embedding Facebook functionality in their own PHP application.

Facebook Hooks

So we now have a contest that allows people to enter project names, change their suggestions, vote on suggestions or change their votes. All of these events are potentially interesting to people who participate in the contest. Additionally, when people suggest a projectname, they may want to let their friends know they did and invite their friends to vote for their suggested project name. While it’s very easy to develop an application that does these things on a facebook server itself I’ve chosen to let my application to run in an iframe. This makes it considerably more difficult to get it to work as we need to enable something called XFBML for this.

Setting up XFBML is not very hard to do as there’s an excellent writeup on the Facebook Wiki called ‘Connect/Setting up your Site‘ but I still found it somewhat tricky to do so I’ll describe the initial setup in some more detail in this article such that it’s very specific for this application instead of the general setup on the Wiki page. After we’ve setup Facebook Connect it gets much more comprehensible to do things with it.

Modify Your Application

First, the Facebook application I created on Facebook Developer needs to be configured to use XFBML. You need to go into ‘Application Settings’ -> ‘Edit’ for this. By default you will be shown the ‘Basic’ tab but you need to go to the ‘Connect’ tab. The most important thing to set there is the ‘Connect URL’ which I set to http://wordpress.3dn.nl.

To be quite honest I’m not sure what it’s intended for! Something that needs to be set up after this is an xd_receiver.htm file and at first I thought it would need to be in the ‘Connect URL’, however this is not the case as the location of the xd_receiver.htm file gets specified elsewhere later on.

So the xd_receiver.htm file is just a small file that has these contents:

There’s nothing site specific about this file as you can probably tell. The next thing to do is to modify the HTML header. As you may have noticed if you checked out my sources from Subversion (https://secure.dutchie.org:444/svn/trunk/idmcontest) I set up my HTML header for all the files I serve in a single file called head.inc.php so this was fairly easy to do and it’s all in here:

$page = <<

The next thing that needs to be done is equally simply done in the head.inc.php file, which is including Facebook’s API library’s feature loader script:

$page .= "";
 $page .= <<

EOM;

Finally we get to the point where we tell Facebook where out xd_receiver.htm really sits by running a function from the above mentioned API library. This call needs to be made from the bottom of the page and it will render the XFBML code in the body of the document to have actual contents instead of just the markup. As you may have guessed from me using a head.inc.php there’s also a foot.inc.php from which I will run this function call:

$page .= <<

So that’s quite a bit of stuff to do to get this all to work! However, after this it’s easy to do some really nice things with the quite powerfull XFBML.

Adding an Invite

So one of the reasons for me to try and rewrite this application as a Facebook application is the potential that people will ask their friends to vote on their suggestion. As long as the method to vote is easy enough, most people will be likely to do so.

This is actually relatively simple to do with the XFBML configured, it almost looks exactly like FBML:

if ($addinvitefriends) {
 // Retrieve array of friends who've already authorized the app.
 $fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user_id.') AND is_app_user = 1';
 $_friends = $facebook->api_client->fql_query($fql);

 // Extract the user ID's returned in the FQL request into a new array.
 $friends = array();
 if (is_array($_friends) && count($_friends)) {
   foreach ($_friends as $friend) {
     $friends[] = $friend['uid'];
   }
 }

 // Convert the array of friends into a comma-delimeted string.
 $friends = implode(',', $friends);

 // Prepare the invitation text that all invited users will receive.
 $content =
   " has started using 3DN IdM Contest and " . $invitemsg .
   "get_add_url()."\" label=\"Put 3DN IdM Contest on your profile\"/>";
 $page .= <<
   
 

EOM;
}

The $addinvitefriends variable is set when a new project name is suggested so that’s when we want to display the invite box. Line 2 through 15 actually connect to Facebook’s database using the fql_query() method, so it does a SQL select to find out which friends are already using the application so as to prevent invites to be send repeatedly. Frequently Facebook itself will impose a maximum on the number of friends you can invite but it’s possible to invite more people the next day.

Posting Updates on somebody’s Wall

In the next and last article in this series I’ll describe how posting a vote or a new contest leader on somebody’s wall could entice people to ask more of their friends to vote.

If you enjoyed reading this article you might enjoy reading the following articles in the Coding section as well:

Playing with Simple Facebook Connect June 16, 2011
Facebook Bookmarks for Chrome? May 19, 2011
Add Ajax to Expertise Plugin February 28, 2010
Checking Comments for Requests February 20, 2010
Adding sendmail/SMTP to experts plugin February 17, 2010

Implementing Facebook Contest

Fred Leeflang — Mon, 08 Feb 2010 09:16:42 +0000

The other day I wrote a very brief article about the basics of creating a Facebook application. Today it’s time to implement the contest. I will trust from here that the earlier article got you curious enough and that you have figured out how to set up your own application on Facebook. If you did not manage to get your first sample code to work, feel free to drop me a line at the Programming Expertise page and I’ll help you out with any detail questions you might have.

Contest Description

The idea for the contest is simple enough so we’ll skip a formal design process. The goal of the contest is:

To find a great project name for a global identity management project 3DN is starting.

We will do so by:

Allowing people to submit their own project name suggestions.
Allow people to vote on the best project name, even if it’s their own suggestion

There are a few conditions:

The contest lasts for a month
People cannot change their vote or vote twice

The person who suggested the most voted project name will win a small prize.

Setting Things Up

For this implementation I copied the same files I set up the first application with to a directory on my webserver. After that I created a completely new application on Facebook developer with it’s own API key and Secret key. I then changed the $appapikey and $appsecret in the index.php to those new values and imported the whole starting off directory into SVN at https://secure.dutchie.org:444/svn/trunk/idmcontest, you should be able to check out the example code if you like. I then changed the canvas URL to point to my webserver’s URL (http://wordpress.3dn.nl/idmcontest) and went to http://apps.facebook.com/idmcontest to check if it works. The first thing you get to see is the ‘Login to IdM Project Name Contest’ dialog:

Yeah everybody who has used Facebook knows these. It’s actually worth the while to check out what they mean. It actually means literally what it says there; “will let it pull your profile information, photos, your friends’ info, and other content that it requires to work”. So essentially, people who click on ‘Allow’ do not just give the application permission to pull up your info but also the info of your friends! Anyway, let’s assume you’re familiar with this and click on ‘Allow’. We see the good old initial:

This is the 3DN IdM Project Name Contest!
Hello, !
Friends:
500011687
501630843

And we’re back to an application we’ll start modifying to make it do what we want it to do.

Some Formalities

Let’s see if it’s really this easy and add a little form to see if we can get some user feedback into our application.

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
 echo "You posted: " . $_POST['projectname'] . "";
} else {
 print <<
 
 
 
EOM;
}

Replacing the functionality of the original index.php with the above snippet actually works like a charm so it should be real easy to:

Get some social information about people doing the contest, either through FBML or some client API functions, allowing them to share the contest with their friends more easily
Get their feedback (either their own suggested project name or their vote) and put it in a local database for keeping score.

So far so good, this seems real promising. Ofcourse we need a much more decent looking form first, as the above was just a simple testcase, so let’s create a form that:

Shows the existing project names suggestions with radiobuttons , ranked by votecounts (we’ll store these in a local database, each with a unique ID)
Has an optional text input field for submitting your own proposed project name (if you submit anything in this form field it will be added to the database)

Database Setup

I decided to use my wordpress database instance for this and simply created two tables in it. I also created a separate database user for the idmcontest that has access only to the idmcontest and the idmcontestvotes tables:

create table idmcontest (
  id int not null auto_increment,
  prjname varchar(128),
  userid int default 0,
  primary key (id)) engine innodb;
create table idmcontestvotes (
  id int not null auto_increment,
  votee int default 0,
  voteid int default 0,
  primary key(id),
  foreign key(voteid) references idmcontest(id)) engine innodb;
grant all privileges on wordpress.idmcontest to idmcontest@localhost identified by 'PASSWORD';
grant all privileges on wordpress.idmcontest to idmcontest@localhost identified by 'PASSWORD';

I’m using the ‘innodb’ engine here just to make sure that the referential integrity of the database is guaranteed. MySQL will allow foreign keys but silently ignore them with most other engines.

To do this right, we will obviously need some database connectivity stuff in our PHP script as well. Everybody has their own methods for this and some will use just the standard PHP MySQL functions, but I have some PHP classes of my own that I’ll be using for this. I won’t be documenting these here as the methods are quite self-explanatory. All I have to do to initialize a database connection in a safe way is by using:

include "autoload.inc.php";
$db = new DB(DATABASE, CONFDIR);

This little snippet basically sets up PHP’s automatic classloader, initializes some constant values like DATABASE and CONFDIR, gets username/password information from the safe location CONFDIR and makes a connection to the database. I’ll insert a few test projectnames some of my friends came up with before in the idmcontest table first (I’ve figured out my own Facebook user ID to be 635153805; so for development purposes only I will set these to my own user ID):

insert into idmcontest values (1, 'enIgMan', 635153805);
insert into idmcontest values (2, 'Genesis', 635153805);
insert into idmcontest values (3, 'Pamoja', 635153805);
insert into idmcontest values (4, 'Persona', 635153805);
insert into idmcontest values (5, 'Merdeka', 635153805);

I also populate the idmcontestvotes table to have a vote for one of the project names:

insert into idmcontestvotes values (0, 635153805, 1);

So now we’re all set to create the form using this testdata.

Building the Form

Now that we have the form data in place and the database connectivity from our script working, all we need to do is to separate our script into a POST part and a GET part (the form display and the form handling). It’s convenient to see the scores before and after voting or submitting a project name as well.

First we will have to come up with a clever query that combines the idmcontest table’s project names with the idmcontestvotes votes. This query does a join on those two tables (it essentially ‘links’ these two tables together and filters out the rows we want to see by the WHERE v.voteid=n.id condition) and returns all the fields we want to see:

select COUNT(n.id) AS votes,n.prjname,n.userid,v.id,v.votee,v.voteid FROM idmcontest n, idmcontestvotes v WHERE v.voteid=n.id GROUP BY n.id ORDER BY VOTES DESC;

This will return the number of votes in the votes column, which is also the column we sort on, so we’ll get the most voted on project names first. Let’s test if this query works for our purposes:

mysql> select COUNT(n.id) AS votes, n.prjname,n.userid,v.id,v.votee,v.voteid FROM idmcontest n, idmcontestvotes v WHERE v.voteid=n.id GROUP BY n.id ORDER BY VOTES DESC;
+-------+---------+-----------+----+-----------+--------+
| votes | prjname | userid    | id | votee     | voteid |
+-------+---------+-----------+----+-----------+--------+
|     1 | enIgMan | 635153805 |  1 | 635153805 |      1 |
+-------+---------+-----------+----+-----------+--------+
1 row in set (0.00 sec)

That’s a promising start, except it displays only 1 row of the project that already has a vote on it; It does not show the project names with zero votes. To fix this we need to modify the query in such a way that it does a so called outer join on the two tables, let’s see if this one works:

select
  COUNT(n.id) AS votes,
  n.prjname,
  n.userid,
  v.id,
  v.votee,
  v.voteid
from idmcontest n LEFT OUTER JOIN idmcontestvotes v ON v.voteid=n.id
group by n.id order by votes desc;

There we have it, but does it return what we want it to return:

+-------+---------+-----------+------+-----------+--------+
| votes | prjname | userid    | id   | votee     | voteid |
+-------+---------+-----------+------+-----------+--------+
|     1 | Persona | 635153805 | NULL |      NULL |   NULL |
|     1 | enIgMan | 635153805 |    1 | 635153805 |      1 |
|     1 | Pamoja  | 635153805 | NULL |      NULL |   NULL |
|     1 | Merdeka | 635153805 | NULL |      NULL |   NULL |
|     1 | Genesis | 635153805 | NULL |      NULL |   NULL |
+-------+---------+-----------+------+-----------+--------+

Looks like we need to go back to the drawing board as the votecount is off! It shows there’s 1 vote on every project name which clearly isn’t correct. If we add a vote in the database and run the query again:

+-------+---------+-----------+------+-----------+--------+
| votes | prjname | userid    | id   | votee     | voteid |
+-------+---------+-----------+------+-----------+--------+
|     2 | enIgMan | 635153805 |    1 | 635153805 |      1 |
|     1 | Persona | 635153805 | NULL |      NULL |   NULL |
|     1 | Pamoja  | 635153805 | NULL |      NULL |   NULL |
|     1 | Merdeka | 635153805 | NULL |      NULL |   NULL |
|     1 | Genesis | 635153805 | NULL |      NULL |   NULL |
+-------+---------+-----------+------+-----------+--------+

We see however that there’s some method to the madness here; the votecount is actually correct (2 votes for project name ‘enIgMan’) except where id = votee = voteid = NULL. This is easily checked for inside the PHP script so we’ll use this query to build our pulldown menu with:

print <<
 
 
 
EOM;

Good, getting somewhere now. If you paid some real close attention you have noticed I added another selector, ‘n.id AS theid‘. We need to select n.id here as the v.id column is NULL is there are no votes and we still need to know the project name’s ID. Having to add ‘AS theid’ is a bit of a quirk of my database class which requires unique names for the columns.

So the form building functionality is in, it just needs some more styling as you can tell from this screenshot:

The pulldown shows 0 votes for the other project names but unfortunately I can’t show the pulldown here.

Handling the Form

Now that we’ve built the form we still need to take some action when somebody clicks on the ‘Vote!’ button ofcourse. This is also easy enough to do by putting an if-then-else construct around the form building part using the $_SERVER['REQUEST_METHOD'] variable:

if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  /* Build Form */
} else {
  /* Handle Form */
}

So in the handle-form code we need to check a few things:

Is the user POST’ing logged in on Facebook
Is the post variable ‘suggestion’ set; If so, we will ignore any selected vote and assume the user wants to suggest his own projectname (and maybe vote for it the second time he gets the form)
If the variable ‘suggestion’ is empty, we will look at the voter’s user ID first and remove any vote he may have already done. After this we will insert his vote into the table, ths assuring every user has voted only one project name.

That’s easy enough to do! We will need the $user_id = $facebook->require_login(); of the previous article here and that’s really all it takes and in it’s simplest form without any real checking for now it looks like this:

if ($_POST['suggestion'] != "") {
 $db->Q("INSERT INTO idmcontest VALUES (0, '{$_POST['suggestion']}',$user_id)");
 print "You submitted a name! Thanks!";
 } else {
 $db->Q("DELETE FROM idmcontestvotes WHERE votee = $user_id");
 $db->Q("INSERT INTO idmcontestvotes VALUES (0,$user_id,{$_POST['myvote']})");
 print "Your vote has been accepted! Thanks!";
 }

So I’ll add some more filtering before putting this thing ‘live’ as there are some naughty things that evil people could still do like putting arbitrary SQL into the project name field. I obviously don’t want anybody to forge my contest results or even completely mess up my wordpress database (which is not possible here as I created a separate database user with privileges only on the two tables above). I’ll also add some more styling but there you have it, it’s really mostly just PHP code and only a tiny bit of Facebook specific stuff. In a next article I’ll show some more Facebook specific stuff like giving people the ability to tell their friends about this contest.

If you want to see it in action, try going to the Facebook application. If you try it out shortly after the publishing date of this article it may still look like above but I’ll be making edits for later articles as well.

3DN Technology » coding

Playing with Simple Facebook Connect

Facebook Bookmarks for Chrome?

Add Ajax to Expertise Plugin

Using SACK

Periodic Expertise Events

Activation Code

Work with Me

Experts

Read More

Expertise Shortcode

Functionality

Adding the Shortcode

Hyperlinks

Read More

Adding an Expertise Section to WordPress

Requirements

Getting Started with the Plugin

Got Admin Options?

The Form

Experts

Sample Expertise Area

Read More

Adding Facebook Detail

Facebook Hooks

Modify Your Application

Adding an Invite

Posting Updates on somebody’s Wall

Read More

Implementing Facebook Contest

Contest Description

Setting Things Up

Some Formalities

Database Setup

Building the Form

Handling the Form

If you want to see it in action, try going to the Facebook application. If you try it out shortly after the publishing date of this article it may still look like above but I’ll be making edits for later articles as well.

On Post in Expertise Section	/> Do Nothing /> Send Email
SMTP username
SMTP password
SMTP server