What do you do when you have a Facebook app tab (inside an iframe, mind you) that’s externally linkable? Pop-in.
Let’s break this down.
if (self === top) {
This conditional will be true when the browser is not inside an iframe.
window.location.href = 'https://www.facebook.com/test/app_1234';
If we are not inside an iframe, then redirect to the following URL.
If you haven’t noticed, you can’t use anchor links:
<a href="#hello">Go to id="hello"</a>
Inside Facebook Apps (Page tab, Canvas app, etc). So I wrote a little snippet that emulates this behaviour by using FB.Canvas.scrollTo(x, y);
/*
anchorlinks-fbcanvas.js
Enables anchor links (<a href="#hello">Go to id="hello"</a>) in
Facebook Canvas (page tabs, canvas app, etc)
Requires: jQuery, Facebook JS SDK
*/
jQuery(function($) {
$('a').filter(function() {
return $(this).attr('href').match(/^#/);
}).each(function(i, el) {
$(el).click(function(e) {
e.preventDefault();
var elementId = $(el).attr('href').replace(/^#(.*)/, '$1');
var $goTo = $(document.getElementById(elementId));
FB.Canvas.scrollTo(0, $goTo.offset().top);
});
});
});
Been wondering how to simply retina-ize your website? Put this at the end of your site:
$(function() {
try {
if (window.matchMedia('(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)').matches) {
$('.autoRetina').each(function(i, e) {
var orig_src = $(e).attr('src');
var new_src = orig_src.replace(/^(.*?).(png|jpe?g|gif)$/i, '$1@2x.$2');
$(e).attr('src', new_src);
});
}
} catch (e) {}
});
If you’re on a Retina-equipped device, your images with the autoRetina class will automatically be replaced with their Retina counterparts. If you’re familiar with iOS development, you’ll feel right at home. If you have no clue what I’m talking about, just append @2x at the end of the filename (before the extension).
If you want to apply it to all your images (do this only if you have Retina images for all of them!), replace $('.autoRetina').each( with $('img').each(
Caveat emptor: uses jQuery. Don’t judge.