“Facebook Open Graph Actions” Documentation by “Chris Houghton” v1.0

---

“Facebook Open Graph Actions”

---

This is not an installation guide. For a full setup guide for getting Open Graph Actions working on your site, please install the plugin and go to: "FB OG Actions > Setup Guide".

Table of Contents

1. CSS Files and Structure
2. JavaScript
3. Facebook API
4. PHP Code
5. Image Assets

---

A) CSS Files and Structure - top

There is one CSS file in this plugin, including the stylings for the plugin in the front and back-end. It is separated into the following sections:

	/* === General styles === */

	some code

	/* === Sidebar ===  */
	
	some code
	
	/* === Single page === */
	
	some code
	
	/* === Admin === */
	
	some code

Note that the CSS works closely with Javascript, and that a number of elements may have display:none; assigned to them, only to be changed by the javascript at a later time.

This plugin should come fully ready for implementation to your site, but if you need to edit any of the CSS, we recommend you work out which elements need to be changed, and then override them with your changes using the !important tag in your theme's style.css. This will protect your changes from being lost when next updating the plugin.

---

B) JavaScript - top

This theme imports one Javascript file: fb-og-actions.js. This javascript file runs javascript functions to allow users to:

1. Allow users to sign up for your app
2. Interface with the Facebook API
3. Query the database via ajax

This plugin requires the Facebook Javascript SDK, and jQuery. The Setup Guide for this plugin provides full instruction on how to add these to your site. Why these files are necessary:

1. The Facebook Javascript SDK is a way to integrate your site with Facebook. Without this file, using this application would not be possible.
2. jQuery is a javascript framework that allows the writing of simpler and quicker code.

---

C) Facebook API - top

As mentioned briefly in the previous section, this plugin uses the Facebook API, through their Javascript SDK. Most of the code relevant to this is "behind the scenes", found in fb-og-actions.js. The main Facebook API functions used are:

1. Checking if the user is logged in, and displaying the correct html
2. Logging the user in, with the appropriate permissions
3. Creating an Open Graph Action (read, listen, watch etc)
4. Deleting an action

---

D) PHP Code - top

This plugin uses a lot of PHP code, using a basic Model-View-Controller class structure. While there are a number of PHP functions and methods behind the scenes, unless you wish to radically change how the plugin works, this can be reduced to 3 main functions:

1. fb_og_actions_init() - triggers javascript functions to load after the Facebook SDK is loaded
2. fb_og_put_sidebar() - puts the sidebar html, which then gets modified by jQuery automatically to show the appropriate sidebar information.

Most of the rest is found within model.php or controller.php:

1. model.php - the "Model" of the application. Deals with all the database functions and queries, getting the data to be returned to the controller.
2. controller.php - the "Controller" of the application. Puts and gets data from the model, and outputs it (if necessary) into a view. Deals with all ajax functions.

All other PHP files are within the "views" folder. These files are never run on their own, rather they are included within functions (usually the controller) to show appropriate outputs.

---

E) Image Assets - top

This plugin includes a number of basic image assets, found in the /images folder within the plugin:

1. General images such as ticks, crosses, and loading gifs are found.
2. In /images/screenshots, there are a number of images used to aid in the setup process.

---

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

Chris Houghton

Go To Table of Contents

---