Django Tutorial - Video 12 - Interactive Facebook Tabs part 3

This tutorial covers building the Open Graph API calls that facilitate asking a user for permission and posting to a friends wall via the graph.


Add URL hook for channel.html to urls.py

    (r'^facebooktab/channel.html', direct_to_template, {'template': 'facebooktab/channel.html'}),

templates/facebooktab/channel.html

<script src="//connect.facebook.net/en_US/all.js"></script>

templates/facebooktab/beergifter.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<style>
#fb_header{background: url(/media/images/facebook_header.jpg) no-repeat scroll top center #000000;width:790px;height:200px;}
#fb_beers{background: url(/media/images/beer_wall_bg.jpg) repeat-y top center #000000;width:790px;}
.beer_ul{background: url(/media/images/beer_wall_shelf.png) no-repeat scroll 0 158px transparent;margin:0;padding:0 70px;width:650px;height:300px;list-style:none outside none;}
.beer_ul li{float:left;text-align:center;width:108px;}
.beer_ul li p{color:#DC0000;margin-top:30px;}
.hidden_div{display:none;}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '246888008742524', // App ID
      channelUrl : 'http://video1.hackedexistence.com/facebooktab/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
function onFacebookInitialLoginStatus(response) {
        if (response.status != "connected" || response.authResponse == null) {
                facebookLogin();
        }
        FB.api('/me/friends', function(response) {
                var friends1 = response.data;
                var friends = friends1.sort(sortByName);
                var l = friends.length;
                for (var i=0;i<l;i++) {
                        $('#friends ul').append("<li onclick=\"personSelected(" + friends[i].id + ");\"><img src=\"https://graph.facebook.com/" + friends[i].id + "/picture/\"><p>" + friends[i].name + "</p></li>");
                }
                $('#fb_beers').hide();
                $('#friends').show();
        });
}
function shareBeer(selected_beer_img, selected_beer_link, selected_beer_name, selected_beer_brewery, selected_beer_locality) {
        $('#selected_beer_image').html(selected_beer_img);
        $('#selected_beer_link').html(selected_beer_link);
        $('#selected_beer_name').html(selected_beer_name);
        $('#selected_beer_brewery').html(selected_beer_brewery);
        $('#selected_beer_locality').html(selected_beer_locality);
        FB.getLoginStatus(onFacebookInitialLoginStatus);
}
function facebookLogin() {
        FB.login(onFacebookInitialLoginStatus);
}
function sortByName(a, b) {
        var x = a.name.toLowerCase();
        var y = b.name.toLowerCase();
        return((x < y) ? -1 : ((x > y) ? 1 : 0));
}
function personSelected(person) {
        FB.ui({
                method: 'feed',
                to: person,
                name: $('#selected_beer_name').html(),
                link: $('#selected_beer_link').html(),
                picture: $('#selected_beer_image').html(),
                caption: 'Free. As in Beer.',
                description: '<center>Brewery: ' + $('#selected_beer_brewery').html() + '</center><center>Type: ' + $('#selected_beer_type').html() + '</center><center>Locality: ' + $('#selected_beer_locality').html() + '</center>'
        }, function(response) {
                if (response && response.post_id) {
                        alert('post published');
                } else {
                        alert('post failed');
                }
        });
}
</script>
<div id="fb_container">
        <div id="fb_header">
                <img src="/media/images/header_logo.png" />
        </div>
        <div id="fb_beers">
                <ul class="beer_ul">
                {% for beer in beers %}
                        <li>
                        <a href="#" onclick="shareBeer('https://video1.hackedexistence.com{{ beer.image1.url}}', 'http://nationwidebarcrawl.com/beers/{{ beer.slug }}/', '{{ beer.name }}', '{{ beer.brewery }}', '{{ beer.get_locality_display }}');"><img src="{{ beer.image1.url }}" /></a>
                        <p>{{ beer.name }}</p>
                        </li>
                {% if forloop.counter|divisibleby:"6" and not forloop.last %}</ul><ul class="beer_ul">{% endif %}
                {% endfor %}
                </ul>
        </div>
        <div id="friends" class="hidden_div">
                <ul>
                </ul>
        </div>
</div>
<div id="selected_beer_image" class="hidden_div"></div>
<div id="selected_beer_link" class="hidden_div"></div>
<div id="selected_beer_name" class="hidden_div"></div>
<div id="selected_beer_brewery" class="hidden_div"></div>
<div id="selected_beer_locality" class="hidden_div"></div>
</body>
</html>