GraphJS Tutorial: Social Widgets for Your Website And Application

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: GraphJS a powerful authentication infrastructure forum profiles groups messaging ratings comments and , as easy as adding an HTML tag such as: more 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 " by default. MIT license'd componentized" 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 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 tag. The exact code used to achieve this native look’n feel is as follows: https://www.emresokullu.com graphjs-blog box "disabled" graphjs-blog script type "text/javascript" src "https://graphjs.com/graph.js" script script GraphJS.init( , { color: } ); "CF8A4452-B3A4–4BD3–833F-6C7E0D7D2431" "#ed1c24" script As you can see there are three steps: The tag itself. ( in this particular instance). With other tags, you may want to use attributes to modify the behavior; for example comes with the " " and " " attributes, which you can find in its . The " " 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 " " set to be " ", anyone can send a message, and not just registered members. Plus, you can add some custom CSS with the " " attribute, as you'd normally do. graphjs-blog graphjs-messages-composer to anonymity documentation to anonymity on style This is the standard "include the GraphJS library" step. Had you made some changes with the , and compiled using "node", you would include that file, instead of the standard code https://graphjs.com/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 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) 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 . 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: Javascript APIs 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 tag, you can add comments to any webpage too: Or using a tag like you can display a single forum thread: Integrations Best of all, if your web site is powered by Wordpress, you can enable GraphJS on any page or post using our . To install, just click Plugins in the admin panel, and search “GraphJS.” Wordpress plugin 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 for free. 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. https://graphjs.com https://graphjs.com https://github.com/phonetworks/graphjs-server 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. https://github.com/phonetworks/graphjs https://graphjs.com 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 , an open-source decentralized and whiteboard-friendly programming language. In other words, by using GraphJS components you'll be contributing the decentralized web movement. 🎉 Phở Networks