Facebook Latest Episode Bookmarklet

atlasapi-snippet.js

var pageTitle = urlencode($('#profile_name').text());
var currentLocation = 'us';

$.getJSON('http://atlasapi.org/2.0/brands.json?title='+pageTitle+'&availableCountries='+currentLocation+'&limit=1&callback=?',
    function(data) {
        console.log(data);
    }
);

fb-bookmarklet-src.js

var s=document.createElement('script');
s.setAttribute('src','http://jquery.com/src/jquery-latest.js');
document.getElementsByTagName('body')[0].appendChild(s);

function jqueryWait() { 
    if(typeof window.jQuery == 'undefined') { 
        window.setTimeout(jqueryWait,100); 
    } else{ 
        $ = window.jQuery; 
        doJQuery(); 
    } 
}

function doJQuery() {
    // Make a call to the Atlas API to get the current page's brand and latest episodes
    // Restrict the returned media locations by a location (try 'us' and 'uk')
    var pageTitle = urlencode($('#profile_name').text());
    var currentLocation = 'us';
    
    $.getJSON('http://atlasapi.org/2.0/brands.json?title='+pageTitle+'&availableCountries='+currentLocation+'&limit=1&callback=?',
    function(data) {
        // Don't do anything if the tv_show isn't available in the current country
        if (data && data.playlists && data.playlists[0]) {
            var playlist = data.playlists[0];
            
            // Get the latest episode. This isn't really necessary, but shows you how
            var latestEpisode;
            var latestEpisodeNumber = 0;
            var latestSeriesNumber = 0;

            for (i=0;i<playlist.items.length;i++) {
                var item = playlist.items[i];
                var episodeNumber = parseInt(item.episode_number);
                var seriesNumber = parseInt(item.series_number);

                if (latestEpisode == null || (seriesNumber >= latestSeriesNumber && episodeNumber > latestEpisodeNumber)) {
                    latestEpisode = item;
                    latestEpisodeNumber = episodeNumber;
                    latestSeriesNumber = seriesNumber;
                }
            }
        
            var embedLocation = null;
            var linkLocation = null;
        
            // Retrieve the embedable media location along with the broadcaster's playback page
            for (i=0;i<latestEpisode.locations.length;i++) {
                var location = latestEpisode.locations[i];
                if (location.transport_type == 'embed') {
                    embedLocation = location;
                } else if (location.transport_type == 'link') {
                    linkLocation = location
                }
            }
        
            var linkOff = (linkLocation && latestEpisode.publisher
                ? "<br /><a href='"+linkLocation.uri+"' target='_blank'>Watch it on "+latestEpisode.publisher+"</a>"
                : "");
            var videoLink = (embedLocation 
                ? "<a id='atlas_video' style='margin-left:30px' class='uiVideoThumb'>" 
                : "<a href='"+linkLocation.uri+"'style='margin-left:30px' target='_blank' class='uiVideoThumb'>");
            
            var titleHtml = "<h5 class='box_header UITitle UITitle_h5'>Latest Episode</h5>"
                + "<p style='padding:5px;'><strong>"+latestEpisode.title+"</strong></p>";
            var videoHtml = videoLink+"<img src='"+latestEpisode.image+"' /><i></i></a>";
            var descriptionHtml = "<p style='padding:5px;'>"+latestEpisode.description+linkOff+"</p>";
            var moduleHtml = "<div class='box basic_info_summary'>"+titleHtml+videoHtml+descriptionHtml+"</div>";

            var parentElement = $('#profile_blurb');
            if (!parentElement.length) {
                parentElement = $('#basic_info_summary_box');
            }
            parentElement.parent().prepend(moduleHtml);

            $('#atlas_video').click(function() {
                var videoSrc="<div id='atlas_embeded_video'>"+embedLocation.embed_code+"</div>";
                if ($('#atlas_embeded_video').length) {
                    $('#atlas_embeded_video').remove();
                }
                $(videoSrc).prependTo('#pagelet_tab_content');
            
                return false;
            });
        }
    });
}

