Category: PHP

Facebook Apps and the Same Origin Policy

Over recent months, Facebook have become a lot stricter in relation to the use of secure URLs for applications presented in the App Canvas and on Page Tabs.

The bottom line in this is that you need to serve your Facebook application content from a secure (https) URL. You can have your app set up to serve on both http and https, but if  you don’t have this https set up correctly, any Facebook user who has Secure Browsing switched on will not be able to use your application.

My reaction to this was to convert all my applications to use https for all connectivity, so as to remove any uncertainty in this regard.

I figured that the users browser would just communicate with my web server over https, regardless of whether the Facebook use was using Secure Browsing or not.

However, there is a big problem with this if you use AJAX calls in your application.

I had set up all my AJAX calls to use https, but if the viewing Facebook user isn’t using Secure Browsing (ie they are connecting to your application over http), you are going to fall foul of Browser restrictions arising from the Same Origin Policy.

This policy is designed to prevent XSS attacks, in that it prevents Javascript from making calls to URLs domains that are not the same as the URL domain the user is viewing. Crucially, this includes the protocol which is used.

That means that if your Facebook user is connecting to http://facebook.nightbluefruit.com for general application content, and the application makes an AJAX call to https://facebook.nightbluefruit.com, the browser will send the request but will refuse to receive the response.

To overcome this, you should really set up your AJAX URLs based on the protocol used to connect to your application. You can use the $_SERVER['HTTPS'] special variable to do this.

Adding text to images to promote your site

Promoting a new website is always difficult, and you really need to give yourself every advantage possible if you want to get it out there.

One technique that I don’t see used very often is writing the name of your website on any images that are uploaded to it. When you do this, and your images are picked up by Google, and then used by others when they find them in an Images search, your website gets a free plug.

Writing on images isn’t very difficult at all. Most PHP installations will have GD, and after that, all you need is a TTF font file and the imagettftext PHP function. Basically you just pass your image resource through the function and it comes out the the other end with text on top.

I’m trying to promote the following site at the moment:

Minifigure Mix

which is all about Lego Minifigures.

All of the image filenames contain the words ‘lego’ and ‘minifigure’ and each image has ‘minifiguremix.com’ written on the top left hand corner.

How to update a Facebook Fan Page from PHP

Note: Facebook changes its API as frequently as you change your socks. These instructions worked as of Apr 19th 2011.

In a previous post, I outlined how to update your Facebook Profile from a PHP script.

This is fine if you are using Facebook as an individual, but if you are a business or an organisation, you won’t have a profile, you will have a Fan Page, which people ‘Like’.

Updating a Fan Page from a PHP script is a lot more difficult, because Fan pages are managed by users with standard profile accounts, and you need to obtain a extended range of permissions in order make updates to their Pages.

Anyway, its is possible, and here’s how.

Firstly, this is what you will need:

A proper browser (ie anything other than Internet Explorer) that you can be confident will send long HTTP GET requests

cURL, which can be run from a command line (for testing)

A good text editor

A credit card (weird, I know, but go with it)

A standard Facebook account

Overview

We are going to create a Facebook Application, and add that Application to the Facebook User Account/Profile which manages the Page we want to update. The Application will have the necessary permissions to update Pages which the Facebook User Account/Profile manages.

Step 1: Add the Facebook Developer Application to your Facebook Account

Login to Facebook

(If you have added the Facebook Developer application previously, you can skip this bit)

Go to: http://www.facebook.com/developers/

Look for the button that allows you to add the Facebook Developer Application

If you haven’t added this before, you will need to confirm your identity. You may be able to do this with your mobile phone, but if not you will have to enter valid Credit Details. No charge will be made to your Credit Card.

Step 2: Create an Application

Once the Facebook Developer Application is added, you now create an Application. Call it something relevant. You don’t need to enter much in the way of detail for the application. The only important data you need to enter is under Website, where you should enter a Site URL and Site Domain.

