1. Start
  2. Installation
  3. Application Setup
  4. File Modification
  5. Application Integration
  6. Customization

Sudoku Unlimited

Random Puzzle Generator Application for Facebook


Thanks for purchasing Sudoku Unlimited! Please check CodeCanyon often for free updates and new scripts! This integration guide will help you get your new application (or modification of) set up quickly and as hassle-free as possible. Please, do not hesitate to send me an email if you have any questions!

Installation


Introduction

This section will help you create a new application on Facebook.
 

Uploading

Sudoku Unlimited comes in a ZIP package.  Simply unzip the package and upload the contained folders to a directory of your choice on your server.

You may now move to the section Application Setup.

Application Setup


Introduction

This section will help you create a new application on Facebook.  If you are looking to incorporate Sudoku Unlimited into an existing application, please visit the section entitled Application Integration.

Before proceeding further, please log into your Facebook account.
 

The Facebook Developer Application

If you have never set up an application on Facebook before, you will need to add the Facebook Developer application.  This can be accessed at http://www.facebook.com/developers.  Once you allow access to the application, you can continue.
 

Application Creation

You can now create your new application.  Firstly, insure that you are on this web page: https://developers.facebook.com/apps.

In the top left corner of your viewport, you will see the +Create New App button.  Click on the button to begin creating a new application.  You can then choose your application's name and language.  You must also agree to the Facebook Terms before creating your application.  Once you have chosen your application's name and language and accepted the Terms, click continue.
 

Editing Basic Application Settings

Once you have passed the security CAPTCHA, you will be able to edit your application's settings.  While I will explain what some of the items in the settings area are, you should take the time to explore what all of these settings do at a later date.

Firstly, you can add an application icon.  It is a small, 16x16 pixel image that will appear next to your application in a user's bookmarks once they have added the application (for quick and easy access).  Simply click 'edit icon' to add your own icon.

The next settings appear sequentially down the page:

  1. Application Display Name - The name of your application displayed to users.
  2. Application Namepace - This is the namespace used for your application on the Open Graph and the Facebook Canvas.  This will appear in the URL to your application.  Make it short and simple.  Example: http://apps.facebook.com/NAMESPACE/.  Do not include anything but the Namespace in this setting (not the full URL).
  3. Contact Email - Primary email used for important communication related to your application.
  4. Category - Select a category from the drop-down menu that best describes your application.


The next section of the settings asks you to select how your application integrates with Facebook.  Sudoku Unlimited is meant to be displayed on the Facebook Canvas.  Select App on Facebook as the proper setting.

You need to enter data for both the Select Canvas URL setting and the Select Secure Canvas URL setting.  The only difference between the two is that the secure setting should begin with https:// and the normal setting should start with http://

Enter the web path to your Sudoku folder on your server for both settings.  An example: http://www.mysite.com/sudoku/ & https://www.mysite.com/sudoku/

Keep in mind that you must have an SSL certificate for your server for the script to work. Facebook is requiring this on all canvas applications. You can find a free SSL certificate provider at http://www.startssl.com/. You will need to work with your hosting service to properly add the certificate to your server. I will not be able to help you with this.
You may now save your changes.

Editing Advanced Application Settings



To the left-hand side of your viewport, you will see two navigational buttons - Basics and Advanced  You have been completing the Basics part of the settings.  You can now click on Advanced to finish your application setup.

Most of these settings you should not be touching.  They are already set to the proper setting.  I will explain a few of these settings, though.  In the future before you decide to change any setting, please read up on all of these available settings before changing any of them.  If I do not mention a setting here, you have no need to alter the setting.

  1. Sandbox Mode - Sandbox mode allows you to develop your application in your top secret lair (Facebook just hides it from other users).  This of course, would let you develop your application without intrustion by other users.  While you can turn this setting on, no users will be able to visit your application - they won't even be able to find it!
  2. Canvas Height - I do want you to change this setting.  It should be set to the Settable setting.  This means that the size of the Canvas will be adjusted dynamically and automatically, rather than showing those ugly scrollbars.
  3. Privacy Policy URL - This is the web path to your application's privacy policy.  While I can not give legal advice about creating this document, look around the web for others if you do not have your own.  This is a must and your application will not function without one.
  4. User Support URL - This setting need only be used if you have a specific website you would like users to visit for help regarding your application.

You may not continue to the section File Modification.

File Modification


Editing Files

You will need to edit a single file.  You can do this before or after uploading.  Open the file masterfile.php.  While there are comments in the file to help you, I will explain what to edit here as well.

You will need to edit a handful of variables in this file.  You will get most of this information from your application settings which you modified a short time ago.

If you are integrating Sudoku Unlimited into another application, make sure to use the application information from the application you are integrating into!

$app_info['id'] - This is your application's identification number.  To find this, visit https://developers.facebook.com/apps and view your Sudoku application's information.


$app_info['canvas'] - This is your application's namespace.


$app_info['name'] - This is your application's name.


$app_info['secret'] - This is your application's secret key.  It is found in the same location as your application's identification number.

You may now move to the section Customization.

Application Integration


Introduction

This section will help you integrate Sudoku Unlimited within an existing application on Facebook.  You should only use this section with some knowledge of programming.


Integration

Integration with an existing application is a little complicated, but if you follow these steps you will be able to integrate it without too much hassle.

  1. Add a link to the jQuery library.  This should be done in the <head> section of the page you wish Sudoku Unlimited to be added on.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
     
  2. Add a link to the Sudoku CSS file.  Again, this should be done in the <head> section of the page you wish Sudoku Unlimited to be added on.  The href attribute may need to be altered depending on where the CSS file is located.

    <link rel="stylesheet" type="text/css" href="sudoku.css" />
     
  3. Include the Sudoku file itself.  This should appear on the page where you want the puzzle application to appear.  You may need to alter the file name in the function depending on where your file is located.

    <?php include 'main_frame.php'; ?>
     

You may now move to the section Customization.

Customization


If you wish to change the images in the application, you can find all the images located in the images folder inside the sudoku folder.  Simply replace the images with your own (use the same names).

Once this is done (or if you choose not to), your brand new Sudoku application (or add-on) is ready!  I hope you enjoy it!