TR Vishwanath

Platform Updates: Operation Developer Love

By TR Vishwanath - Friday at 4:10pm

This week we launched the Send button to give users an easy way to privately share content with groups and individuals.

Using the Graph API to get permissions granted
As part of our efforts to transition functionality from legacy REST APIs to the Graph API, we added the ability to retrieve the list of permissions users have granted your app by adding the permissions connection to the User object. Similar to other User object connections, you can query for the list of permissions granted by calling: https://graph.facebook.com/me/permissions?access_token=...

Here is a simple PHP sample to show how to query for which permissions you've granted an application:

<?php 

  $app_id = "YOUR_APP_ID";
  $app_secret = "YOUR_APP_SECRET"; 
  $my_url = "YOUR_POST_LOGIN_URL"; 

  $code = $_REQUEST["code"];
  
  if(empty($code)) {
    $dialog_url = "http://www.facebook.com/dialog/oauth?client_id=" 
    . $app_id . "&redirect;_uri=" . urlencode($my_url) . "&scope;=email";

    echo("<script>top.location.href='" . $dialog_url . "'</script>");
  }

  $token_url = "https://graph.facebook.com/oauth/access_token?client_id="
    . $app_id . "&redirect;_uri=" . urlencode($my_url) 
    . "&client;_secret=" . $app_secret 
    . "&code;=" . $code;

  $access_token = file_get_contents($token_url);
  $graph_url="https://graph.facebook.com/me/permissions?".$access_token;
  echo "graph_url=" . $graph_url . "<br />";
  $user_permissions = json_decode(file_get_contents($graph_url));
  print_r($user_permissions);

?>

Developer Site Latency

On April 26th, we moved the Facebook Developer site from a small, dedicated tier to the same hosts that serve www.facebook.com. As you can see from the graph below, it has increased our site’s performance significantly since the migration.

Improving our Reference Docs

As part of Operation Developer Love, we have a goal to improve and update the Graph API, FQL, XFBML, and SDK reference documentation to ensure that the information is complete with examples, accurate, and verified within the past 90 days. Going forward, we will track and share our weekly progress to keep our team accountable to these efforts to make the Dev Site the best resource for you to build your Facebook app. To receive more frequent updates on particular docs, you can click “Like” at the bottom of each ref doc.

Documentation activity for the past 7 days:

  • 138 docs are under review (kicking things off)

Fixing Bugs

Bugzilla activity for the past 7 days:

  • 156 new bugs were reported
  • 31 bugs were reproducible and accepted (after duplicates removed)
  • 12 bugs were fixed (none of which were reported this week)
  • As of today, there are 1,206 open bugs in Bugzilla (down 23 from last week)

Forum Activity

Developer Forum activity for the past 7 days:

  • 448 New Topics Created
  • 199 New Topics received a reply
  • Of those 199, 3 were replied to by a Facebook Employee
  • Of those 199, 38 were replied to by a community moderator

Please let us know if you have any questions or feedback in the comments below.

Abe Parvand

The Send Button, Because Sometimes It’s Private

By Abe Parvand - Monday, April 25, 2011 at 12:00pm

Just over one year ago, we introduced the Like button to help people share worthwhile things with all their friends. But there are many times when people want to share something with just certain people. So today, we're introducing the Send button, the easiest way to privately share things with groups and individuals.

How It Works
The Send button is a social plugin that websites can use to let people send a link to a friend through Facebook Messages, post it to a Group, or email it to an individual. For example, if you see a Mother's Day gift idea on 1-800-Flowers.com, you can now send a message or email to your family members to discuss. Or say you're training for a marathon and you come across a great article about running shoes on The Huffington Post. Now you can share it with your entire running group in just one click.

The Send button drives traffic by letting users send a link and a short message to the people that would be most interested. They don't need to leave the web page they're on or fill out a long, annoying form. Compared to the alternatives, the Send button has fewer required steps, and it removes the need to look up email addresses by auto-suggesting friends and Groups.

We designed the Send button to be used alongside the Like button. By including both on your website, people will have ability to broadcast the things they like and also send it to specific people.

How to Add the Send Button
The Send button can be easily added to existing Like buttons or as a standalone feature. Developers currently using the XFBML Like button can include the send="true" attribute in their Like button code to generate a combined button, and those using an iFrame version of the Like button will need to upgrade to XFBML to display a Send button. The following code will generate a combined Like and Send button:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="example.com" show_faces="true" width="450" send="true">
</fb:like>

Developers can add a standalone Send button with the following code:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send href="example.com"></fb:send>

Learn more about adding a combined Like and Send button or just the Send button. Also, we strongly recommend using Open Graph meta tags on your web pages to control the title, description and image displayed when people use the Send button.

Real-time Metrics
In the coming days, we will provide real-time metrics for the Send button in the Insights Dashboard. Once you claim your domain, you will be able to access the number of Send button impressions, messages, and referral clicks sent to your site.

We launched the Like button a little over one year ago, and it is already on millions of sites across the web. The Send button is launching on 50 sites today, and we look forward to seeing the list grow in the coming weeks. We're excited to offer people an easy way to share with small groups of people and give developers a new way to generate engagement and drive traffic to their websites.

Abe, an engineer on Facebook Platform, is sending this to his mom and all his friends.

Yunnan Wu

Platform Updates: Operation Developer Love

By Yunnan Wu - Friday, April 22, 2011 at 5:15pm

This week, we released JS Gamebench 0.4, a more streamlined version that is easier to run. We hope you will find it helpful as you continue your development of HTML5 apps.

Using the Graph API to upload Video

As part of our efforts to transition functionality from the legacy REST API to the Graph API, we added the ability to upload videos using the Graph API. To publish a video, issue a POST request with the video file attachment as multipart/form-data to https://graph-video.facebook.com/me/videos. Here’s a simple PHP example:

<?php 
$app_id = "YOUR_APP_ID";
$app_secret = "YOUR_APP_SECRET"; 
$my_url = "YOUR_POST_LOGIN_URL"; 
$video_title = "YOUR_VIDEO_TITLE";
$video_desc = "YOUR_VIDEO_DESCRIPTION";

$code = $_REQUEST["code"];

if(empty($code)) {
   $dialog_url = "http://www.facebook.com/dialog/oauth?client_id=" 
     . $app_id . "&redirect;_uri=" . urlencode($my_url) 
     . "&scope;=publish_stream";
    echo("<script>top.location.href='" . $dialog_url . "'</script>");
}

$token_url = "https://graph.facebook.com/oauth/access_token?client_id="
    . $app_id . "&redirect;_uri=" . urlencode($my_url) 
    . "&client;_secret=" . $app_secret 
    . "&code;=" . $code;
$access_token = file_get_contents($token_url);
 
$post_url = "https://graph-video.facebook.com/me/videos?"
    . "title=" . $video_title. "&description;=" . $video_desc 
    . "&". $access_token;

echo '<form enctype="multipart/form-data" action=" '.$post_url.' "  
     method="POST">';
echo 'Please choose a file:';
echo '<input name="file" type="file">';
echo '<input type="submit" value="Upload" />';
echo '</form>';
?>

The video will be published to the uploader's own wall. Note that the URL has to be graph-video.facebook.com, not graph.facebook.com. For more information please reference the Video Graph API reference.

Photo batch uploads

Last month, we introduced batch requests to help you more efficiently request data or make changes to several objects via the Graph API. Based on developer feedback, we have continued to improve batch requests and added binary data batch uploads.

Binary data, like photos, can be specified as part of the multipart/mime portion of the batch API request. Simply add all the binary items as multipart/mime attachments to your request and have each operation reference its binary items using the "attached_files" property in the operation. The "attached_files" property can take a comma-separated list of attachment names in its value. The following example shows how to upload two photos in a single batch call:

 <?php 

 $app_id = "YOUR_APP_ID";
 $app_secret = "YOUR_APP_SECRET"; 
 $my_url = "YOUR_POST_LOGIN_URL"; 
 
 $code = $_REQUEST["code"];

if(empty($code)) {
    $dialog_url = "http://www.facebook.com/dialog/oauth?client_id=" 
        . $app_id . "&redirect;_uri="  . urlencode($my_url) 
        . "&scope;=publish_stream";
     echo("<script>top.location.href='" . $dialog_url . "'</script>");
 }

$token_url = "https://graph.facebook.com/oauth/access_token?client_id="
    . $app_id . "&redirect;_uri=" . urlencode($my_url) 
    . "&client;_secret=" . $app_secret . "&code;=" . $code;

$access_token = file_get_contents($token_url);
   
$batched_request = '[{"method":"POST", "relative_url":"me/photos",' 
    . ' "body" : "message=My cat photo", "attached_files":"file1"},'
    . '{"method":"POST", "relative_url":"me/photos",' 
    . ' "body" : "message=My dog photo", "attached_files":"file2"}]';
 
$post_url = "https://graph.facebook.com/" . "?batch="
    .  urlencode($batched_request) . "&". $access_token 
    . "&method;=post";
  
 echo ' <form enctype="multipart/form-data" action="'.$post_url.'" 
       method="POST">';
 echo 'Please choose 2 files:';
 echo '<input name="file1" type="file">';
 echo '<input name="file2" type="file">';
 echo '<input type="submit" value="Upload" />';
 echo '</form>';
?>

For more info, please reference the Batch API documentation.

Policy reminder: Do not create apps from fake accounts

You must not create apps with fake accounts. Facebook requires users to provide their real first and last names, and fake accounts are a violation of our Statement of Rights and Responsibilities (SRR 4.1), even when used to host or test apps. If we find that your app has fake accounts listed as an admin or developer we will disable your app. If you would like to create test users to test app functionality, you can do so here.

Fixing Bugs