These should be something relevant, for instance, the website address of the business/organisation to whom the page relates. Note: enter a trailing slash for the Site URL eg http://www.mysite.com/
Now, save the details, and you will be returned to a summary page which lists the details for your application. You do not need to submit your application to the Facebook Directory.

From this page, copy and paste your Application ID and Application Secret into your text editor

Step 3: Establish access to your Account/Profile for your Application

Starts to get a bit tricky now, so pay attention. Read everything twice.

You now what to obtain an Authorisation Code for your Application. This code will be generated by Facebook based on the permissions your Application requests from your Facebook User Account/Profile when you add your Application to your Faecbook Account/Profile.

Construct the following URL in your text editor:

https://www.facebook.com/dialog/oauth?client_id=<YOUR APPLICATION ID>&redirect_uri=<YOUR SITE URL>&scope=manage_pages,offline_access,publish_stream

YOUR APPLICATION ID = Application ID you took from your Application Details

YOUR SITE URL = The Site URL you entered when setting up your Application

scope = The permissions you are requesting:

manage_pages = allows application to manage pages for which the user is the administrator

offline_access = allows updates to occur indefinitely

publish_stream = allows application to update the feed of the pages for which the user is administrator

Now, ensuring that you are logged into Facebook, paste the URL into your browser and hit enter.

A Facebook page will render, prompting you to add the application with the permissions as described above. Accept this, and you will be redirected to your Site URL. The actual query string to which you are re-directed will contain a long ‘code’ value. Copy this from your browser address bar and paste into your text editor.

This code is your Authorisation Code.

Step 4: Get an Access Token to allow your Application access your Profile

Now that you have an Authorisation Code, which is a sort of once off thing, you can request an Access Token, which will allow your Application have permanent access to your User Profile.

Again in your text editor, construct the following URL:

https://graph.facebook.com/oauth/access_token?client_id=<YOUR APPLICATION ID>&redirect_uri=<YOUR SITE URL, WITH A TRAILING SLASH>&client_secret=<YOUR APPLICATION SECRET>&code=<YOUR AUTHORISATION CODE>

Be extra careful with this. Its a very long string. Ensure you include a trailing slash in your Site URL.

Now, paste the URL into your browser and hit enter. Facebook should return a single line like:

access_token=220088774674094|c7cb68d51ae2f40e9878ab14.xxxxxxxxxx etc etc

(Note: this is not a real access token, its one I made up.)

You now have an Access Token that allows your Application do stuff to your User Profile

Step 5: Get an Access Token for the Page you want to update

Yes, more Access Tokens are needed! You need a specific Access Token for each Page you want to update! Jesus wept!

Construct the following URL in your text editor:

https://graph.facebook.com/me/accounts?access_token=<YOUR ACCESS TOKEN FOR YOUR USER PROFILE>

Paste it into your browser and hit enter. Facebook will now return JSON objects for each of the Pages and Applications that are under your User Profile. You should see an object for the Page you want to update, each of which will include an ‘id’ and ‘access_token’.

Copy and paste these into your text editor.

You now have an Access Token and Page ID for the Page you want to update.

Step 6: Test!

Finally!

Construct the following command in your text editor:

curl -F ‘access_token=<THE ACCESS TOKEN FOR THE PAGE YOU WANT TO UPDATE’ -F ‘message=It works.’ https://graph.facebook.com/<THE ID FOR THE PAGE YOU WANT TO UPDATE>/feed

Paste to a command line and hit enter. If it works, you will get back a JSON object containing an update id, and the message will appear on the Feed of the Facebook Page.

If not, you will get some class of error. Retrace and try again. I can’t emphasis enough how unforgiving the tolerances are here, but if you persist, it will work!

Once you have it working, you can then build the update into your PHP application using cURL.

More here:

http://developers.facebook.com/docs/authentication/
http://developers.facebook.com/docs/reference/api/

The pain of Drupal

I’ve recently taken on a job that requires modification of a web site built on Drupal, and 3 days in, I feel like I need a 2 week holiday.

