SENDING AN INVITATION 40
Creating the Invitation Form Using FBML
We’ll start building our user interface by creating a simple view:
That looks a little like HTML, but I bet you’ve never seen those tags before. What you’re seeing is the Facebook Markup Language (FBML). FBML is one of the most powerful features of the Facebook platform. It acts as an extension to HTML that gives you some prebuilt user inter-face components. FBML is translated into normal HTML when Face-book processes your page. We’ll see a little bit of FBML here and will cover it in great detail in Chapter 5, Getting Into the Facebook Canvas, on page 85.
Before we get into the details of how the view works, let’s see what it does. Start up script/server, and then open a browser to your invitation page.8 Make sure you’re logged in as one of your test users. After click-ing Allow on the authorization page, you should see something that looks like Figure 2.1, on the next page. If you don’t, make sure you’ve copied the code exactly. You should also make sure the test user you’re using has at least one friend.
That’s pretty impressive for just a few simple lines of code! Since there are only three different FBML tags in our view, let’s look at each one. The ﬁrst tag, , is similar to the tag. It marks the start of an FBML document. Your canvas pages will still work without the tag, but it is required for proﬁle pages. It’s best to get into the habit of always wrapping your pages in an tag.
The next tag, ,starts a special type of Facebook form. This special form allows your application to create Facebook requests.
SENDING AN INVITATION 41
Figure 2.1: Our Facebook invitation page
It takes most of the normal form parameters such as action and method along with three additional parameters: type, invite, and content. The type parameter speciﬁes what text shows up on the submit button. It’s used to tell users what type of request they are sending. The invite parameter simply changes the title of the message. If invite is set to true, the title reads “You have a Karate Poke invitation.” When set to false, it reads “You have a Karate Poke request.” Finally, the content parameter gives the body of the message that is sent to the selected users.
The ﬁnal tag, , is responsible for rendering the actual friend selector. Facebook provides several different friend selectors. They all achieve the same goal but have different interfaces. This selector allows you to click images for your friends and includes multiple tabs. We’ll look at another friend selector in Section 5.1, Build-ing Our First Form, on page 86.
SENDING AN INVITATION 42
Working with Multiple Users
Since Facebook is a social platform,you should planto spend a lot of timeusing two accounts. We’llspenda lot of time sending requests and notiﬁcations between two users. You’ll get really frustrated if you have to log out of one account and log in to another every time you want to view the invitation you just sent.
To make life a little easier, I normally use two different browsers, either Firefoxand Safarior Firefox andInternetExplorer depend-ing upon my current development platform. This will allow you to stay logged in to both accounts at once. As a bonus, you can test your CSS in multiple browsers at the same time too!
If it feels like I’m going really fast, don’t worry. We have only a few more FBML tags to examine. After that, we won’t learn any new FBML until we get to Chapter 5, Getting Into the Facebook Canvas, on page 85. If you want to learn more before then, you can ﬁnd a wealth of informa-tion about FBML on the Facebook wiki.9
So, let’s try the invitation functionality. (The Skip button doesn’t work yet, but it will later when we revisit invitations in Section 6.4, Spreading by Invitation, on page 128.) Use the friend selector to send a request to one of your test accounts. We set the action of the form to new_invitation_ path, so we’ll end up right back on this page after sending an invitation. Try that now. It’s pretty hard to tell that your request was sent. Let’s make a note to ﬁx that later.
Now that we’ve sent a request, let’s see what it looks like for the recip-ient. Log in as the user you sent the request to, and take a look at the upper-right corner of your home page.10 You should see a message telling you that you have a new request. When you click that message, you will be taken to a page where you can see the request. Our request is a little boring. It certainly doesn’t invite you to interact with our appli-cation. It would be much nicer if the request asked you to take some action.
We have a basic invitation page working, but it’s confusing for the sender and boring for the recipient. We’ll make things less confusing for the sender next.
10. By home page, I mean http://www.facebook.com/home.php.
GIVING THE SENDER SOME FEEDBACK 43
2.3 Giving the Sender Some Feedback
Let’s change our invitation form to tell the sender to whom they sent an invitation.
Earlier, I mentioned that takes the normal form parameters. One of those parameters, action, controls where the user is directed when the form is submitted. Let’s change our controller to have a create method and send the user there.
Let’s change new.erb to post the form to the create action:
Now we’re ready to implement the create action. As part of the invitation process, Facebook will send our application the list of recipients for our invitation. We get this list in the ids parameter. Let’s take this list of IDs and display it to the screen:
@sent_to_ids = params[:ids] end
Now that we have a list of users, we need a view to display them. Rails is going to try to render create.erb, so let’s create that ﬁle in app/views/invitations:
<% for user in @sent_to_ids %> <%= user %>
<% end %>
<%= link_to "Send another invitation",new_invitation_path %>
Give it a try! After you send an invitation, you should see a list of inte-gers on your screen. Those are the Facebook IDs of our invitation’s recipients. Facebook uniquely identiﬁes each user with an integer ID.
MAKING OUR INVITATION INTERACTIVE 44
Showing the IDs is a little bit better than just showing the form again, but not much. Instead of showing the user IDs, let’s show the users’ names and proﬁle pictures.
We could ask Facebook to give us this information (we’ll learn how in Section 3.7, Using the Facebook API, on page 69), but instead, we’ll make Facebook do the work for us. We can use two special FBML tags here: and . Both take a uid parameter that tells Facebook which user’s information to show:
<% for id in @sent_to_ids%>
<% end %>
OK, try it. You should see the image of the friend to whom you sent the request. In general, we want to make Facebook do as much work as possible. It’s not just because we’re lazy but also because it will make our pages load faster. We’ll use FBML instead of the API whenever we get the chance. With that ﬁnished, let’s move on to making our requests more interactive.
2.4 Making Our Invitation Interactive
We have made our invitation-sending system more interesting for the sender, but the recipient still can’t do anything with it. Let’s add a button to the request. We’ll use yet another FBML tag, , to add a Send Invitation button to our message.
is a simple tag that works a lot like a link. You provide a URL and a label, and Facebook will render a button in the request. Let’s add a button to our request that takes the user to our invitation form. We’ll also include the ID of the sender in our request so that we can track who invites the most users.
First, we’re going to need to get the Facebook ID of the sender. Let’s create a new action in invitations_controller.rb to get this data. We can get the user ID from Facebook using the facebook_session object. We’ll talk more about what this does in Section 2.5, Updating the Proﬁle, on the following page.
nguon tai.lieu . vn