Scratch

elfin8er · 2012-02-21 16:45:28

Is there a way to turn a Scratch Project into a facebook app for free? Just wondering if anyone has tried it.

spud2451 · 2012-02-21 16:50:45

cool idea!

Hyacinths · 2012-02-21 17:20:55

I've never tried but I'd assume it's very hard. I do believe that Facebook applications are made in Action Script 3. So you'd need to make a Scratch-Flash converter which is technically impossible. It'd be much easier to make the application in Action Script instead of trying to convert it.

bobbybee · 2012-02-21 17:25:54

I can try, if you want me to. The Flash Player could be used as the app.

bobbybee · 2012-02-21 18:02:35

I ported my project, Draw-The-Scene, to Facebook. You can find the app here, but it looks like crud. I'm working on making it look a bit nicer.

elfin8er · 2012-02-21 18:02:39

bobbybee wrote:
I can try, if you want me to. The Flash Player could be used as the app.

Yeah, that's what I was thinking. Let me know if you get one working. That would be awesome big_smile How hard would it be to make a database that stores what the users have done?

Last edited by elfin8er (2012-02-21 18:03:40)

bobbybee · 2012-02-21 18:09:04

Not very hard. Look at my app.

elfin8er · 2012-02-21 18:09:40

bobbybee wrote:
Not very hard. Look at my app.

What app...

bobbybee · 2012-02-21 18:10:07

bobbybee wrote:
I ported my project, Draw-The-Scene, to Facebook. You can find the app here, but it looks like crud. I'm working on making it look a bit nicer.

elfin8er · 2012-02-21 18:12:26

bobbybee wrote:
bobbybee wrote:
I ported my project, Draw-The-Scene, to Facebook. You can find the app here, but it looks like crud. I'm working on making it look a bit nicer.

Uh, I got an error. "Heroku | No such app
There is no app configured at that hostname.
Perhaps the app owner has renamed it, or you mistyped the URL."

bobbybee · 2012-02-21 18:23:58

Yeah, I told it was glitchy.

elfin8er · 2012-02-21 18:27:34

bobbybee wrote:
Yeah, I told it was glitchy.

Well, that's a start. Are you just giving up though?

bobbybee · 2012-02-21 19:00:01

I finished it.

elfin8er · 2012-02-21 19:34:41

Missing Plugin D: What do I need?

zippynk · 2012-02-21 19:41:50

elfin8er wrote:
Missing Plugin D: What do I need?

Probably adobe flash.

bobbybee · 2012-02-21 19:46:26

Do you want me to make a tutorial on how to do this.

elfin8er · 2012-02-21 19:56:58

bobbybee wrote:
Do you want me to make a tutorial on how to do this.

YES PLEASE!! And then I'll rename this to "How to put Scratch projects on Facebook", and put your tutorial in the main post if that's alright with you.

elfin8er · 2012-02-21 20:04:14

zippynk wrote:
elfin8er wrote:
Missing Plugin D: What do I need?
Probably adobe flash.

I (think) I already have it.

bobbybee · 2012-02-21 20:23:05

Oh boy. This is going to be a long post.

First, pick a project that you would like to make a Facebook application from. Go to the project, and change the url by adding 'static/' to before 'projects', and then appending '.sb'. It would turn 'http://scratch.mit.edu/projects/bobbybee/2344329' into 'http://scratch.mit.edu/static/projects/bobbybee/2344329.sb'. Copy this URL to somewhere.

Now go to developers.facebook.com. Register as a developer on Facebook. Click apps at the top, and click the button labeled, 'Create New App'. Fill out the necessary information, and proceed with the app creation.

Look for a section labeled 'Cloud Services'. Click the 'Get One' link, and create a Heroku account through these boxes. Use PHP as the language. Go to your email, and proceed to the Heroku website. Change the app title to something more applicable, such as your project title.

Download the Heroku toolkit from https://toolbelt.herokuapp.com/osx Pick your operating system, and install. Open up the command line (Terminal for mac), and type in "heroku login" Fill out the login information to login to Heroku from the command line. If it asks to generate a SSH key, say yes (Y).

In this step, you'll need to download your apps source code. You'll need to know the app name that you chose earlier. I'll assume the app name is: scratch-project. Type in "git clone git@heroku.com:scratch-project.git -o heroku". Then, type "cd scratch-project". (change scratch-project to your app name in all of these examples, but make sure it doesn't have any spaces)

Open the folder which you put the source code in, and open up a file called index.php. At the end, I put some source code. Replace PROJECT_URL in the file with the URL you made and copy/pasted in an earlier step. Save the file, and then type this into the command line: 'git commit -am "(descriptive statement of the change)"' Replace the parenthesis with what you changed in the source, such as "updated Flash Player".

Here's the fun part: uploading the change. Go to the command line, and type: "git push heroku master". This will put the app on the cloud. To check that it all works properly, go to "http://scratch-project.herokuapp.com/". You should be able to see your app working. Remember to replace scratch-project with your application name that you selected earlier.