Drupal, and its counterpart, Joomla, are Open Source Content Management systems. The idea is that the allow people who don’t know anything about HTML, PHP, Javascript etc etc to build complex, feature rich websites.

Their use on the web has exploded over recent years, as more and more would be ‘web designers’ have started using them as their framework for building websites.

This in turn as led to the development of lots and lots of Drupal plugins and widgets, which add a futher layer of fudge and complexity to something that is already very fudgy and very complex.

Under the hood, its a morass.

Before starting work on the modifications I had to make, I took a look at the MySQL database on which is runs. It had 288 tables (my own CMS has 12 tables, and even poor old Wordpress only has about 40 tables).

If that wasn’t bad enough, when I then tried to run a local copy of the website on my laptop, I started to get errors about PHP not having enough memory to run the Drupal scripts. PHP is normally allocated about 16MB of memory as part of its installation; to run Drupal, I had to up this to 64MB!!

Its gets worse. Looking at the raw HTML generated by Drupal, I saw that it was loading 25 different CSS files, and 14 different Javascript files! And when I examined the DOM via Firebug, I could see that certain elements were taking CSS properties from up to 4 different files!

All this was bad enough, but it was nothing comparred to actually using the management interface to build content. The admin menu in Drupal has 14 different options, and each of these has a plethora of sub options, all of which refer to vague concepts like Blocks, Views, Modules, Panels, Stories etc (they also refer to a Page, but its isn’t really clear what a Page is).

My first thought was that it would be actually easier to learn HTML, PHP and Javascript than try and unravel this crap.

I persevered anyway. I made a view changes to pages where I could figure how to make those changes, but none of them appeared on the actual website. This was most probably to do with caching I thought, but there was nothing in the Drupal interface that said ‘You should clear your cache to see these changes’. I also thought  it was quite odd that an app that generates links to 40 odd CSS and Javascript files should be worried about caching.

I looked around for somewhere I could clear the cache, but could find nothing. I eventually googled the subject and found that the clear cache was a sub sub option under the ‘Site Configuration’ menu option.

On another occasion, I had to change some User Permissions. When I clicked on the Save button, my laptop started to grind to the extent that I thought it was going to shut itself down to prevent an explosion.

Perhaps my most stressful experience with Drupal was dealing with this bug. There are 300 posts on the Drupal Forum thread on this bug, and the upshot of it isn’t there isn’t a universal solution. You basically have to figure out what version of a few different modules you are using, and then apply a serious of patches which may or may not break other parts of your installation.

Lets try and use an analogy here.

Building a website with Drupal is like trying to build a house by joining together five or six mobile homes. Its cheap, it doesn’t take long to put together and it seems like a easy solution to a pressing problem.

What you get is something that is about the same size as a house, and that has certain features of house (eg windows and doors), but that also has 5 bathrooms, 5 kitchens, no corridors and no rooms of any useful size. You also need 5 different electricty meters, and in certain cases, if you want to walk from one room to another, you have to leave house and come in through another door.

Also, if you want to make even minor modifications to the look of your house  in future, you have to take the whole thing apart and stick it back together again.

Don’t get me wrong. Open source packages like Drupal are essential part of the Internet, but its becoming clear that the more an application tries to be a solution for everything, the more likely it is to become a solution for nothing.

Refreshing an image when filename is the same

Here’s a nifty little trick that might get you out of a bind:

Say you have a web app in which the user can change the images by uploading new image files. Say then that the application requires that the image filename remain the same. See the problem?

The image may have changed but your browser is still looking at the same filename, so it will display its cached image. Of course, you could try an edit your HTML to that caching doesn’t occur, but we like caching, so here’s a better solution.

An image file, like a script file, can accept an argument when requested with HTTP. For instance, the image below is requested so:

<IMG src=/blog/wp-content/pottery-main.thumbnail.jpg?foo>

