Summary

Introduction

GraphJS is a Javascript client-side library to help developers easily enable social features on their web sites. GraphJS is built upon the Pho framework, and it's open source. With only a few lines of code, you can easily add authentication, comments, messages, forum, groups, profiles etc. to your static web pages.

Getting Started

To get started with GraphJS, you need to include graph.js file to your project. Then you can initiate it with GraphJS.init function.

Simply, add this code into your HTML, just before the end of body tag. Don't forget to replace your public ID, theme, and color options. Your public ID should be a string which can be provided by GraphJS after Setup process. Theme option should be a string, and it has to be either 'light' or 'dark'. Color option should be a string representing any color of your preference in HEX format.

...

Events

GraphJS is event-driven. You can trigger certain functions at given hooks. Each method represented under the "Functions" tab in the navigation menu comes with a "after" and "before" hook.

For example, login comes with "beforeLogin" and "afterLogin" hooks. You may use them to trigger certain functions at specific times. Similarly showLogin has beforeShowLogin and afterShowLogin hooks.

You may bind a function to a hook by using GraphJS' on method. So, in order to trigger a console.log after logging in, you type in:

...

Please note, the "before" events may interrupt the progression of the call. The code block fired after the "before" event must finish with the goToNextStep(true); call. This ensures that the actual call gets executed.

GraphJS on Wordpress

It's very easy to install and use GraphJS on Wordpress, the most popular CMS (content management system). Once logged in with your admin credentials, all you need to do is to go to the Extensions page in your admin dashboard, search "GraphJS" and install. Then you can use all GraphJS tags described in this documentation using brackets like [graphjs-forum] instead of greater-than >, less-than < signs (e.g. <graphjs-forum>).

Below you can watch a tutorial to show you how: