For those of you curious about the "behind the scenes" that goes into creating and testing plugins like WPFaceMaker, or you need to know how to get WPFaceMaker working with new Facebook SSL requirements here is a bit of a walk-thru on creating the latest upgrade.
Big shout out to Peter Beattie of IMRevolver.com for showing how to use Hostgator’s built-in shared SSL certificates instead of needing to purchase a separate certificate here http://imrevolver.com/fanpage-ssl/
Background
Facebook have announced that as of Oct 1, 2011, they will require IFrame apps (like WordPress) to use a Secure-Socket-Layer (SSL) connection – in other words, they have to work using HTTPS with a certificate, not just plain old (unsecure) HTTP.
Whether this will actually make Facebook inherently more secure, I’ll leave to others to debate – the fact remains that the change is coming and we need to make sure WPFaceMaker (and the WPFBReveal plugin) will still work.
So, let’s start by testing that…
Test – Normal HTTP
OK – so here’s my WPFaceMaker-powered WordPress site running under normal HTTP access
Test HTTPS (as Page Admin) – Not Good!
OK – I’m seeing this image because I’m the page admin – what about Joe Public using HTTPS…?
Test HTTPS (not Page Admin) – Fail
OK – if I’m not logged in as a page administrator, it looks terrible. Definitely need to fix this.
Create Test Site – fb.steveovens.com
OK – First thing I’ll need is a test site so I can test my changes.
I’m setting this up in a new Hostgator Reseller account rather than on my dedicated server, because this is what most of my plugin customers will be using – so it will make sure I’m testing in the environment that most of my clients will be in – I’ll see what they see.
As a side-benefit – HostGator also have built-in shared certificates on their reseller hosting accounts – so I won’t need to purchase separate SSL certificates for each WordPress site. (Once I get this sorted out, I can move my client accounts across to the shared hosting environment too!)
Test Account – Note User Name (fbsteveo)
Here’s my Test Account creation page. Note the user name (fbsteveo) – we’ll need that later.
Hostgator Info We Need
From my original Hostgator Welcome Email, note the control panel address: https://menara.websitewelcome.com – we’ll use this to access our new site, by combining it with the user name from the previous step.
Check HTTPS access to new site
How we do this – we combine the HostGator server name (https://menara.websitewelcome.com) with our new site’s user name (fbsteveo).
So, in my example, it is https://menara.websitewelcome.com/~fbsteveo/
Backup / Clone Existing Site
I use BackupBuddy to clone the existing site
Import – Notice Using Full HTTPS Address
Notice how I’m using the full HTTPS address for the site in the import step – this will help me to set the WordPress Site URL to the HTTPS address (which is what I want).
Clone Site – Step 2 of 7
Clone Site – Step 3 of 7
Clone Site – Step 4 of 7
Clone Site – Step 5 of 7
Clone Site – Step 6 of 7
Clone Site – Step 7 of 7
Gotta love BackupBuddy – in a few minutes, I have a complete clone of my original Facebook WordPress site, ready to test
Test Site Operational – with HTTPS support
OK – the test site is operational and can be accessed using HTTPS
Check / Force HTTPS in site address / WordPress address
Make sure you have forced https in your WordPress Settings (through WordPress dashboard)
Install WordPress HTTPS Plugin
Install and activate this plugin – this forces https protocol for internal links.
Configure WordPress HTTPS Plugin
Select WordPress HTTPS in Settings Menu, and enable Internal and External HTTPS Elements.
If an external element cannot be loaded over HTTPS, it will load over HTTP and your user MAY get a browser warning about the page containing both secure and insecure content (depending on their browser). This is the way internet security works.
To "fix" this, you would need to secure all of the elements used by your page. So, for example, if your page was referencing an external javascript file through http, you could copy that file to your server and serve it through https. If your page was (for example) using Gravatar images (which I believe don’t support being requested through HTTPS) then you pretty much just have to turn off Gravatars.
Modify TEST Site Home Page So We Can Tell Them Apart
As the two sites are exact clones, now I need an easy way to tell which site I’m looking at from inside Facebook.
I added some text to let me know that I’m on the TEST site.
Let’s Update the Facebook App
The Facebook App used to point to http://facebook.steveovens.com – now it will point to https://menara.websitewelcome.com/~fbsteveo/
Basic Info
Basic Info – all this stuff up the top looks right.
App Domain *may* need to change – let’s leave it for now and see how we go…
Basic Info – BEFORE Pic
ALL of these values look like they need to change for the new secure version – this is the "BEFORE" pic
Change URLs to match new Site URL – AFTER Pic
Updated all URLs – secure ones point to the new secure version of the site.
Change the unsecure URLs to use the http:// version of the secure URL (replace "https" with "http").
Guess that answers the question about App Domain…
Change App Domain to websitewelcome.com – matches our Site URL
Changes Saved Successfully
Recap – Final Version of Settings
Just to recap – here’s what the final version of the settings looks like.
Test Normal HTTP – Works
Notice the TEST site text we added earlier – this way we KNOW we’re looking at the new site!
Test HTTPS (as Page Admin) – Looks Promising…
Let’s try it as "Joe Public" user now…
Test HTTPS (as non Admin) – Success!
Here we are logged in as another user (who hasn’t "Liked" our page yet)
Test "Like/Unlike" Reveal Functionality
They "Like" our page and see the "Reveal" text.
Just to be sure, click on Home / About / Home tabs to make sure "Like / Unlike" status is persisting. And it is!
(This was an early concern because both Facebook and WordPress share a variable called "signedRequest" that they use for different purposes – however, looks like it’s all working! Yay!)
So – no plugin update is required, though you certainly need to secure your WordPress site with a certificate and I recommend the WordPress HTTPS Plugin to help secure your internal links.
Related posts:
