Emre Sokullu
Blog
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 Grou.ps. 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:
<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 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 Blocksplain.com, 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:
The exact code used to achieve this native look’n feel is as follows:
https://gist.github.com/esokullu/855478c8df5aac6a9d64486ca555c529.js
As you can see there are three steps:
- 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.
- 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/v1/graph.js
- 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 (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:
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:
https://gist.github.com/esokullu/6e8b701ef3c261f698fa8f3baa0c240e
Of course, GraphJS is not only about messaging. With the <graphjs-comments> tag, you can add comments to any web
Or using a tag like “<graphjs-forum-thread access=”public” id=”50a5a634eed9d6dad5f64daa3bef6587" />” you can display a single forum thread:
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.”
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 https://graphjs.com 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 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: 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.
tags: