4 - Bragging and News Feed

Next, you'll implement bragging stories into Friend Smash. This will allow players to post a message to their Timeline and to their friends' News Feed about Friend Smash. In this story, you'll also include their current score as a 1-to-many challenge.

This tutorial walks through these steps:

1. Implement the Feed Dialog
2. Deep-link feed stories

Step 1: Implement the Feed Dialog

In addition to the Challenge button implemented in the previous step, there is a 'Brag' button on the title screen. Clicking this button executes the sendBrag() method inside the ui.js file. The method is currently empty. Add this code to let a player post stories to News Feed. Be sure to replace the picture parameter with the URL where you are hosting the Friend Smash logo. You can find the logo_large.jpg file inside the sample code repository at the path friendsmash/images/.

if (gScore) {
    FB.ui({ method: 'feed',
        caption: 'I just smashed ' + gScore + ' friends! Can you beat it?',
        picture: 'http://www.friendsmash.com/images/logo_large.jpg',
        name: 'Checkout my Friend Smash greatness!'
    }, fbCallback);
}

This code first checks to see that the player has played through a game and has a latest score, then, using the same method used to invoked the Request Dialog, call FB.ui to spawn the Feed Dialog. Similar to how you spawned the Request Dialog, here you provide some parameters to the Feed Dialog which will alter its behaviour. The full list of what's available is documented here, but for this example, provide some caption text, a url to the game's logo which resides on your server and a title for the story.

Refresh your browser, play a round of Friend Smash and then click the Brag button. You should be presented with this dialog.

Click submit and then check your Timeline on Facebook. You should see the story you just shared show up at the top of your Timeline, with the appropriate text and images in place.

Step 2: Deep link feed stories

Sending

Just like requests, when a player clicks a Friend Smash story on your Timeline or in News Feed, they'll be directed to Friend Smash on canvas. In this case, it can be useful to provide some context so the player sees the same content they interacted with on Facebook.

In the example above, the game challenges friends to beat the score you achieved. It would be more interesting to your friends if the story in news feed takes them to a new game where they can smash you, the challenger, rather than another friend. This is what is referred to as deep linking.

Similar to how you embedded data into requests with the data parameter, you can embed a link parameter into News Feed posts. Then, you'll parse that link when the app launches from News Feed to give a more targeted game experience.

Add a value to the dictionary of parameters that you pass to FB.ui with the key of "link", like the example below:

FB.ui({ method: 'feed',
  caption: 'I just smashed ' + gScore + ' friends! Can you beat it?',
  picture: 'http://www.friendsmash.com/images/logo_large.jpg',
  name: 'Checkout my Friend Smash greatness!',
  link: 'https://www.friendsmash.com?challenge_brag=' + gPlayerFBID
}, fbCallback);

Be sure to remember to add a comma after the end of the name parameter tuple, as you're now adding a new parameter to the dictionary. Replace the https://www.friendsmash.com section of the URL with the public URL where you are hosting Friend Smash.

The suffix '?challenge_brag=' + gPlayerFBID contains the Facebook ID of the player posting the story; this suffix will be embedded in the News Feed story. Now, let's look at how to process an incoming person from a story.

Receiving

In the section for deep-linking with requests, you processed an incoming request with some handling code in the processIncomingRequest() method inside ui.js. You also added some code to parse the data and start a game. Now, expand this parsing code to process an incoming News Feed story.

Go to the FB.getLoginStatus method call at the bottom of the createMenu function created at the start of this guide. You will see in the callback block there's the call processIncomingRequest(), which was written previously to parse our incoming request URL. As you're expanding that function now, let's rename it to processIncomingURL().

Scroll down to where you previously defined the function body for processIncomingRequest() and rename it to processIncomingURL there too. You can now edit this function to process a URL from both a request and from a News Feed story.

Previously, you searched the incoming URL for a "app_request_type" token, which signified that the game was processing an incoming request. Now, add code to look for the challenge_brag token in the URL in addition. Make the code look like the following:

function processIncomingURL() {
    var startedGame = false;
    var urlParams = {};
    (function () {
        var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

        while (match = search.exec(query))
            urlParams[decode(match[1])] = decode(match[2]);
    })();

    var requestType = urlParams["app_request_type"];

    if (requestType == "user_to_user") {
        var requestID = urlParams["request_ids"];  

        FB.api(requestID, function(response) {
            console.log(response);
            var gChallengerID = response.from.id;
            var gChallengerName = response.from.name.split(" ")[0];
            startGame(gChallengerID, gChallengerName);
            startedGame = true;
        });
    }

    var feedStorySender = urlParams["challenge_brag"];

    if (feedStorySender) {
        FB.api(feedStorySender, function(response) {
            console.log(response);
            var gChallengerName = response.first_name;
            startGame(feedStorySender, gChallengerName);
            startedGame = true;
        });
    }

    return startedGame;
}

You can see that if it doesn't find a Request parameter attached to the URL, it then looks for the challenge_brag token which was embedded into the feed story. If it is found, the attached value is the Facebook ID of the player to smash. However,the game doesn't yet know their first name. This can be requested from the Graph via the FB.api method. There's a call to the path http://graph.facebook.com/FRIEND_ID. The reply is a response object from Facebook containing details of the friend, from which you can extract the first_name. Finally then, you have all the information needed to start a game against that player, so startGame is called.

Try this code out. Play a game of Friend Smash and send a brag onto your Timeline. Then, get another Facebook user to click on the story and follow what happens. They should hopefully be taken straight into the game and be given the opportunity to smash you back.

Next steps

Finally, lets publish Open Graph stories for high scores, achievements and Friend-Smashes