The following snippet of code will load the Javascript SDK. You should insert it directly after the opening <body> tag on each page you want to load it:
<script>
(function(){window.teak=window.teak||[];window.teak.methods=["init","identify","postAction","postAchievement","postHighScore","canMakeFeedPost","popupFeedPost","reportNotificationClick","reportFeedClick","sendRequest","acceptRequest"];window.teak.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);window.teak.push(t);return window.teak}};for(var e=0;e<window.teak.methods.length;e++){var t=window.teak.methods[e];window.teak[t]=window.teak.factory(t)}var n=document.createElement("script");n.type="text/javascript";n.async=true;n.src="//d2h7sc2qwu171k.cloudfront.net/teak.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(n,r)})()
window.teak.init("YOUR_APP_ID", "YOUR_APP_TOKEN");
</script>
When you paste it, you'll need to replace YOUR_APP_ID and YOUR_APP_TOKEN with your Teak app's id and token, which can be found on the Settings page.
The identify method is how you tell Teak who the current user is. It includes a unique User ID and the user's Facebook ID or active Facebook Access Token.
Why have a separate User ID? Teak uses the unique User ID you provide to identify the user in server-to-server communication. When we need to make callbacks to your servers, we will use the unique User ID which you give us. We use their Facebook ID or active Facebook Access Token so we can properly identify the user with Facebook.
Here's what a basic call to identify might look like:
<script>
window.fbAsyncInit = function() {
// Standard Facebook initialization...
FB.getLoginStatus(function(response) {
if (response.status ==== "connected") {
window.teak.identify("UNIQUE_USER_ID", response.authResponse.accessToken);
}
});
};
</script>
You can now begin posting with Teak. Teak has five primary kinds of posting, which will be used in different circumstances depending on your goals and needs.
Posting Custom Open Graph Stories: You post Custom Open Graph Stories through Teak using the postAction call. Here is an example of a simple postAction call
// The first parameter is the action type, also known as the "verb."
// The second parameter is the object type, also known as the "noun."
// The third parameter is the unique identifier for an instance declared in the CMS.
window.teak.postAction("complete", "level", "5");
This would post that the user completed the level identified by "5" in the CMS.
If you are unsure of what the postAction call should be you can use the Code button next to each instance in the CMS. It will bring up a dialog with the call to postAction necessary to make the post.
Posting Explicit Custom Open Graph Stories: Explicit Custom Open Graph Stories are stories which are published after the user has been given the chance to opt out of posting the story, for example via a checkbox asking if they would like to share that they have completed a level. Explict Custom Open Graph Stories get wider distribution and are the preferred way of using Open Graph. They are also posted using the postAction call, but with an additional parameter. Here is an example:
// The fourth parameter is a dictionary of data specific to the current call to postAction
window.teak.postAction("complete", "level", "5", {"fb:explicitly_shared" : "true"});
If the user chose not to share we strongly encourage you to make a call to postAction with the "teak:no_post" parameter set to true. For example:
window.teak.postAction("complete", "level", "5", {"teak:no_post" : "true"});
This will allow Teak to track and report how many users are opting out of sharing.
Templated Custom Open Graph Stories: Sometimes you may want to insert dynamic data into your posts, such as the user's name, or the score they got on the level. This data is also passed in through the additional properties parameter, for example:
window.teak.postAction("complete", "level", "5", {"first_name" : userFirstName, "score" : userScore});
The data passed will then be used to customize the posted story. This can be combined with explicit sharing, simply specify "fb:explicitly_shared" : "true" alongside the other parameters.
Sharing Feed Posts: Sometimes you may want to tie social activity into your virtual economy, for example by letting players ask their friends for a special item, or sharing a virtual good with all of their friends. This is best done through a feed post, which will bring up a Facebook dialog allowing the user to see what they are posting and add a custom message. You can bring up the feed post dialog by calling popupFeedPost, like so:
// The first parameter is the identifier of a feed post defined in the CMS.
// The second parameter is an optional dictionary of data to the current call to popupFeedPost
// and is used to customize the feed post.
// The third parameter is an optional callback letting you know if the post was made and providing data about the post.
window.teak.popupFeedPost("giveAwayCoins", {"first_name" : userFirstName},
function(teakData, fbData) {
if(fbData.post_id) { /* User made post... */ }
}
});
Because feed posts tie into your virtual economy their posting may be rate limited. To check if the current user can share a given feed post, you should use the canMakeFeedPost call, like so:
window.teak.canMakeFeedPost("giveAwayCoins", function(canPost) {
if(canPost) {
// Make the post, or set a variable indicating that the user can post
}
});
Sending Requests: Requests allow users to engage in one-on-one interactions with their friends, for example by sending a gift to a specific friend or group of friends, asking a specific friend for assistance, or informing a friend that it's their turn in a turn based game. Requests can also be used by players to invite their friends to the game. You can send a request by calling sendRequest, like so:
// The first parameter is the id of the request from the CMS
// The second parameter are various optional options that can be provided.
// The available options are
// to: An array of Facebook user ids this request should be sent to.
// If ommitted, we will display the Facebook friend selector
// max_recipients: The maximum number of people this request can be sent to.
// exclude_ids: An array of Facebook user ids this request should *not* be sent to
// filters: An array of filters that the user can select from in the friend
// selection dialog. Valid values are "app_users" and "app_non_users"
// object_type: The type of object the request is dealing with, if this is a
// gift or asking for a gift
// object_id: The speicfic id of an instance the request is dealing with, if this
// is a gift or asking for a gift
// request_properties: A dictionary which can be used to customize the request
// message, similar to templated custom open graph stories
// data: Up to 255 characters of arbitrary data to be associated with the request
// The third parameter is a callback which will include data about the request
// and who it was sent to.
window.teak.sendRequest("askForBooster", {"filters" : ["app_users"]});
When a user clicks on a feed post, accepts a request, or clicks on a notification, Teak needs to be notified of the click. Teak may take a variety of actions when you report a click, including granting a reward or prompting the user to send a follow up request. Each type of click, feed post, request, or notification, will need to be reported with its corresponding SDK method.
Tracking Feed Posts: When a user has clicked on a feed post Teak will direct the user to the URL specified by 'Where should users go when they click on this post?' in the CMS. Normally this will be the index of your canvas page, but you may choose to send users to a special landing page when they click on feed posts. Teak will attach a 'teak_post_id' query parameter to the URL the user is sent to. To report that the user has clicked on a feed post and to handle reward granting if necessary, call window.teak.reportFeedClick. For example:
<?php if($_GET["teak_post_id"]) { ?>
window.teak.reportFeedClick("<?php echo $_GET["teak_post_id"]; ?>", function(response) {
// response.status will be one of
// grant_reward: The user has been granted a reward
// self_click: This click is from the user who made the post initially, and has not been granted a reward
// already_clicked: The user has already clicked on this feed post, and has not been granted a reward
// too_many_clicks: The post has already given as many rewards as it can, and the user has not been granted a reward
});
<?php } ?>
If a 'Request to respond with' has been specified for the post in the Teak CMS, Teak will bring up the request dialog prompting the user to send the request to respond with to the originally posting user when you call window.teak.reportFeedClick.
Tracking Requests: When a user clicks on a request they will be directed to the index of your canvas page with the 'request_ids' parameter set. To report that the user has clicked on a request and to handle the reward granting if necessary, call window.teak.acceptRequest. For example:
<?php if($_GET["request_ids"]) { ?>
// Note that request_ids is a facebook assigned ID
window.teak.acceptRequest("<?php echo $_GET["request_ids"]; ?>", function(response) {
// response.status will be one of
// grant_reward: The user has been granted a reward
// already_clicked: The user has already accepted this request, and has not been granted a reward
});
<?php } ?>
If a 'Request to respond with' has been specified for the request in the Teak CMS, Teak will bring up the request dialog prompty the user to send the request to respond with to the user who sent the current request when you call window.teak.acceptRequest. This can be used to build a gift loop, i.e. Accept a life and send one back.
window.teak.acceptRequest takes Facebook assigned request ids as its input. You can use this to build a gift inbox, by querying Facebook for all outstanding requests for the current user, calling window.teak.acceptRequest for each outstanding request, and then deleting the request from Facebook.
Tracking Notifications: When a user clicks on a Facebook notification they will be directed to the URL specified by 'Where should users go to when they click on this notification?' in the CMS. By default this will be the index of your canvas page, but you may choose to send users to a special landing page when they click on notifications. Teak will attach a 'teak_notif_id' query parameter to the URL the user is sent to. To report that the user has clicked on a notification call window.teak.reportNotificationClick. For example:
<?php if($_GET["teak_notif_id"]) { ?>
window.teak.reportFeedClick("<?php echo $_GET["teak_notif_id"]; ?>");
<?php } ?>