The cool thing about this is that you attach random arguments to your image calls, either in HTML or in Javascript, which will cause the browser to reload that image every time it is called. Hence, when your user loads a new image, and this image has the same file name as the old image, this method will allow the user to view the new image without having to do a manual refresh.

In Javascript, you can create a random argument using time and date functions. e.g.

my_image.src=”images/pottery.jpg?” + (new Date()).getTime();

or

image_td.innerHTML = “<IMG src=images/pottery.jpg?” + (new Date()).getTime() + “</IMG>”;

Managing images with GD

One of the biggest problems I find with Content Management Systems is that while users are capable of managing web site text, the results are a little less predictable when it comes to managing images.

There are 2 primary problems:

Firstly, a lot of users aren’t comfortable with scaling images to fit into the spaces designed for them, and secondly, if you allow for this and use the IMG tag to scale the height and width of the image, you get fuzzy distorted images and large files that take an age to load in the browser.

This is why programatically manipulating uploaded images is such a good idea.

There are 2 tools you can use to manipulate images in PHP: GD or ImageMagick

GD is more commonly found in PHP compiles, and ImageMagick can be difficult to install correctly, so lets stick with GD for this discussion.

The problem I faced was this:

I wanted users to be able to upload long images, tall images and square images, but I wanted these to fit into a space 214px x 214px on a website page without having to use the IMG height and width tags.

This meant a 2 step process for the long and tall images: first, resize them so that they were with 214px tall or wide, and then crop them so that they were both 214px tall and 214px wide. I also wanted to make sure I was cropping down to the middle portion of the image, so that I was getting what the user wanted to appear and not the top, bottom or side of the image. The task for square images was a little simpler, in that I only had to resize the image (no cropping).

The PHP function I created is produced here. I’ve added inline comments to explain.

<?php

#Arguments = source image file, altered image file, required dimesions of altered image

