How to Add a Flickr Badge to Your Website

eXo Platform 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.

To add a stream of fresh, colorful content to our website, we wrote a simple gadget that displays a Flickr badge. A Flickr badge will show a sample of recent photos from a certain user or group photo stream, photos with a specified tag, or randomly generate from all public streams.

This tutorial will guide you through the process of integrating a Flickr badge into your website’s homepage.

To be able to complete this how-to, you will need a recent version of eXo Platform, up and running. You can download a 30-day trial from our Try eXo page.

Step 1: Generating the Flickr Badge

To integrate the standard Flickr badge, first go to the Flickr badge generator page. Follow the steps to create the type of badge that you want. Copy the code generated in the last step.

Step 2: Creating the Gadget

Converting the HTML badge into a gadget will make it easier for users to add it to any page, without having to mess with the code. 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 330. In the CData tag, paste the code provided by Flickr.

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 “Flickr”). When you are in your gadget, select “Click here to add into categories”. Choose the category “Gadgets” and validate.

Step 4: Inserting the Badge in Your Homepage

Now you are done with the configuration, so you can insert your new Flickr badge 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 Flickr badge, 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 Flickr photo stream integrated in your homepage. You can also quickly integrate any kind of widget into your portal following this process.