At Blue Ocean Ideas one of our mantras is “everything matters”. What do we mean by this? We mean that your website, print, email, twitter, facebook, foursquare, tv, radio, etc. all should be consistently created with the customer experience in mind. It all matters!

So one of the things we do is worry about details and small things that matter including how someone is welcomed to our site if  they come from Facebook and Twitter. So we created popup welcome screens for people that come from either of these sites using  jquery and php. Here’s how it works:

Let’s say someone comes across our Facebook page…

And decides to click on a link to one of our articles. Usually this would lead them to that article’s page on our Blog. However, in the process of going to that page, he/she will be greeted with a welcoming message that was specially designed for visitors from Facebook. Which looks like this:

After being greeted (and delightfully surprised) they can continue by clicking “Let’s Go!”, and proceed to read the article which they came to see.

We have a similar lightbox for users coming from Twitter.

Implementation:

1) First we need to create pages facebook-popup.html and twitter-popup.html and insert the following code:

Show/hide the code:


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head><title></title>
<script>
function close(){
parent.$.fn.colorbox.close();
}
</script>
</head>
<body>
<img src=”http://www.blueoceanideas.net/wp-content/themes/blueoceanideas/images/facebook-welcome.gif” width=”780″ height=”382″ usemap=”#Map” />
<map name=”Map” id=”Map”>
<area shape=”rect” coords=”322,292,454,328″ href=”javascript:close();” alt=”” />
<area shape=”rect” coords=”632,347,722,361″ href=”http://www.blueoceanideas.net/services/social-media/” alt=”” />
</map>
</body>
</html>


In this code we have an image, with hotspots that I drew using Dreamweaver. One of them triggers function close() which closes the lightbox it is in, and second is a link to our Social Media services.

2. Next step would be open our header.php of our WordPress website and add the following code right before <body>

Show/hide the code:


<?php
$ref=$_SERVER[‘HTTP_REFERER’];
$pos = strpos($ref, “facebook.com”);
if ($pos !== false) {
echo ‘
<script type=”text/javascript”>
$(document).ready(function(){
$.fn.colorbox({href:”/wp-content/themes/blueoceanideas/facebook-popup.html”, open:true});
})
</script>’;}
$pos = strpos($ref, “twitter.com”);
if ($pos !== false) {
echo ‘
<script type=”text/javascript”>
$(document).ready(function(){
$.fn.colorbox({href:”/wp-content/themes/blueoceanideas/twitter-popup.html”, open:true});
})
</script>’;
}
?>


The first part of this code is responsible for finding out where the visitor came from.
$ref=$_SERVER[‘HTTP_REFERER’];

The next part triggers lightbox with facebook or twitter popup with a welcome message.

To see how it works check out these demonstrations: For Twitter and For Facebook.

And by the way, you need to download one of the best lightbox scripts out there: http://colorpowered.com/colorbox/ to make it work 🙂

That’s it for now,
Enjoy!