function resize_image($src_image,$dst_image,$xsize,$ysize)
{

list($w,$h) = getimagesize($src_image);

#Deals with images that are wider than they are tall

if ($w > $h) {

#First, resize the image so that 1 side is the required length
$new_height = $ysize;
$new_width = ($ysize / $h) * $w;

$x=$w;
$y=$h;

#Resized temp image

$temp_image = “images/” . date(”U”) . “.jpg”;

$image = imagecreatefromjpeg($src_image);
$crop = imagecreatetruecolor($new_width,$new_height);
imagecopyresized ($crop, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
imagejpeg($crop,$temp_image,100);

# Now use temp image to create final image

list($w,$h) = getimagesize($temp_image);

if ($h >= $ysize) $new_height = $ysize;
if ($h <= $ysize) $new_height = $h;
$new_width = $ysize;

#This bit sets the dimensions for the middle of the image
$x = ($w – $ysize) / 2;
$y = 0;

$image = imagecreatefromjpeg($temp_image);
$crop = imagecreatetruecolor($new_width,$new_height);
imagecopy ($crop, $image, 0, 0, $x, $y, $new_width, $new_height);

#As above but for images that are taller than they are wide

} elseif ($h > $w) {

$new_width = $xsize;
$new_height = ($xsize / $w) * $h;

$x=$w;
$y=$h;

$temp_image = “images/shops/” . date(”U”) . “.jpg”;

$image = imagecreatefromjpeg($src_image);
$crop = imagecreatetruecolor($new_width,$new_height);
imagecopyresized ($crop, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
imagejpeg($crop,$temp_image,100);

list($w,$h) = getimagesize($temp_image);

if ($w >= $xsize) $new_width = $xsize;
if ($w <= $xsize) $new_width = $w;
$new_height = $xsize;
$y = ($h – $xsize) / 2;
$x = 0;

$image = imagecreatefromjpeg($temp_image);
$crop = imagecreatetruecolor($new_width,$new_height);
imagecopy ($crop, $image, 0, 0, $x, $y, $new_width, $new_height);

#Square image; no need for cropping
} elseif ($h == $w) {

$new_width = $xsize;
$new_height = $ysize;

$x=$w;
$y=$h;

$image = imagecreatefromjpeg($src_image);
$crop = imagecreatetruecolor($new_width,$new_height);
imagecopyresized ($crop, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);

}

#Save the new images and discard any temporary images
imagejpeg($crop,$dst_image,100);
imagedestroy($image);
}

?>

Here’s an example:

This is the original image resized with IMG tags:

pottery-main.jpg

And here is the programatically manipulated image without any IMG tags:

v1-53.jpg

phpBB Robotic Registrations

Preventing robots from posting on a phpBB forum is easy enough if your prospective users are content to wait for an administrator to moderate the registration, but that isn’t going to suit everybody.

Requiring moderation on the part of the administrator is also a pain for the administrator, who has to deal with the registration emails and decide who is real person and who is not.

I came across this problem for http://www.planningmatters.ie/pmbb

When you first become aware of the problem, your impulse reaction is to head off to Google for a tried and tested solution, but the problem is that once a solution gains any currency, the robot authors figure it out and you’re back to square one again.

My first solution was to edit the email that is sent to users awaiting activation, asking them to forward that email back to me to confirm they were a real person. I also set up a cron job to run an SQL script to delete non-activated users from the database, deeming that any user who had not been activated 7 days after initial registration to be a robotic user.

This isn’t ideal in that it requires an extra step for users, but it does mean that real users get through, and that your database is kept in shape.

However, I was still getting floods of email from attempted robotic registrations, so I set about editing the registration script (includes/usercp_register.php).

This script processes registrations based on whether or not the user has agreed to the disclaimer on the primary registration page. I set an extra PHP $_GET variable as part of the disclaimer agreement, and amended the later part of the script to check for that variable before processing the registration. I also set the extra variable equal to date(”DG”) which means that the variable changes every hour. You can see this by examining the discliamer links here:

http://www.planningmatters.ie/pmbb/profile.php?mode=register

The fact that the extra variable is not part of the standard phpBB install will ward off a lot of dumber robots, and the fact that it changes will ward off some smarter ones too. However, there are still a lot of robots out there that are clever enough to detect the verification method, so I was still getting some SPAM registrations.

To clear off the final few robots I knew I was going to have to involve the intellect of real users, in that this is probably the only thing that robots can’t replicate. Hence, I decided to add a really simple, but real, question to the registration page. To do this I edited the following file under the default template:

templates/subSilver/profile_add_body.tpl

I inserted the following extra lines of HTML underneath the Visual Confirmation section:

<tr>
<td class=”row1″><span class=”gen”>What is the day today?</span><br /><span class=”gensmall”>We ask this question to prevent SPAM registrations. SPAM robots won’t know the answer.</span></td>
<td class=”row2″><input type=”text” class=”post” style=”width: 200px” name=”day_today” size=”6″ value=”" /></td>
</tr>

This adds the following question to the registration form:

“What is the day today?”

The answer to which 99.999% of real users on the forum will know.

To check the answer, I then added an extra line to the top of the main registration script:

includes/usercp_register.php

The line I added is:

//ANTI-SPAM DEVICE
if (isset($HTTP_POST_VARS['day_today']) and strtolower($HTTP_POST_VARS['day_today']) != strtolower(date(”l”))) die();

This basically ensures that the answer to the question is the same as the day produced by the date() function (case insensitive) and if its not, the script dies.

Previous to adding this, and even with the other changes, I was getting about 20 robot registrations per day. After adding this, it dropped to about 10 per day, so there was still some work to do.

Finally, Occams Razor came to the rescue. I found out that the robots trawl for the “profile.php” script and the “mode=register” URI, so I set about trying to change these.

They need to be changed in:

includes/page_header.php

includes/usercp_register.php

(remembering of course to rename the file profile.php too)

I changed mine to:

profile.php -> pmatters.php

mode=register -> mode=signupuser

Now, FINALLY, I have stopped getting robotic registrations!!