This is the final step: setting up the Facebook app. Go back to the facebook developer page you opened earlier, and check off "App on Facebook". In the canvas URL field, put "http://scratch-project.herokuapp.com/". In the secure canvas URL field, put "https://scratch-project.herokuapp.com/". Click save changes on the bottom.

Enjoy your Facebook app!.

index.php:

Code:

<?php

/**
 * This sample app is provided to kickstart your experience using Facebook's
 * resources for developers.  This sample app provides examples of several
 * key concepts, including authentication, the Graph API, and FQL (Facebook
 * Query Language). Please visit the docs at 'developers.facebook.com/docs'
 * to learn more about the resources available to you
 */

// Provides access to app specific values such as your app id and app secret.
// Defined in 'AppInfo.php'
require_once('AppInfo.php');

// Enforce https on production
if (substr(AppInfo::getUrl(), 0, 8) != 'https://' && $_SERVER['REMOTE_ADDR'] != '127.0.0.1') {
  header('Location: https://'. $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
  exit();
}

// This provides access to helper functions defined in 'utils.php'
require_once('utils.php');


/*****************************************************************************
 *
 * The content below provides examples of how to fetch Facebook data using the
 * Graph API and FQL.  It uses the helper functions defined in 'utils.php' to
 * do so.  You should change this section so that it prepares all of the
 * information that you want to display to the user.
 *
 ****************************************************************************/

require_once('sdk/src/facebook.php');

$facebook = new Facebook(array(
  'appId'  => AppInfo::appID(),
  'secret' => AppInfo::appSecret(),
));

$user_id = $facebook->getUser();
if ($user_id) {
  try {
    // Fetch the viewer's basic information
    $basic = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    // If the call fails we check if we still have a user. The user will be
    // cleared if the error is because of an invalid accesstoken
    if (!$facebook->getUser()) {
      header('Location: '. AppInfo::getUrl($_SERVER['REQUEST_URI']));
      exit();
    }
  }

  // This fetches some things that you like . 'limit=*" only returns * values.
  // To see the format of the data you are retrieving, use the "Graph API
  // Explorer" which is at https://developers.facebook.com/tools/explorer/
  $likes = idx($facebook->api('/me/likes?limit=4'), 'data', array());

  // This fetches 4 of your friends.
  $friends = idx($facebook->api('/me/friends?limit=4'), 'data', array());

  // And this returns 16 of your photos.
  $photos = idx($facebook->api('/me/photos?limit=16'), 'data', array());

  // Here is an example of a FQL call that fetches all of your friends that are
  // using this app
  $app_using_friends = $facebook->api(array(
    'method' => 'fql.query',
    'query' => 'SELECT uid, name FROM user WHERE uid IN(SELECT uid2 FROM friend WHERE uid1 = me()) AND is_app_user = 1'
  ));
}

// Fetch the basic info of the app that they are using
$app_info = $facebook->api('/'. AppInfo::appID());

$app_name = idx($app_info, 'name', '');

?>
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

    <title><?php echo he($app_name); ?></title>

    <!--[if IEMobile]>
    <link rel="stylesheet" href="mobile.css" media="screen" type="text/css"  />
    <![endif]-->

    <!-- These are Open Graph tags.  They add meta data to your  -->
    <!-- site that facebook uses when your content is shared     -->
    <!-- over facebook.  You should fill these tags in with      -->
    <!-- your data.  To learn more about Open Graph, visit       -->
    <!-- 'https://developers.facebook.com/docs/opengraph/'       -->
    <meta property="og:title" content="<?php echo he($app_name); ?>" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<?php echo AppInfo::getUrl(); ?>" />
    <meta property="og:image" content="<?php echo AppInfo::getUrl('/logo.png'); ?>" />
    <meta property="og:site_name" content="<?php echo he($app_name); ?>" />
    <meta property="og:description" content="My first app" />
    <meta property="fb:app_id" content="<?php echo AppInfo::appID(); ?>" />

    <script type="text/javascript" src="/javascript/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">
      function logResponse(response) {
        if (console && console.log) {
          console.log('The response was', response);
        }
      }

      $(function(){
        // Set up so we handle click on the buttons
        $('#postToWall').click(function() {
          FB.ui(
            {
              method : 'feed',
              link   : $(this).attr('data-url')
            },
            function (response) {
              // If response is null the user canceled the dialog
              if (response != null) {
                logResponse(response);
              }
            }
          );
        });

        $('#sendToFriends').click(function() {
          FB.ui(
            {
              method : 'send',
              link   : $(this).attr('data-url')
            },
            function (response) {
              // If response is null the user canceled the dialog
              if (response != null) {
                logResponse(response);
              }
            }
          );
        });

        $('#sendRequest').click(function() {
          FB.ui(
            {
              method  : 'apprequests',
              message : $(this).attr('data-message')
            },
            function (response) {
              // If response is null the user canceled the dialog
              if (response != null) {
                logResponse(response);
              }
            }
          );
        });
      });
    </script>

    <!--[if IE]>
      <script type="text/javascript">
        var tags = ['header', 'section'];
        while(tags.length)
          document.createElement(tags.pop());
      </script>
    <![endif]-->
  </head>
  <body>
    <div id="fb-root"></div>
    <script type="text/javascript">
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '<?php echo AppInfo::appID(); ?>', // App ID
          channelUrl : '//<?php echo $_SERVER["HTTP_HOST"]; ?>/channel.html', // Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true // parse XFBML
        });

        // Listen to the auth.login which will be called when the user logs in
        // using the Login button
        FB.Event.subscribe('auth.login', function(response) {
          // We want to reload the page now so PHP can read the cookie that the
          // Javascript SDK sat. But we don't want to use
          // window.location.reload() because if this is in a canvas there was a
          // post made to this page and a reload will trigger a message to the
          // user asking if they want to send data again.
          window.location = window.location;
        });

        FB.Canvas.setAutoGrow();
      };

      // Load the SDK Asynchronously
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>

  

    <section id="get-started">
      <object id="player1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="400" name="player1">
  <param name="movie" value="http://scratch.mit.edu/static/misc/PlayerOnly.swf" />
  <param name="allowfullscreen" value="true" />
  <param name="scale" value="noScale" />
  <param name="salign" value="lt" />
  <param name="allowscriptaccess" value="always" />
  <param name="flashvars" value="path=deuter&project=PROJECT_URL" /> 
  <embed id="player1" width="600" height="400" src="http://scratch.mit.edu/static/misc/PlayerOnly.swf" flashvars="path=deuter&project=PROJECT_URL" allowfullscreen="true" allowscriptaccess="always" name="player1" scale="noScale" salign="lt"></embed>
  </object>
    </section>

  </body>