function urlencode(str) {
    return escape(str).replace('+', '%2B').replace('%20', '+').replace('*', '%2A').replace('/', '%2F').replace('@', '%40');
}

jqueryWait();

fb-bookmarklet-uk

javascript:var%20s=document.createElement(%27script%27);s.setAttribute(%27src%27,%27http://jquery.com/src/jquery-latest.js%27);document.getElementsByTagName(%27body%27)[0].appendChild(s);function%20jqueryWait()%20{if(typeof%20window.jQuery%20==%20%27undefined%27)%20{window.setTimeout(jqueryWait,100);}%20else{$%20=%20window.jQuery;doJQuery();}}function%20doJQuery()%20{var%20pageTitle%20=%20urlencode($(%27#profile_name%27).text());var%20currentLocation%20=%20%27uk%27;$.getJSON(%27http://atlasapi.org/2.0/brands.json?title=%27+pageTitle+%27&availableCountries=%27+currentLocation+%27&limit=1&callback=?%27,function(data)%20{if%20(data%20&&%20data.playlists%20&&%20data.playlists[0])%20{var%20playlist%20=%20data.playlists[0];var%20latestEpisode;var%20latestEpisodeNumber%20=%200;var%20latestSeriesNumber%20=%200;for%20(i=0;i<playlist.items.length;i++)%20{var%20item%20=%20playlist.items[i];var%20episodeNumber%20=%20parseInt(item.episode_number);var%20seriesNumber%20=%20parseInt(item.series_number);if%20(latestEpisode%20==%20null%20||%20(seriesNumber%20>=%20latestSeriesNumber%20&&%20episodeNumber%20>%20latestEpisodeNumber))%20{latestEpisode%20=%20item;latestEpisodeNumber%20=%20episodeNumber;latestSeriesNumber%20=%20seriesNumber;}}var%20embedLocation%20=%20null;var%20linkLocation%20=%20null;for%20(i=0;i<latestEpisode.locations.length;i++)%20{var%20location%20=%20latestEpisode.locations[i];if%20(location.transport_type%20==%20%27embed%27)%20{embedLocation%20=%20location;}%20else%20if%20(location.transport_type%20==%20%27link%27)%20{linkLocation%20=%20location}}var%20linkOff%20=%20(linkLocation%20&&%20latestEpisode.publisher?%20%22<br%20/><a%20href=%27%22+linkLocation.uri+%22%27%20target=%27_blank%27>Watch%20it%20on%20%22+latestEpisode.publisher+%22</a>%22:%20%22%22);var%20videoLink%20=%20(embedLocation?%20%22<a%20id=%27atlas_video%27%20style=%27margin-left:30px%27%20class=%27uiVideoThumb%27>%22:%20%22<a%20href=%27%22+linkLocation.uri+%22%27style=%27margin-left:30px%27%20target=%27_blank%27%20class=%27uiVideoThumb%27>%22);var%20titleHtml%20=%20%22<h5%20class=%27box_header%20UITitle%20UITitle_h5%27>Latest%20Episode</h5>%22+%20%22<p%20style=%27padding:5px;%27><strong>%22+latestEpisode.title+%22</strong></p>%22;var%20videoHtml%20=%20videoLink+%22<img%20src=%27%22+latestEpisode.image+%22%27%20/><i></i></a>%22;var%20descriptionHtml%20=%20%22<p%20style=%27padding:5px;%27>%22+latestEpisode.description+linkOff+%22</p>%22;var%20moduleHtml%20=%20%22<div%20class=%27box%20basic_info_summary%27>%22+titleHtml+videoHtml+descriptionHtml+%22</div>%22;var%20parentElement%20=%20$(%27#profile_blurb%27);if%20(!parentElement.length)%20{parentElement%20=%20$(%27#basic_info_summary_box%27);}parentElement.parent().prepend(moduleHtml);$(%27#atlas_video%27).click(function()%20{var%20videoSrc=%22<div%20id=%27atlas_embeded_video%27>%22+embedLocation.embed_code+%22</div>%22;if%20($(%27#atlas_embeded_video%27).length)%20{$(%27#atlas_embeded_video%27).remove();}$(videoSrc).prependTo(%27#pagelet_tab_content%27);return%20false;});}});}function%20urlencode(str)%20{return%20escape(str).replace(%27+%27,%20%27%2B%27).replace(%27%20%27,%20%27+%27).replace(%27*%27,%20%27%2A%27).replace(%27/%27,%20%27%2F%27).replace(%27@%27,%20%27%40%27);}jqueryWait();

fb-bookmarklet-us

javascript:var%20s=document.createElement(%27script%27);s.setAttribute(%27src%27,%27http://jquery.com/src/jquery-latest.js%27);document.getElementsByTagName(%27body%27)[0].appendChild(s);function%20jqueryWait()%20{if(typeof%20window.jQuery%20==%20%27undefined%27)%20{window.setTimeout(jqueryWait,100);}%20else{$%20=%20window.jQuery;doJQuery();}}function%20doJQuery()%20{var%20pageTitle%20=%20urlencode($(%27#profile_name%27).text());var%20currentLocation%20=%20%27us%27;$.getJSON(%27http://atlasapi.org/2.0/brands.json?title=%27+pageTitle+%27&availableCountries=%27+currentLocation+%27&limit=1&callback=?%27,function(data)%20{if%20(data%20&&%20data.playlists%20&&%20data.playlists[0])%20{var%20playlist%20=%20data.playlists[0];var%20latestEpisode;var%20latestEpisodeNumber%20=%200;var%20latestSeriesNumber%20=%200;for%20(i=0;i<playlist.items.length;i++)%20{var%20item%20=%20playlist.items[i];var%20episodeNumber%20=%20parseInt(item.episode_number);var%20seriesNumber%20=%20parseInt(item.series_number);if%20(latestEpisode%20==%20null%20||%20(seriesNumber%20>=%20latestSeriesNumber%20&&%20episodeNumber%20>%20latestEpisodeNumber))%20{latestEpisode%20=%20item;latestEpisodeNumber%20=%20episodeNumber;latestSeriesNumber%20=%20seriesNumber;}}var%20embedLocation%20=%20null;var%20linkLocation%20=%20null;for%20(i=0;i<latestEpisode.locations.length;i++)%20{var%20location%20=%20latestEpisode.locations[i];if%20(location.transport_type%20==%20%27embed%27)%20{embedLocation%20=%20location;}%20else%20if%20(location.transport_type%20==%20%27link%27)%20{linkLocation%20=%20location}}var%20linkOff%20=%20(linkLocation%20&&%20latestEpisode.publisher?%20%22<br%20/><a%20href=%27%22+linkLocation.uri+%22%27%20target=%27_blank%27>Watch%20it%20on%20%22+latestEpisode.publisher+%22</a>%22:%20%22%22);var%20videoLink%20=%20(embedLocation?%20%22<a%20id=%27atlas_video%27%20style=%27margin-left:30px%27%20class=%27uiVideoThumb%27>%22:%20%22<a%20href=%27%22+linkLocation.uri+%22%27style=%27margin-left:30px%27%20target=%27_blank%27%20class=%27uiVideoThumb%27>%22);var%20titleHtml%20=%20%22<h5%20class=%27box_header%20UITitle%20UITitle_h5%27>Latest%20Episode</h5>%22+%20%22<p%20style=%27padding:5px;%27><strong>%22+latestEpisode.title+%22</strong></p>%22;var%20videoHtml%20=%20videoLink+%22<img%20src=%27%22+latestEpisode.image+%22%27%20/><i></i></a>%22;var%20descriptionHtml%20=%20%22<p%20style=%27padding:5px;%27>%22+latestEpisode.description+linkOff+%22</p>%22;var%20moduleHtml%20=%20%22<div%20class=%27box%20basic_info_summary%27>%22+titleHtml+videoHtml+descriptionHtml+%22</div>%22;var%20parentElement%20=%20$(%27#profile_blurb%27);if%20(!parentElement.length)%20{parentElement%20=%20$(%27#basic_info_summary_box%27);}parentElement.parent().prepend(moduleHtml);$(%27#atlas_video%27).click(function()%20{var%20videoSrc=%22<div%20id=%27atlas_embeded_video%27>%22+embedLocation.embed_code+%22</div>%22;if%20($(%27#atlas_embeded_video%27).length)%20{$(%27#atlas_embeded_video%27).remove();}$(videoSrc).prependTo(%27#pagelet_tab_content%27);return%20false;});}});}function%20urlencode(str)%20{return%20escape(str).replace(%27+%27,%20%27%2B%27).replace(%27%20%27,%20%27+%27).replace(%27*%27,%20%27%2A%27).replace(%27/%27,%20%27%2F%27).replace(%27@%27,%20%27%40%27);}jqueryWait();

index.html

<html>  
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Facebook Bookmarklet</title>
</head>
<body id="index" onload="">
    <h1 id="">Facebook Bookmarklet</h1>
    
    <p>This bookmarklet shows how you can use the <a href="http://docs.atlasapi.org">Atlas API</a> to get a TV show's latest episodes on its Facebook page.</p>
    <p>Drag the following links to your bookmark manager:
        <ul>
            <li><a href="javascript:var%20s=document.createElement(%27script%27);s.setAttribute(%27src%27,%27http://jquery.com/src/jquery-latest.js%27);document.getElementsByTagName(%27body%27)[0].appendChild(s);function%20jqueryWait()%20{if(typeof%20window.jQuery%20==%20%27undefined%27)%20{window.setTimeout(jqueryWait,100);}%20else{$%20=%20window.jQuery;doJQuery();}}function%20doJQuery()%20{var%20pageTitle%20=%20urlencode($(%27#profile_name%27).text());var%20currentLocation%20=%20%27us%27;$.getJSON(%27http://atlasapi.org/2.0/brands.json?title=%27+pageTitle+%27&availableCountries=%27+currentLocation+%27&limit=1&callback=?%27,function(data)%20{if%20(data%20&&%20data.playlists%20&&%20data.playlists[0])%20{var%20playlist%20=%20data.playlists[0];var%20latestEpisode;var%20latestEpisodeNumber%20=%200;var%20latestSeriesNumber%20=%200;for%20(i=0;i<playlist.items.length;i++)%20{var%20item%20=%20playlist.items[i];var%20episodeNumber%20=%20parseInt(item.episode_number);var%20seriesNumber%20=%20parseInt(item.series_number);if%20(latestEpisode%20==%20null%20||%20(seriesNumber%20>=%20latestSeriesNumber%20&&%20episodeNumber%20>%20latestEpisodeNumber))%20{latestEpisode%20=%20item;latestEpisodeNumber%20=%20episodeNumber;latestSeriesNumber%20=%20seriesNumber;}}var%20embedLocation%20=%20null;var%20linkLocation%20=%20null;for%20(i=0;i<latestEpisode.locations.length;i++)%20{var%20location%20=%20latestEpisode.locations[i];if%20(location.transport_type%20==%20%27embed%27)%20{embedLocation%20=%20location;}%20else%20if%20(location.transport_type%20==%20%27link%27)%20{linkLocation%20=%20location}}var%20linkOff%20=%20(linkLocation%20&&%20latestEpisode.publisher?%20%22<br%20/><a%20href=%27%22+linkLocation.uri+%22%27%20target=%27_blank%27>Watch%20it%20on%20%22+latestEpisode.publisher+%22</a>%22:%20%22%22);var%20videoLink%20=%20(embedLocation?%20%22<a%20id=%27atlas_video%27%20style=%27margin-left:30px%27%20class=%27uiVideoThumb%27>%22:%20%22<a%20href=%27%22+linkLocation.uri+%22%27style=%27margin-left:30px%27%20target=%27_blank%27%20class=%27uiVideoThumb%27>%22);var%20titleHtml%20=%20%22<h5%20class=%27box_header%20UITitle%20UITitle_h5%27>Latest%20Episode</h5>%22+%20%22<p%20style=%27padding:5px;%27><strong>%22+latestEpisode.title+%22</strong></p>%22;var%20videoHtml%20=%20videoLink+%22<img%20src=%27%22+latestEpisode.image+%22%27%20/><i></i></a>%22;var%20descriptionHtml%20=%20%22<p%20style=%27padding:5px;%27>%22+latestEpisode.description+linkOff+%22</p>%22;var%20moduleHtml%20=%20%22<div%20class=%27box%20basic_info_summary%27>%22+titleHtml+videoHtml+descriptionHtml+%22</div>%22;var%20parentElement%20=%20$(%27#profile_blurb%27);if%20(!parentElement.length)%20{parentElement%20=%20$(%27#basic_info_summary_box%27);}parentElement.parent().prepend(moduleHtml);$(%27#atlas_video%27).click(function()%20{var%20videoSrc=%22<div%20id=%27atlas_embeded_video%27>%22+embedLocation.embed_code+%22</div>%22;if%20($(%27#atlas_embeded_video%27).length)%20{$(%27#atlas_embeded_video%27).remove();}$(videoSrc).prependTo(%27#pagelet_tab_content%27);return%20false;});}});}function%20urlencode(str)%20{return%20escape(str).replace(%27+%27,%20%27%2B%27).replace(%27%20%27,%20%27+%27).replace(%27*%27,%20%27%2A%27).replace(%27/%27,%20%27%2F%27).replace(%27@%27,%20%27%40%27);}jqueryWait();">fb-us-bookmarklet</a></li>
            <li><a href="javascript:var%20s=document.createElement(%27script%27);s.setAttribute(%27src%27,%27http://jquery.com/src/jquery-latest.js%27);document.getElementsByTagName(%27body%27)[0].appendChild(s);function%20jqueryWait()%20{if(typeof%20window.jQuery%20==%20%27undefined%27)%20{window.setTimeout(jqueryWait,100);}%20else{$%20=%20window.jQuery;doJQuery();}}function%20doJQuery()%20{var%20pageTitle%20=%20urlencode($(%27#profile_name%27).text());var%20currentLocation%20=%20%27uk%27;$.getJSON(%27http://atlasapi.org/2.0/brands.json?title=%27+pageTitle+%27&availableCountries=%27+currentLocation+%27&limit=1&callback=?%27,function(data)%20{if%20(data%20&&%20data.playlists%20&&%20data.playlists[0])%20{var%20playlist%20=%20data.playlists[0];var%20latestEpisode;var%20latestEpisodeNumber%20=%200;var%20latestSeriesNumber%20=%200;for%20(i=0;i<playlist.items.length;i++)%20{var%20item%20=%20playlist.items[i];var%20episodeNumber%20=%20parseInt(item.episode_number);var%20seriesNumber%20=%20parseInt(item.series_number);if%20(latestEpisode%20==%20null%20||%20(seriesNumber%20>=%20latestSeriesNumber%20&&%20episodeNumber%20>%20latestEpisodeNumber))%20{latestEpisode%20=%20item;latestEpisodeNumber%20=%20episodeNumber;latestSeriesNumber%20=%20seriesNumber;}}var%20embedLocation%20=%20null;var%20linkLocation%20=%20null;for%20(i=0;i<latestEpisode.locations.length;i++)%20{var%20location%20=%20latestEpisode.locations[i];if%20(location.transport_type%20==%20%27embed%27)%20{embedLocation%20=%20location;}%20else%20if%20(location.transport_type%20==%20%27link%27)%20{linkLocation%20=%20location}}var%20linkOff%20=%20(linkLocation%20&&%20latestEpisode.publisher?%20%22<br%20/><a%20href=%27%22+linkLocation.uri+%22%27%20target=%27_blank%27>Watch%20it%20on%20%22+latestEpisode.publisher+%22</a>%22:%20%22%22);var%20videoLink%20=%20(embedLocation?%20%22<a%20id=%27atlas_video%27%20style=%27margin-left:30px%27%20class=%27uiVideoThumb%27>%22:%20%22<a%20href=%27%22+linkLocation.uri+%22%27style=%27margin-left:30px%27%20target=%27_blank%27%20class=%27uiVideoThumb%27>%22);var%20titleHtml%20=%20%22<h5%20class=%27box_header%20UITitle%20UITitle_h5%27>Latest%20Episode</h5>%22+%20%22<p%20style=%27padding:5px;%27><strong>%22+latestEpisode.title+%22</strong></p>%22;var%20videoHtml%20=%20videoLink+%22<img%20src=%27%22+latestEpisode.image+%22%27%20/><i></i></a>%22;var%20descriptionHtml%20=%20%22<p%20style=%27padding:5px;%27>%22+latestEpisode.description+linkOff+%22</p>%22;var%20moduleHtml%20=%20%22<div%20class=%27box%20basic_info_summary%27>%22+titleHtml+videoHtml+descriptionHtml+%22</div>%22;var%20parentElement%20=%20$(%27#profile_blurb%27);if%20(!parentElement.length)%20{parentElement%20=%20$(%27#basic_info_summary_box%27);}parentElement.parent().prepend(moduleHtml);$(%27#atlas_video%27).click(function()%20{var%20videoSrc=%22<div%20id=%27atlas_embeded_video%27>%22+embedLocation.embed_code+%22</div>%22;if%20($(%27#atlas_embeded_video%27).length)%20{$(%27#atlas_embeded_video%27).remove();}$(videoSrc).prependTo(%27#pagelet_tab_content%27);return%20false;});}});}function%20urlencode(str)%20{return%20escape(str).replace(%27+%27,%20%27%2B%27).replace(%27%20%27,%20%27+%27).replace(%27*%27,%20%27%2A%27).replace(%27/%27,%20%27%2F%27).replace(%27@%27,%20%27%40%27);}jqueryWait();">fb-uk-bookmarklet</a></li>
        </ul>
    </p>
    <p>Then go to the Facebook page for different TV shows and click on the bookmarklets. Assuming that show currently has an available episode, it will be added it to the left-hand nav. Please make sure you refresh the page before running the bookmarklet. Try these shows (the US bookmarklet tends to have more luck):
        <ul>
            <li><a href="http://www.facebook.com/Glee">Glee</a></li>
            <li><a href="http://www.facebook.com/TheSimpsons">The Simpsons</a></li>
            <li><a href="http://www.facebook.com/FamilyGuy">Family Guy</a></li>
        </ul>
    </p>
    <p>Depending upon the available type media for an episode, you'll either be able to watch the episode embedded in the page, or be sent to the publisher's site.</p>
    <p>I've embedded the source at the bottom of the page. As you can see, the actual API call is pretty simple:</p>
    <script src="http://gist.github.com/461362.js?file=atlasapi-snippet.js"></script>
    <p>And here's the full source.</p>
    <script src="http://gist.github.com/461362.js?file=fb-bookmarklet-src.js"></script>
</body>
</html>

Save the appropriate bookmarklet as a bookmark (with the url being the long javascript string).

When you go to a TV Show's Facebook page (make sure you're on the 'Wall' tab') and click on the bookmark, the latest episode for that show will be inserted into left-hand nav. You can then watch the full episode, either embeded within the page, or in a new window if the broadcaster doesn't provide an embed code.

This uses http://docs.atlasapi.org to retrieve information about tv shows and restrict the media to the specified location.