Facebook App ID in Django

Download the src(github)

This is a tale of two app IDs. These app IDs are, more than likely, the ones that you use often. Facebook App ID and Google Analytics. If you have created a site in the last five years or so, you have used these on your site. A common problem with these App IDs is that, you need to have separate IDs based on the environment. Facebook requires a callback domain and will block requests that do not match. I have a localhost app id and then the production app id. So with Google analytics, most likely, you will not track any development traffic.

I will walk you through on how to set them up so they change between environments, without changing any settings. Also, on the two different ways to add variables to the context in Django.

Different Environments, One settings.py

This idea comes from the 12 Factor App config. The 12 factor app is a way of developing an application to minimize differences in deployment. If you have developed a Django app for Heroku, you have followed some of these rules already.

Continue reading “Facebook App ID in Django”

Facebook SDK Login for Zend Framework Tutorial part 2

Download the src(github)
View the demo

This is the second part of using the Facebook SDK as a login mechanism. The first covered how to setup each login button and how that interacted with javascript. This post will cover how the auth adapters work with the controller to verify credentials. At this point you should know how to setup a button in the application.ini.

AuthController

The controller is called from a route. The path /oauth maps to the oauthAction and /ajax maps to the ajaxAction. The main difference between these two actions is how they respond. Oauth redirects the page and ajax responds in JSON.

init()

The init() function is run every time the controller loads before any actions. This is a great place to put code that is shared between all actions. Continue reading “Facebook SDK Login for Zend Framework Tutorial part 2”

Facebook SDK and Backbone – Final Post

Download the src(github)
View the demo

This really is the final installment of this. I have shown how to use the router and views to make a site that is only one page of HTML, but still has back button functionality. Each view is tied to a Facebook API query in which I load different elements on to the page. I have a few different ways in the code that you can do this. I would like to say it is for instructional purposes, but it is actually because I was trying different methods and I did not want to go back through and update all the other views and routes.

I will show how to deal with paged data and some other tricks

Paged Facebook Data

Let’s use photos for example. To see what would be returned for an API call to /me/photos we will use the Graph API explorer. You will see that there are two top level keys data and paging. Inside of data is all the information about each photo. In the lofPictureView I loop through the photos adding them to the page

         for (photo in this.model.data)
    		{
    			var test = "<li>";
    			test += "<img src=\"" + this.model.data[photo].source + "\" class=\"fb-pics\">";
    			if(this.model.data[photo].comments){
    				test += "COMMENTS: " + this.model.data[photo].comments.data.length;
    			}
    			test += "</li>";

    			this.jQel.children('ul').append(test);
    		}

I create a list item that has an img tag and then I check for comments and let you know how many there are. If you wanted to add different information you can look through the object in the Graph API explorer and see what is available to use. Now let’s look at the paging data. This is pretty straight forward. The previous attribute has the URL for previous photos and the next has the URL for the next photos. First thing I do is see if these attributes are present and then I create a button for them.

 		
    		if(this.model.paging.previous)
    		{
	    		var prevButton = document.createElement('button');
	    		prevButton.innerHTML = 'PREVIOUS';
	    		prevButton.id = 'prevPage';
	    		this.jQel.children('div').append(prevButton);
    		}
    		
    		if(this.model.paging.next)
    		{
	    		var nextButton = document.createElement('button');
	    		nextButton.innerHTML = 'NEXT';
	    		nextButton.id = 'nextPage';
	    		this.jQel.children('div').append(nextButton);
    		}

Earlier in the Backbone view object we created click events for a button that has the id of prevPage and a button that has the id of nextPage that call functions with the same name as each id.

		events: {
			'click button#nextPage' : 'nextPage',
			'click button#prevPage'	: 'prevPage'
		},

Inside of these functions is the first gotcha. I am using jQuery’s getJson function. We want this to be JSONP and not plain old JSON. Why JSONP? Remy Sharp explains it best, “JSONP is script tag injection, passing the response from the server in to a user specified function”. We want to use this data in an anonymous function call and we need it to be JSONP. Using jQuery’s documentation we see that if we add callback=? the request will be treated as JSONP. In my functions we add callback=? and we get an object back that we can use.

    	nextPage: function(){
    		var This = this;
			$.getJSON(this.model.paging.next + '&callback=?', function(response){
				loadPhoto(response, This.options.currUser);
			});
    	},
    	
    	prevPage: function(){
    		var This = this;
			$.getJSON(this.model.paging.previous + '&callback=?', function(response){
				loadPhoto(response, This.options.currUser);
			});
    	}

You can see that we use the data returned to load another lofPhotoView of new pictures. We also pass the cached user object through the closure This.options.currUser.

Backbone Event Target

In the lofPostView I have a list of a person’s last posts. I put an attribute of data-post-id equal to the post id so that I can retrieve it. The issue comes in when you want to have access to that element and retrieve the data-post-id attribute. Backbone passes the event as a parameter so that you can pull into your function and use it. This Stackoverflow question shows how to use it. Once you have the target you can ask for the data-post-id attribute. There is one issue with this particular setup, sometimes the click will be on a div inside the li. The div does not have the attribute so we cannot grab the data from there as it does not have the attribute. We can either put this attribute on all child elements or we can test to see if the attribute is present and if not grab it from the parent. Here is the code in the lofPostView where I do that.

    	post: function(ev){
    		if(!$(ev.target).attr('data-post-id')){
    			var postid = $(ev.target).parent('li').attr('data-post-id')
    		}else{
    			var postid = $(ev.target).attr('data-post-id');
    		}
    		window.location.hash = '/post/' + postid;
    	},

I am sure there are better ways to do what I did. If you know of one of the ways let me know. You can leave a comment or even fork the project on github.

Facebook SDK with Backbone – pt 3

Download the src(github)
View the demo

I am back to finally finish this off. We are going to dive into Backbone and how we use it to create this application. I want to note up front that this is not a great tutorial for Backbone. The reason being is that I don’t use any of the model aspects of Backbone. I use it for event binding and creating views. In this context it makes sense as our model is Facebook. Another thing to note is that this uses Backbone version 0.5.3 when as of right now it is at version 0.9. It looks like it should work after being upgraded, but I haven’t tested it yet. Well let’s get started.

Finally we are getting to the backbone of this app

Backbone

Backbone is a javascript library that creates an MVC(Model, View, Controller) structure. Earlier I said this was not a great tutorial and that is because we are only using the view and controller portions of backbone. The model is coming from Facebook. We probably could abstract this out and create a backbone model for Facebook, but I chose just to use the Facebook API directly. Continue reading “Facebook SDK with Backbone – pt 3”

Facebook SDK using only javascript – pt 2

Download the src(github)
View the demo

I know it has been awhile. Christmas came and proceeded to fill up a lot of my time. I am back, though, to finish this tutorial. We left off at the HTML skeleton. Remember this is just an outline of where we are going to put our real content. This content we will fetch from Facebook through Facebook’s SDK and then throw it up on the screen. Let’s get on to using the Facebook JavaScript SDK.

This part will cover setting up the Facebook SDK, initializing the SDK, and getting users authenticated.

Facebook SDK setup

We covered this in the last post, but I will touch on it again. We are going to use XFBML. Facebook used to have FBML, but they have deprecated this. We use XFBML to create the login button. If you look at Facebook’s Social Plugins you will see that you can implement many of them through the javascript SDK and XFBML. The last post had the old way of doing it, but here is the new updated way (it’s not much different):

<html xmlns:fb="http://ogp.me/ns/fb#">

Continue reading “Facebook SDK using only javascript – pt 2”