</html>

nathanprocks · 2012-02-22 00:11:56

I made one with my pong game ages ago but I think your server has to use SSL or something now.

bobbybee · 2012-02-22 05:53:38

It does--Heroku deals with SSL for you.

bobbybee · 2012-02-22 08:12:58

By the way, I have ported Generation: 3000 to Facebook. https://apps.facebook.com/326472054056726/

Last edited by bobbybee (2012-02-22 08:13:07)

elfin8er · 2012-02-22 12:28:23

I still can't figure out what plugin I need D: I have flash and Java I'm pretty sure.

bobbybee · 2012-02-22 12:45:10

Can you take a screenshot?

Borrego6165 · 2012-02-22 13:14:27

Bobbybee- could you change my app please from Generation:3000 to this please. All my mates complained it crashed their browsers and so this is a much smaller game.

Scratch

archived forums

#1 2012-02-21 16:45:28

Scratch Projects on Facebook

#2 2012-02-21 16:50:45

Re: Scratch Projects on Facebook

#3 2012-02-21 17:20:55

Re: Scratch Projects on Facebook

#4 2012-02-21 17:25:54

Re: Scratch Projects on Facebook

#5 2012-02-21 18:02:35

Re: Scratch Projects on Facebook

#6 2012-02-21 18:02:39

Re: Scratch Projects on Facebook

bobbybee wrote:

#7 2012-02-21 18:09:04

Re: Scratch Projects on Facebook

#8 2012-02-21 18:09:40

Re: Scratch Projects on Facebook

bobbybee wrote:

#9 2012-02-21 18:10:07

Re: Scratch Projects on Facebook

bobbybee wrote:

#10 2012-02-21 18:12:26

Re: Scratch Projects on Facebook

bobbybee wrote:

bobbybee wrote:

#11 2012-02-21 18:23:58

Re: Scratch Projects on Facebook

#12 2012-02-21 18:27:34

Re: Scratch Projects on Facebook

bobbybee wrote:

#13 2012-02-21 19:00:01

Re: Scratch Projects on Facebook

#14 2012-02-21 19:34:41

Re: Scratch Projects on Facebook

#15 2012-02-21 19:41:50

Re: Scratch Projects on Facebook

elfin8er wrote:

#16 2012-02-21 19:46:26

Re: Scratch Projects on Facebook

#17 2012-02-21 19:56:58

Re: Scratch Projects on Facebook

bobbybee wrote:

#18 2012-02-21 20:04:14

Re: Scratch Projects on Facebook

zippynk wrote:

elfin8er wrote:

#19 2012-02-21 20:23:05

Re: Scratch Projects on Facebook

Code:

#20 2012-02-22 00:11:56

Re: Scratch Projects on Facebook

#21 2012-02-22 05:53:38

Re: Scratch Projects on Facebook

#22 2012-02-22 08:12:58

Re: Scratch Projects on Facebook

#23 2012-02-22 12:28:23

Re: Scratch Projects on Facebook

#24 2012-02-22 12:45:10

Re: Scratch Projects on Facebook

#25 2012-02-22 13:14:27

Re: Scratch Projects on Facebook

Board footer