Bugzilla activity for the past 7 days:

  • 179 new bugs were reported
  • 34 bugs were reproducible and accepted (after duplicates removed)
  • 6 bugs were fixed (5 previously reported bugs and 1 new bug)
  • As of today, there are 1,229 open bugs in Bugzilla (up 97 from last week)

Forum Activity

Developer Forum activity for the past 7 days:

  • 562 New Topics Created
  • 329 New Topics received a reply
  • Of those 329, 138 were replied to by a Facebook Employee
  • Of those 329, 51 were replied to by a community moderator

Please let us know if you have any questions or feedback in the comments below.

Bruce Rogers

HTML5 Games 0.4: Memory

By Bruce Rogers - Wednesday, April 20, 2011 at 10:25am

Welcome back. Since version 0.3 was released, we’ve seen great progress across the browser landscape. Internet Explorer 9 was released. Internet Explorer 10 opened platform preview. Firefox 4 and Mobile Firefox both emerged from beta, bringing WebGL functionality to desktop and mobile. Exciting times!

Textures, Textures, and More Textures

With WebGL available on both Chrome and Firefox and impressive sprite performance from all of the mainstream browsers, we wondered about another piece of the browser performance pipeline: textures. During testing we thought we saw performance degradation as texture memory usage increased, but it hadn’t been a clear signal. So, we decided to dive in a bit further.

On desktop, we modified JSGameBench to run a repeated sprite test, increasing texture load by 1MB each time. Browser cache was not cleared prior to running tests, as we wanted to explore a setting as close to a normal browsing experience as possible, where you follow a link to a javascript game while browsing -- no game is going to start with “please clear your browser cache.” Well, no successful game, at least.

The results were striking:

This graph shows relative sprite performance as texture memory increased. For example, OS X saw an immediate decline to 7MB of textures, but then stabilized at 70% of baseline until 15 MB. Firefox 4 -- both OS X and Windows 7 -- and Chrome 11 on Windows 7 showed no meaningful impact from increased texture usage.

Internet Explorer 9 repeatedly demonstrated the same pattern: steady performance to 10 MB, a run with a 50% performance decline, fast runs again to 15 MB, then a steady decline from 15 MB on. We’re not sure what to make of this, unless Internet Explorer 9 resizes an internal buffer at 10 MB.

Finally, there’s Chrome 11 on OS X. Solid performance until 10 MB of textures, then virtually the same 50% performance drop Internet Explorer 9 showed. This is followed by a period of low performance, then another drop at 15 MB.

Strange, but fascinating data. First, it explained our intuition that texture utilization negatively impacted performance, as most of our daily testing is Chrome 11 on OS X. Second, it provide some performance guidance for building javascript games today: for best performance, keep your working texture set per level below 5 MB. Definitely don’t go above 10 MB if a substantial percentage of your audience is on OS X Chrome and Internet Explorer 9.

But What About Mobile?

Our curiosity piqued, it was time to repeat the test on mobile browsers. we had an iPhone 4 (iOS version 4.3), HTC Evo (Android 2.2), and Motorola Droid (Android 2.2.2) within reach, so that’s what we tested on:

Once again, a data point supporting our idea that texture use reduces performance, since we do most mobile performance testing on an iPhone. At 3 MB of texture memory, the iPhone 4 performance drops by 75% and remains low. On the other hand Android seemed far more resilient, if noisy in the case of the Droid. In repeated runs, the Droid followed a predictable pattern, with the first run among the slowest of runs, followed by faster runs with occasional returns to the baseline.

Our takeaway? Keep mobile levels to less than 3 MB of memory.

And Now for Something Completely Different

To date, we have avoided microbenchmarks for JavaScript. First, there were sufficient unknowns around JavaScript games to keep us busy. Second, we knew microbenchmarking was going to require a community approach to capture the differences in browsers, JavaScript engines, and core flexibility -- the politest way I can put it -- of JavaScript. Building out that kind of site was going to take time and effort.

Fortunately, someone else already did and it is awesome. Go visit jsPerf and explore the test cases. Don’t worry, we’ll wait.

Wondering about loop performance? Snapping to integers? UUID generation? Clearly, there is high variance in the quality of test cases posted, but jsPerf is a great tool and we plan to use it.

Finally

We’ve been starting to streamline JSGameBench to make it easier to run. This release includes two changes that should help:

  • A simpler, lighter-weight server in /bin, “simple_svr.js”, which removes the dependency on socket.io. While we continue to experiment with websockets and other communication channels, those tests are not linked to the core testing.
  • The “tohtml.js” script, which will take JSGameBench projects and convert the our templated .shtml files into .html files that do not require node.js to serve. Simply type: “bin/tohtml.js perf” to convert the perf project.

Thank You

As always, thank you to everyone who has forked JSGameBench or talked to us about how to make it faster. WebGL experts from both the Firefox and Chrome teams have both pointed out potential optimizations in our implementation, so thank you and stand by for even higher performance!