1. Start
  2. Installation
  3. Application Setup
  4. File Modification
  5. Add-On Integration

ChatScript

Chat Room Application for Facebook


Thanks for purchasing ChatScript! 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

ChatScript comes in a ZIP package.  Simply unzip the package and upload the contained folders to a directory of your choice on your server.  You do not need to upload the SQL file to your server.

You do, however, need to import the SQL file to your MySQL database.  If you are using phpMyAdmin, there should be a handy button on the top navigation menu that says 'import'.  Use this to import the SQL file.

You may now move to the section Application Setup.

If you are interested in adding ChatScript as an add-on to an application, at least basic HTML & PHP programming knowledge is needed.  You can find instructions for this in the section Add-On Integration.

Application Setup


Introduction

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

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.  ChatScript 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 ChatScript folder on your server for both settings.  An example: http://www.mysite.com/chatscript/ & https://www.mysite.com/chatscript/

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.

$app_info['id'] - This is your application's identification number.  To find this, visit https://developers.facebook.com/apps and view your 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.

 

$app_info['channel_ids'] - This is the total amount of 'channels' you would like your app to have.  Channels are simply different rooms.

$app_info['channel_names'] - This is an array of names for each of the channels.  The placement in the array determines which name goes to which channel (example: the first name would be the title of the first channel, the second name would be the name of the second channel, etc).

$app_info['refresh_rate'] - This is the amount, in seconds, that the app will refresh the chat for the user.

$app_info['text_limit'] - This is the character limit per message when posting.

$app_info['moderators'] - This is an array containing the Facebook UIDs of all the moderators you wish to have in your application.

$app_info['show_limit'] - This is latest number of chat logs to display to users when they log in.

$app_info['text_limit'] - This is the character limit per message when posting.

$app_info['login_threshold'] - This is how long the user must have been logged out to be considered 'offline'.

$app_info['time_limit'] - This is the amount of time, in hours, to keep message logs before automatically removing them.  Enter '0' to disable.

$app_info['fb_images'] - Shows a small image of the users profile picture.  '1' to enable or '0' to disable.

$app_info['alt_names'] - Shows only the users' first names instead of their full names.  '1' to enable or '0' to disable.

 

$sql_server - The name of your SQL server.  More often than not, 'localhost' will suffice.

$sql_database - The name of your SQL database.

$sql_user - The database username.

$sql_password - The database user's password.

 

Save your changes to your file and upload the file if you have not done so already.

Congratulations!  You have finished your application's setup!  Your application is now ready!

Add-On Integration


This section is to help those who would like to implement ChatScript as an add-on to an existing Facebook application.  While integration is fairly easy, basic HTML & PHP knowledge is needed.  Before you begin, please visit the File Modification section.

You will need to have a link to the jQuery library and a link to the ChatScript CSS file in the <head> of the page containing the chat room.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="chatscript.css" />


The href attribute of the CSS link make require adjustment depending on the location of your CSS file.

You will also need to create a variable called $facebook_id.  This variable must be equal to the current user's Facebook ID.  You will also need to call and obtain the users information from the Graph API.

$user_info=$facebook->api('/me');

If you already have the users info being obtained, ensure that the $user_info variable is set to hold this information as well.

After you have done this, you are ready to implement ChatScript.

On the page you want to implement ChatScript with, add the following code:

<?php

$facebook_id=USER_FACEBOOK_ID;
$user_info=$facebook->api('/me');

include 'masterfile.php';
include 'addon.php';

?>


Here as well, the included file paths may need to change depending on where you have the files located.

Integration should now be complete.  Test to ensure everything is working.