Post to Facebook Add-on

This free sample add-on is used to post a colored in picture to Facebook.

Disclaimer: All add-ons are provided as samples only, and will require some customisation to suit your site structure.  As such we can only provide basic support with regard to these add-ons.  We cannot problem-solve your website for you.

Step 1: Create a Facebook Application

  1. Log in to Facebook.
  2. Got to https://developers.facebook.com/apps.
  3. Click [+ Create New App], and enter the App Name. This will probably be the name of your site, or something similar.
  4. Read and the Facebook Platform Policies and click [Continue].
  5. Fill in the security check text, and click [Submit].
  6. Enter a Display Name, edit the icon, etc.
  7. Under Select how your app integrates with Facebook, choose Website with Facebook Login.
  8. Fill in Site URL and then click [Save Changes].
    Note: This must be the URL of the website from which the Facebook add-on is run.
    E.g. http://www.yoursite.com/
  9. Make a note of the App ID and App Secret (they are at the top of the page). You need these for the next step.

Step 2: Download and install the add-on

  1. Download the Facebook add-on (facebook.zip) and extract the files.
    The files should go into their own "facebook" folder under the main "mcb" directory.
  2. Open "fbpost.php" in an editor, and find the section marked "YOUR SETTINGS GO HERE..."
  3. In FB_APPID, replace <your application id> with your Facebook App Id.  Your application id will be a 15 digit number.
    E.g...
    define('FB_APPID', '0123456789012345');
  4. In FB_SECRET, replace <your application secret> with your Facebook App Secret.  Your secret will be a 32 digit hexadecimal number.
    Eg...
    define('FB_SECRET', 'a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6');
  5. In SITE_NAME, replace <your website name> with your website name. E.g...
    define('SITE_NAME', 'My Cool Coloring Website');
  6. In SITE_URL, replace <your website URL> with your website URL.
    define('SITE_URL', 'http://www.mycoolcoloringwebsite.com');
  7. Save the file.
  8. Upload the entire facebook folder (including "fbpost.php", "facebook.php") under the directory containing your coloring book on your site (e.g. /mcb/facebook/).

Step 3: Add a button for posting to Facebook

  1. Open config/config.xml.
  2. Edit or create a button as in the following example...
    <button id="custom1" visible="true" tip="Post to Facebook"
    message="Sending picture to Facebook" icon="facebook"
    preload="./mcb/facebook/preload.html"
    url="./mcb/facebook/fbpost.php" post="file" pixels="600"/>
  3. Save the changed config file and upload it to your website.

Note that the post option used is file. This is required for the current version of the Facebook add-on.

The url used here should be relative to the page that the coloring book is on. If your page is at the root level of your domain, then you will need to include "mcb" in the url.
E.g. url="./mcb/facebook/fbpost.php"

For more information on custom buttons see the Custom Buttons article.

Notes

The Facebook add-on saves the colored picture to the "/save" subdirectory, using the "saveimage.php". Be sure you have the latest version, and that "saveimage.php" is in your main "mcb" folder, and that the "/save" subdirectory exists and is writable by PHP.

The pictures that are saved are NOT automatically cleaned up. If you are concerned about disk-space you should clean out the directory from time to time.