Skip to main content
OCLC Support

Add a QuestionPoint Qwidget to Facebook

Overview

This page will walk you through the process of creating a Facebook application that will make your QuestionPoint Qwidget available to Facebook users.

Below are the directions for building a basic Facebook IFrame application using an HTML page as well as a more advanced IFrame application using the Facebook PHP API.

  Basic advanced
Advantages
  1. No need to install/update PHP on your web server
  2. No need to install/update JSON on your web server
  3. Only need basic HTML skills to create, edit, and maintain
  1. Can integrate your application with other elements of the Facebook API
  2. Facebook users can bookmark your app
  3. Your app can have its own public page
Limitations
  1. You will not be able to access the advanced Facebook features that require use of the Facebook API
  1. Higher web server requirements
  2. Advanced web development skills if you wish to use the rest of the Facebook API

 Note: In order to build a Facebook application you must accept the Facebook application terms and conditions.  It is up to your library to review and agree to the Facebook  terms and conditions.

Where to get help

If you have any problems with this guide, please contact qpanalysts@oclc.org.

Support for the Facebook Apps and the Facebook API is handled at http://developers.facebook.com.

Directions for building a Basic Qwidget for Facebook

Things you'll need

  1. A Facebook account.
  2. A Facebook public page for your library (see http://www.facebook.com/note.php?note_id=68842278095 to get started).
  3. Access to a web server that supports HTTP where you can create, edit and host a .html file. This web server also needs to allow a POST to a file with an .html extension. If the web server does not support POSTs to .html files, your application will return a 405 error.
  4. Access to a web server that supports HTTPS where you can host your .html file.

 Note: As of October 2011, BOTH #3 and #4 are required by Facebook in order to build a Qwidget for a Facebook page.

FACEBOOK NOW OFFERS AN APP HOSTING SERVICE CALLED HEROKU. PLEASE REFER TO HTTPS://DEVELOPERS.FACEBOOK.COM/BLOG/POST/558/.

FOR MORE INFORMATION. NOTE: IF YOU USE THIS OPTION WE WILL ONLY BE ABLE TO HELP YOU WITH THE QWIDGET CODE. YOU WILL NEED TO WORK WITH HEROKU REGARDING THE SERVER AND APP SETUP.

Step 1: Create the HTML files

  1. Open your HTML editor of choice and create two HTML files. Name one fb.html and the other fb-s.html.
  2. Paste the qwidget code snippet into the fb.html and fb-s.html page between the body tags. You can also download Qwidget-FB-Template-zip, which contains a template of both files.
  3. In the Qwidget's URL, replace the color with facebook and the XXXXX with your five-digit institution ID as in the example below.
    .../crs/qwidgetV4/js/qwidget.bootstrap.js?&langcode=10&instid=00001&skin=facebook&size=fill

    For fb-s.html, replace http with https to avoid the 'page contains both secure and unsecure items' warning.
  4. After creating fb.html, place it on an HTTP-based web server where Facebook can access it.
  5. Place fb-s.html on a HTTPS-based web server where Facebook can access it.
     Note: Please contact your Web Administrator or IT department for your web site’s procedures. Once fb.html and fb-s.html are placed on the web servers, confirm that you can see the qwidget on both pages when you visit the URLs outside of your library’s network.
    You will use these URLs when you create your app. At this point you can begin the Facebook application building process, using the Facebook Developer tools.

Step 2: Access the Facebook Developer Application

  1. Log on to Facebook.
  2. Enter facebook for developers in the Search box and then click Search.
  3. Click Facebook for Developers > https://developers.facebook.com/.
  4. On the Developer page, click Apps > Create New App.
  5. On the Create Application page, enter the App Name and agree to the Facebook Terms on the Essential Information page.
     Note:
    • The application name can not have the word Facebook in it or contain terms that Facebook holds trademark on.
    • The application name will appear on the application’s Facebook page that will be created once the build process is complete.
    • The application namespace can only contain lower-case letters
  6. Fill out and submit the CAPTCHA check.

Step 3: Build the App using Developer

  1. Click on the Icon image to add your icon. Be sure your file is 16x16 pixels and less than 5 MB in file size.
  2. Add your App Display Name. This will be the name displayed on the application.
  3. Add the App Namespace. This will be the unique name of the app and will be used for the canvas page. It must be more than seven characters.
     Note: If you filled it in during setup, you won't have to add it here.
  4. Add your Contact email. This will be the email address used for contacting the developer.
  5. Add your App Domain name. Add the domain name that your app will be coming from (e.g., if you enter oclc.org, it will cover *.oclc.org.
  6. Only use the Hosting URL if you decide to host your app with one of Facebook's partners.
  7. Set the Sandbox Mode to Enabled until you are ready for others to see your app.
  8. Click App on Facebook and fill out the following fields:
    1. Add the URL path to the Canvas URL box (e.g., if your URL is http://www.mylibrary.org/facebook-qwidget/fb.html then enter http://www.mylibrary.org/facebook-qwidget/).
    2. Add the URL path to fb-s.html to the Secure Canvas URL box (e.g., if your URL is https://www.mylibrary.org/facebook-qwidget/fb-s.html then enter https://www.mylibrary.org/facebook-qwidget/).
    3. Canvas Width and Height should be set to Fluid.
  9. Click on Page Tab and fill out the following fields:
    1. Page Tab Name: This will be the tab name for your app.
    2. Page Tab URL: Add the URL path to fb.html to the Page Tab URL.
    3. Secure Page Tab URL: Add the URL path to fb-s.html to the Secure Page Tab URL.
    4. Page Tab Edit URL: Leave this blank.
  10. Change the Page Tab icon. Page Tab Image is new and critical. Select the width you would like and then click Change.
     Note: The Page Tab Image dimensions are 111x74 pixels.
  11. Click Save Changes.
  12. Click Advanced in the left column.
  13. (Optional) If you decide to use the Facebook API, add the description to appear in your user's news feed for your app.
  14. Add your contact information and Privacy Policy URL.
     Note: Privacy Policy URL is a new feature and is required.
  15. Click Save Changes.

Step 4: Add your App to your Page

 Note: Once completed, you will want to "Add" your application to your Facebook page.

  1. Load your App's install link. While logged into Facebook with the account as the editor of the page you wish to add the app to, enter this URL in your browser’s address bar: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL.
    • YOUR_APP_ID and YOUR_URL can be found in your app settings.
    • Example: https://www.facebook.com/dialog/pagetab?app_id= 104560596168612&next=https://capricalibrary.org/questionpoint/fb.html
  2. Open the URL from step 1 in a web browser. This will open the following dialog: Click the Choose Facebook Pages drop down to select the page on which you wish to install the App, and click “Add Page Tab”. A link to the Qwidget will now appear in the Tabs listed on your page’s Tab Row.

 

If you would like to add your app to the Facebook App Center, please visit https://developers.facebook.com/docs/appcenter/guidelines/

Directions for building an Advanced Qwidget for Facebook

Step 1: Create both a secure and unsecure directory on your web server

You will need to create two directories that will contain the following files once completed:

One directory can be on a standard web server that uses HTTP (unsecure)

The secure directory needs to be hosted on a server that supports HTTPS (secure)

Both directories will need to be publicly accessible with its contents allowed to be listed so that Facebook can access the files

For example if you put the files in a directory called fb_qwidget you’ll have two paths that will look like this:

  • Unsecure = http://mylibrary.org/fb_qwidget/
  • Secure = https://mylibrary.org/fb_qwidget/

Step 2: Create index.php

  1. If you have not already done so, download the Facebook PHP Client library from https://github.com/facebook/php-graph-sdk. As of this writing, the current version is 3.1.1. It will be a compressed file in either a zip or a tar.gz format. Ask the administrator of your web server which version they prefer.
  2. Click Download.
  3. Select the highest numbered version (it will be at the top of the list) and download that file to your computer. At this writing, the name of the file is facebook-php-sdk-v3.1.1-0-g9513f08.zip
  4. Work with the administrator of your web server to create two directories:
    • One unsecured called fb that has execute privileges to host your file
    • One secured called db that has execute privileges to host your file
  5. Open the file you downloaded in step 3.
  6. Open the src folder.
  7. Move base_facebook.php and facebook.php to both the secure and unsecure version of your fb directory.
  8. Click examples.
  9. Move example.php to both the secure and unsecure version of your fb directory and then rename the file to index.php in both locations.
  10. Use an editor to open both versions of index.php and make the following changes:
    1. Around line 22, replace the appID with your App ID from your Application Page.
    2. Around line 23, replace the secret with your App Secret from your Application Page.
    3. Around line 59, change the page title.
    4. Remove everything between the tags.
    5. Between the body tags, add your Qwidget’s code and any other content you wish to add.
      • You can add other HTML and Facebook elements such as text, graphics and tables to index.php.
      • Your Canvas is 760 pixels wide. If you go over this amount, your app will display a horizontal scrollbar.
    6. Save and close both versions of index.php.

Step 3: Access the Facebook Developer Application

  1. Log on to Facebook.
  2. Enter facebook for developers in the Search box and then click Search.
  3. Click Facebook for Developers > https://developers.facebook.com/.
  4. On the Developer page, click Apps > Create New App.
  5. On the Create Application page, enter the App Nameand agree to the Facebook Terms on the Essential Information page.
     Note:
    • The application name can not have the word Facebook in it or contain terms that Facebook holds trademark on.
    • The application name will appear on the application’s Facebook page that will be created once the build process is complete.
    • The application namespace can only contain lower-case letters
  6. Fill out and submit the CAPTCHA check.

Step 4: Fill out the Developer Application's Essential Information page

  1. On the Create Application page, enter the Application Name and agree to the Facebook Terms on the Essential Information page.
     Note:
    • The application name can not have the word Facebook in it or contain terms that Facebook holds trademark on.
    • The application name will appear on the application’s Facebook page that will be created once the build process is complete.
  2. Fill out and submit the CAPTCHA check.

Step 5: Create the Facebook Application page

  1. Add your description. Add things like hours of availability and information about your library.
  2. Click on the Icon image to add your icon. Be sure your file is 16x16 pixels and less than 5 MB in file size.
  3. Add your App Display Name. This will be the name displayed on the application and has been auto-filled for you.
  4. Add the App Namespace. This will be the unique name of the app and will be used for the canvas page. It must be more than seven characters.
     Note: If you filled it in during setup, you won't have to add it here.
  5. Add your Contact email. This will be the email address used for contacting the developer.
  6. Add your App Domain name. Add the domain name that your app will be coming from (e.g., if you enter oclc.org, it will cover *.oclc.org.
  7. Only use the Hosting URL if you decide to host your app with one of Facebook's partners.
  8. Set the Sandbox Mode to Enabled until you are ready for users to use your Qwidget.
  9. Click App on Facebook and fill out the following fields:
    1. Add the URL to fb.html from step 3 to the Canvas URL box.
    2. Add the URL to fb-s.html from step 3 to the Secure Canvas URL box.
  10. Click on Page Tab and fill out the following fields:
    1. Page Tab Name: This will be the tab name for your app.
    2. Page Tab URL: Add the URL path to fb.html to the Page Tab URL.
    3. Secure Page Tab URL: Add the URL path to fb-s.html to the Secure Page Tab URL.
    4. Page Tab Edit URL: Leave this blank.
  11. Change the Page Tab icon. Page Tab Image is new and critical. Select the width you would like and then click Change.
     Note: The Page Tab Image dimensions are 111x74 pixels.
  12. Click Save Changes.
  13. Click Advanced in the left column.
  14. (Optional) If you decide to use the Facebook API, add the description to appear in your user's news feed for your app.
  15. Add your contact information and Privacy Policy URL.
     Note: Privacy Policy URL is a new feature and is required.
  16. Click Save Changes.
  17. On the Application page, copy the App ID and the App Secret as you will need these values when you create your index.php file in step 5.

Step 6: Create the Facebook Application

  1. Log on to Facebook and then open the Developer application.
  2. Click on the link for your application from the "Recently Viewed" list.
  3. Click Edit Settings and complete the following:
    1. On the Canvas page, enter the name for your application. It needs to be over seven characters.
    2. Canvas URL: This is the path to your PHP file. Be sure to add a backslash (/) at the end of the URL (e.g., http://www5.oclc.org/questionpoint/fb/).
    3. Secure Canvas URL: This is the path to your secure PHP file. Be sure to add a backslash (/) at the end of the URL (e.g., http://www5.oclc.org/questionpoint/fb/).
  4. Click Advanced and complete the following in the Canvas settings section:
    1. Canvas Type: Set to IFrame
    2. Canvas Width: Set to fixed
    3. Canvas Height: Set to Fluid
    4. Social Discovery: Set to Enabled
    5. Bookmark URL: Leave blank
    6. Tab URL: Enter the URL path to your unsecure index.php page here (e.g., http://www5.oclc.org/questionpoint/fb/).
    7. Secure Tab URL: Leave this blank. Enter the URL path to your secure index.php page here. (e.g., https://www5.oclc.org/questionpoint/fb/).
    8. Edit URL: Leave this blank
  5. Click Save Changes. When you click Save Changes, you will be taken to your application’s developer page. You can use the links on the right of this page to make any changes or corrections to your application.

Step 7: Install your App to your page

  1. Load your App's install link. While logged into Facebook with the account as the editor of the page you wish to add the app to, enter this URL in your browser’s address bar: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL.
    • YOUR_APP_ID and YOUR_URL can be found in your app settings.
    • Example: https://www.facebook.com/dialog/pagetab?app_id= 104560596168612&next=https://capricalibrary.org/questionpoint/fb.html
  2. Open the URL from step 1 in a web browser. This will open the following dialog: Click the Choose Facebook Pages drop down to select the page on which you wish to install the App, and click “Add Page Tab”. A link to the Qwidget will now appear in the Tabs listed on your page’s Tab Row.

If you would like to add your app to the Facebook App Center, please visit https://developers.facebook.com/docs/appcenter/guidelines/.

Step 8: Set your App as the default landing tab (Optional)

You can set the Qwidget to be the default tab that opens when someone lands on your page by following these steps.

  1. Click Account > Use Facebook as Page.
  2. Click Switch for the page you want to edit.
  3. Click Edit Info > Manage Permissions.
  4. Change Default Landing Tab to match the App you want to use.
  5. Click Save Changes.
     Note: As a Page Admin, your default view will be the page's wall.

 

  • Was this article helpful?