GraphJS Tutorial: Social Widgets for Your Website And Application

GraphJS is an open-source set of "stickers" (or widgets) that enables social capabilities on any web page. It makes it easy decorating your site with social features like:

• a powerful authentication infrastructure
• forum
• profiles
• groups
• messaging
• ratings
• comments

and more, as easy as adding an HTML tag such as:

<graphjs-forum></graphjs-forum>

Why is it important to componentize the social web like this, and make each functionality embeddable similarly to YouTube videos?

That’s because communities are already online, primarily on a forum, or perhaps a blog, Facebook Page, wiki, even a static website, and they don’t want to leave everything behind and start things over on a new platform for a single additional functionality that they may need. And gluing multiple such tools (e.g., a blog and a wiki) is never an easy feat.

Today, we embrace this reality and launch this new open source (MIT license'd) platform that is "componentized" by default.

Tutorial

GraphJS makes copy/pasting social features on any web page effortless. In other words, these functionalities can now go wherever your community already is. To illustrate this, take a look at my personal webpage at https://www.emresokullu.com created using Jekyll a static website generator, and hosted for free on Github. Adding a blog to this pure HTML page was as easy as adding a

<graphjs-blog>

<!-- step 1 -->
<graphjs-blog box="disabled"></graphjs-blog>

<!-- step 2 -->
<script type="text/javascript" src="https://graphjs.com/graph.js"></script>

<!-- step 3 -->
<script> 
  GraphJS.init("CF8A4452-B3A4–4BD3–833F-6C7E0D7D2431",  
    { color: "#ed1c24" }
  );
</script>

As you can see there are three steps:

1. The tag itself. (

   graphjs-blog

   in this particular instance). With other tags, you may want to use attributes to modify the behavior; for example

   graphjs-messages-composer

   comes with the "

   to

   " and "

   anonymity

   " attributes, which you can find in its documentation. The "

   to

   " attribute, if specified, disables the member-picker, and limits the widget's sending capability to the chosen person, so it can be used as a "contact form". With "

   anonymity

   " set to be "

   on

   ", anyone can send a message, and not just registered members. Plus, you can add some custom CSS with the "

   style

   " attribute, as you'd normally do.
   
2. This is the standard "include the GraphJS library" step. Had you made some changes with the code, and compiled using "node", you would include that file, instead of the standard https://graphjs.com/graph.js
   
3. Finally, you initiate the GraphJS tags with the “GraphJS.init” call. The first argument is the public ID of the site (assigned by https://graphjs.com) and the second one sets the primary color for the tags that will be displayed on that page. You could have styled the tags on a per-component basis, but since we want a more persistent look across the widgets on our website, we set it up here in the init call once, and we don't specify any styles on the individual tag components. For full set of parameters you may use to modify the behaviour of the init call, check out the "Getting Started" section on https://graphjs.com/docs

Advanced Usage

If you know a little bit of Javascript and you need an even more custom look and/or functionality than what the GraphJS tags offer, it is possible to accomplish that using our Javascript APIs. For example, by attaching the following snippet to a custom styled static HTML form, you can let your members send a member a private message:

GraphJS.sendMessage( 
 "48760696099368953dd71a90b727acba", // the recipient's ID
 "hey Emre, how is life?", // the message
 function(response) {
   // Do something 
});

Of course, GraphJS is not only about messaging. With the

<graphjs-comments>

Or using a tag like

<graphjs-forum-thread access=”public” id=”50a5a634eed9d6dad5f64daa3bef6587" />

Integrations

Best of all, if your web site is powered by Wordpress, you can enable GraphJS on any page or post using our Wordpress plugin. To install, just click Plugins in the admin panel, and search “GraphJS.”

GraphJS shortcodes displayed in Wordpress admin panel

You need to enter your GraphJS UUID in order to enable GraphJS on your Wordpress instance.

Conclusion

We believe GraphJS is here to enhance the lives of web developers with its wide array of social networking modules. How will it impact the world of community organizers at large and the social networking landscape? That’s really in your hands, and what you create with this.

You can try it out at https://graphjs.com for free. Don’t forget, you can always export the data and run it on your own servers too. Because the servers behind https://graphjs.com use exactly the same code that is available at https://github.com/phonetworks/graphjs-server and it’s AGPL licensed, which ensures its perpetual availability.

As for the frontend components (https://github.com/phonetworks/graphjs), they are static. Which means, if you play with them and create your own stickers, you can host them on Github. But again, if you don’t want to deal with the complexity, just launch it at https://graphjs.com, implement them on your own site, we’ll run and maintain it for you.

I am optimistic that with these building blocks, and their soon-to-be-announced applications, we can build a better, more useful and interoperable social web. If you’re a web developer, we invite you to try it out for yourself at https://graphjs.com.

PS: GraphJS is built on top of Phở Networks, an open-source decentralized and whiteboard-friendly programming language. In other words, by using GraphJS components you'll be contributing the decentralized web movement. 🎉