Rashed Talukder

Creating a Twitter Widget Custom View Tile with Configuration

Blog Post created by Rashed Talukder on Sep 22, 2015



Social media is an important part of our digital lives and there is hardly anyone who hasn't used Twitter; there's even smaller percentage of companies that don't leverage this platform to engage with their customers. It's a great source of 140-character news and updates and it's also a great feed to add to your Jive Cloud instance. In this blog, I'll be writing about how you can create a Jive-hosted Custom View Tile with Configuration—and that means no middleware required!


This post and package was created/inspired by the questions posted in The specified item was not found.


The Goal

While the GitHub package is included in this post and it's configurable to display any stream you wish, this pattern is to demonstrate how to create a Jive-hosted Custom View Tile and possibly adapt it for other feeds (e.g. Facebook, Google+, WordPress, etcetera).


Tools Used


Files Modified

  • /tiles/[Tile Name]/definition.json
  • /tiles/[Tile Name]/public/view.html
  • /tiles/[Tile Name]/public/configuration.html
  • /tiles/[Tile Name]/public/javascripts/configuration.js
  • /tiles/[Tile Name]/public/javascripts/view.js
  • /jiveclientconfiguration.json (optional)
  • /tiles/[Tile Name]/public/stylesheets/main.css (optional)


Get the Files on GitHub

jivesoftware/twitter-widget-tile · GitHub



Build a Twitter Tile w/o Middleware using Jive's Custom View Tile


Create The Foundation: a Jive-SDK Example

To begin building our add-on, we're going to be requesting help from the mighty Jive-SDK to create an example for us that will take care of most of the nuances like tokens, unique ID's, and file structure. We'll be using this example project to modify and build our tile. In order to get started, first make sure you have the Jive-SDK installed on your machine by following Getting Started > Installing the Jive Node SDK. After that, create a folder for your project, open up terminal/command prompt, navigate into that folder and run the following commands:

jive-sdk create tile-app-internal --name="twitter-widget-tile"
npm update



Making a Twitter Widget

twitter widget configurator.pngTwitter offers a Widget Configurator that will allow you to customize their widget and hands you code that you can paste in to your tile. Their widget allows you to control some aspects of the view external to the configurator by adding embedded timeline attributes to the anchor tag that is provided. The options we included in our tile reflects the look of our Jive instance, yours can/will vary, but the recommended height to be set within the configurator is 300px. We will modify that later in our code and user selected configuration window, but it is a good place to start.



Configuring the Add-on

We will be modifying some of the default configuration from our sample app and adding some features and setting page types that the Tile will need in order to function correctly and be added to anywhere we'd like. We want the Tile to have access to the Jive V3 API's, JQuery 1.11, and the Tile API features—as well as allow this to be installed and view in a PLACE, USER, and NEWS feed (we are choosing to not display on mobile). Another change is that we are setting the icon images for the tile installation to be at the root of the tile directory and adding the image assets to the root of the /tiles/[Tile Name]/ directory.


Modified lines in /tiles/[Tile Name]/definition.json:

"displayName" : "Twitter Widget Tile",
"name" : "twitter-widget-tile",
"description" : "Configurable Twitter feed widget tile",
"pageTypes" : [ "PLACE", "USER", "NEWS" ],
"icons": {
        "16": "extension-16.png",
        "48": "extension-48.png",
        "128": "extension-128.png"
"config": "/twitter-widget-tile/configuration.html",
"view": "/twitter-widget-tile/view.html?features=jq-1.11,core-v3,tile"


You can add/change the description of the add-on to suit your needs in /jiveclientconfiguration.json (optional).



The Configuration Window

The configuration window will consist of two user configured inputs—a twitter widget ID string (the numerical ID will exceed the floating point precision of JavaScript, so it must be set to string) and a number for the height. Upon submit the data is stored in the config["data"] object, which will later be accessed by the view.


Editing the Configuration HTML

We provide instructions in the UI of the configuration window to help enable the end user successfully fill out the form. A required Twitter Widget ID (from the Widget Configurator) and a self-validating number input for height are the only elements needed in the form.


/tiles/[Tile Name]/public/configuration.html

<p>Create and get data-widget-id from <a href="https://twitter.com/settings/widgets/" target="_blank">here</a>.
    Twitter Widget ID:
    <input class="j-text" id="twitterID" type="text" name="twitterID"  required />
    Height of Tweet tile (px):
    <input class="j-text" id="tileHeight" type="number" name="tileHeight"  max="500" min="120" value="300" step="1" />


Editing the Configuration JavaScript

Since we have access to the config{} object, we can store name value pairs in our config["data"] object for the view to read. We also are storing this data if a user were to go back to the configuration screen after it's first configured. The object is kept within the Jive service.


/tiles/[Tile Name]/public/javascripts/configuration.js

// config will initially be empty, this defaults to load the @jivedev twitter feed
// the data-widget-id must be a string since the length exceeds JS' floating point precision
var json = $.isEmptyObject(config["data"]) ? { "id": "643568438426734592", "height" : 300 } : config["data"];
// populate the input dialog with config data
$("#twitterID").val( json["id"]);
$("#tileHeight").val( json["height"]);
// store the updated values into config on button click
$("#btn_submit").click( function() {
    config["data"] = { 
    "id" : $("#twitterID").val(),
    "height" : $("#tileHeight").val()
// send config to service
jive.tile.close(config, {} );



The View Window

Most of the work for the view is provided by the code from the Twitter Widget Configurator; along with a few modifications.


Editing the View HTML

We can paste the anchor tag from the tool into the <body> of our HTML file and remove the data-widget-id property from it—this will be added later using JQuery. We are also adding some customization to our widget through the data-chrome property and an ID out of personal preference.


/tiles/[Tile Name]/public/view.html

<a class="twitter-timeline" id="tweets" data-dnt="true" href="https://twitter.com/jivedev" data-chrome="nofooter" width="300">Tweets by @jivedev</a>


Editing the View JavaScript

We add the a data-widget-id and height properties that were received from the configuration window. After doing so, we call the Twitter widget script provided from the configurator (with a few personal tweaks) and use the asynchronous ready() method to bind the rendered event, which will trigger the gadgets.window.adjustHeight() method for our little tile.


/tiles/[Tile Name/public/javascripts/view.js

    $("#tweets").attr({'data-widget-id' : config["id"], 'height' : config["height"]});
    //Calls the twitter widget.js and creates the elements for feed list
    window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        t._e = [];
        t.ready = function(f) {
        return t;
    }(document, "script", "twitter-wjs"));
    twttr.ready(function (twttr) {
        twttr.events.bind('rendered', function(){



Build Tile With Jive-SDK

Use the command below in terminal/command line to build and package the Jive hosted tile (no middleware) that you can then add to your Jive Instance.

jive-sdk build add-on --apphosting="jive"



Hot Tips

  • For testing JavaScript iterations (HTML files will be hosted by Jive), check out Ngrok: Warp Speed for Your Integration Iterations and use the jive-sdk create tile-app-external command in your command line to create a package that will let you test out the configuration and view scripts

  • The Twitter Embedded Timeline can be dynamically inserted by using the twitter.widget.createTimeline function
  • You can load multiple feeds/widgets in one tile



What's Next?