GraphJS Tutorial: Ushering in a new era of the Social Web

Connecting people around shared interests, passions and goals, and helping them solve problems and discover new horizons, is a hard yet noble problem. It should be the ultimate goal of the social web.

It’s certainly our goal at And today we’re releasing GraphJS, an open source set of “stickers” that enables social capabilities on any web page. It makes it easy decorating your site with social features like:

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


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 platform that is “componentized” by default.

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, a self-hosted Wordpress blog by Richard MacManus that tracks all things blockchain related. The following is the“<graphjs-message>” tag in action on their Contact page:

Image for post

The exact code used to achieve this native look’n feel is as follows:

As you can see there are three steps:

  1. The tag itself. (graphjs-messages-composer in this particular instance). The “to” attribute is Richard’s own ID. The “anonymity” attribute is set to be “on”, meaning anyone can send a message, and not just registered members. Last but not least, you see some custom CSS with the “style” attribute.
  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
  3. Finally, you initiate the GraphJS tags with the “GraphJS.init” call. The first argument is the public ID of the site (assigned by the second one sets the primary color (which is reddish in this example) for the tags that will be displayed on that page.

The very same tag (graphjs-messages-composer), with different attributes (dark theme, and purplish primary theme color), gives the following output:

Image for post
from (my personal Jekyll site hosted at

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:

Of course, GraphJS is not only about messaging. With the <graphjs-comments> tag, you can add comments to any web

Image for post

Or using a tag like “<graphjs-forum-thread access=”public” id=”50a5a634eed9d6dad5f64daa3bef6587" />” you can display a single forum thread:

Image for post

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.”

Image for post
GraphJS shortcodes displayed in Wordpress admin panel
Image for post
You need to enter your GraphJS UUID in order to enable GraphJS on your Wordpress instance.

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;

People build forums, wikis, social networks, blogs all the time. What we do here is simply to help you integrate them all easier, like you add a Gist code block to a web page. Our hope is that this will ramp up the utilitarian usage of these social tools versus the current vanity-centric consumption patterns, and eventually, we’ll end up with a better social web.

Phở Networks, the open source graph app library which we announced last year, set the foundations for GraphJS, and possibly for all the backend developers out there to build infinitely scalable social media experiences in the cloud with ease and at pace. Now GraphJS is aimed at bringing it closer to a larger group of people; web developers.

You can try it out at for as low as $8/month. Don’t forget, you can always export the data and run it on your own servers too. Because the servers behind use exactly the same code that is available at and it’s AGPL licensed, which ensures its perpetual availability. As for the frontend components (, 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, 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

PS: special thanks to Ozan, and Barun for their relentless work on the new app, Ceren for the visuals, Richard and Chris for their review of this post.

📍Reno NV 📍Istanbul, Turkey 👨🏻‍💻 Volupta LLC 👨🏻‍💻 RISG Corp 📈 0 to 1 Ventures (Wordpress,, BTC)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store