Resource Center

eXo Platform 3 provides many features for building rich websites out of the box. But you can also use the platform's web-based IDE to build custom plug-ins or gadgets that add an almost limitless number of capabilities. We wrote a simple gadget that displays a Twitter feed of all the recent company-related tweets, which is an easy way to display fresh content on a site's homepage. This tutorial will guide you through the process of creating the Twitter gadget and adding it to a website page.

To be able to complete this how-to, you will need a recent version of eXo Platform, preferably 3.0.3 or later, up and running. You can download a 30-day trial from our website homepage.

Step 1: Generating the Widget

To integrate the standard Twitter gadget, first go to the Twitter widget page. Fill in the search query for the type of feed you want to display (in our case, we want to display any tweets from our company account or our CEO, so we entered "@exoplatform or @benjmestrallet"). In the dimensions menu, change the width to 215. Click on "Finish and Grab Code". Copy the code.

Step 2: Creating the Gadget

Go to the eXo Platform portal and login to the sample ACME website as the user John. In the "My Spaces" drop-down menu, go to the IDE; from here click on "create a gadget". Specify a name for your gadget, and set the height to 410. In the CData tag, paste the widget code provided by Twitter.

Our code looks like this:

<!--?xml version=<span class="code-quote"-->			"1.0" encoding=<span class="code-quote">"UTF-8"</span> ?>
<module>
<moduleprefs class="code-quote" title="<span">"Twitter Feed" height=<span class="code-quote">"410"</span> />
<content class="code-quote" type="<span">"html">

<!--[CDATA[ 

</span-->
<script><span class="code-keyword">new</span> TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'exoplatform OR @benjmestrallet',
  interval: 6000,
  title: 'eXo Feed',
  subject: 'Across the sky',
  width: 215,
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: <span class="code-keyword">false</span>,
    loop: <span class="code-keyword">true</span>,
    live: <span class="code-keyword">true</span>,
    hashtags: <span class="code-keyword">true</span>,
    timestamp: <span class="code-keyword">true</span>,
    avatars: <span class="code-keyword">true</span>,
    toptweets: <span class="code-keyword">true</span>,
    behavior: '<span class="code-keyword">default</span>'
  }}).render().start();
</script>]]>

</content>
</moduleprefs></module>​

If you want to see your gadget working from within the IDE, click on "Run" > "Show preview" in the menu. To finish, go to the "Run" menu and click on "Deploy gadget to GateIn".

Step 3: Adding the Gadget to the Application Registry

Before you are able to insert the gadget in a page, you need to make it available to webmasters by adding it to a category in the application registry.
To do this, go to "My spaces" > "Portal Administration" > "Applications Registry". Click on the button "Gadget" and find your gadget on the list (we named ours "Twitter Feed"). When you are in your gadget, select "Click here to add into categories". Choose the category "Gadgets" and validate.

Step 4: Inserting the Widget in Your Homepage

Now you are done with the configuration, so you can insert the new Twitter widget on the Acme homepage. On the homepage, from the "Site Editor" menu, select "Edit page". In the editor, you simply drag and drop the gadget to the page. If you don't want to have all the portlet frame decoration surrounding the Twitter widget, you can click on the edit button and uncheck "Show Info Bar", "Show Portlet Mode" and "Show Window State", then save.

Conclusion

In only 4 simple steps, you should now have a custom Twitter feed integrated in your homepage. You can also quickly integrate any kind of widget into your portal following this process.