Another advantage of a responsive layout

When I decided to make my page responsive I thought about mobile devices and pads, but I did not think of Facebook tabs or apps.

Today I wanted to freshen up my Facebook Fanpage a little bit, just pointed Facebook to the url et voila, it works (of course… except with SSL, I don’t have yet). But…

The iframe container of a Facebook tab has a width of 520px and a height of 800px. This is a problem, because most websites have a fluid height. Facebook apps have a setting fluid height, but with that turned on you just get annoying scrollbars. The solution for this:

1. Use the Facebook setting “Settable Height’ (under advanced settings)
2. Use the javascript sdk to set the canvas height

Init the Facebook Sdk and set the height… The code is using jQuery, you should wait till the dom is ready…

$("body").prepend('<div id="fb-root"></div>');

window.fbAsyncInit = function() {
            FB.init({
              appId      : 'xxxxxxxxxxxxx', // App ID
              status     : true, // check login status
              cookie     : true, // enable cookies to allow the server to access the session
              xfbml      : true  // parse XFBML
            });
            FB.Canvas.setSize({ height: $(document).height() });    
            // Additional initialization code here
          };

          // Load the SDK Asynchronously
          (function(d){
             var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
             js = d.createElement('script'); js.id = id; js.async = true;
             js.src = "//connect.facebook.net/en_US/all.js";
             d.getElementsByTagName('head')[0].appendChild(js);
           }(document));

So now the iframe should get resized when the page is loaded. But you do not want to do this on your regular page, so how do you find out if you are on Facebook?

This depends on which framework, blog system or cms you are using. I used Drupal, so I will post my solution for this case and you can adopt it for your case.

I created a small custom module which loads the javascript if the query string fb is true.

´´´php /* * implementation hookinit() in module fbresize */ function fbresizeinit() { if(isset($GET[‘fb’]) && $GET[‘fb’] == "true”) { if(!defined(“FB”)) define(‘FB’, true); drupaladdjs(drupalgetpath(‘module’, ‘fbresize’) .‘/fbresize.js’); } } “`

Then you have to append the ?fb=true to every link you want to open inside facebook: Drupal 7: php /* * implementation hook_outbound_alter() in module fb_resize */ function fb_resize_url_outbound_alter(&$path, &$options, $original_path) { if(defined('FB')) { $options['query'][] = array("fb" => "true"); } }

What if you also have links that are not generated by Drupal or external links? I used jQuery for it, I also prevented links to images: ”`javascript $(“a”).each(function() { var href = $(this).attr(“href”); if(href == undefined) return;

        var processedReg = /fb=/gi;
        var internalReg = /krisdigital.com/g;
        var imgReg = /(.jpg|.png|.gif)/g;

        if(href.match(imgReg)) $(this).attr("href", "#");

        if(!href.match(processedReg)) {
            if(href.match(internalReg)) {
                var add = "fb=true";
                if(href.indexOf("?") == -1) {
                    add = "?" + add;
                }
                else add = "&" + add;
                href += add;
            }
            else {
                $(this).attr("target", "_blank");
            }

            $(this).attr("href", href);
        }
    });

So that's it, your new custom fan page tab!