Gadget/Widget in Liferay

thumbnail
Kailash Yadav
Published Date8 Years Ago - 40825 Views
    We hear about widget/gadget in daily life like we can add gadgets on Windows-7's desktop. Widget is an application or icon which performs a specific functions on desktop or website. For example, if you want to add counter or social site icons, you can add a script in your page and that widget available on your page. So a widget is a piece of reusable code that you can plug into virtually any website. A gadget is same like widget but it only works on a certain website or a specific set of websites. Gadgets are simple and easy to deploy.
 
OpenSocial Gadget
    OpenSocial is a public specification for creating web applications using standard technologies like HTML, CSS, and JavaScript. OpenSocial applications called gadgets which are similar to portlets because gadgets can be added to portal’s pages like portlets.
Figure 1 - OpenSocial Gadget
 
Share your portlet as widget
    Liferay has feature which convert your portlet as standalone widget. You can share your portlet as a widget to any web site or Facebook or OpenSocial gadget.
To share your portlet, go to portlet configuration and click on Sharing tab there. Sharing tab has following options:
Figure 2 - Portlet Share Configuration
  1. Any Website: It has JavaScript code. You can copy and paste on your website where you want to show portlet. You can also allow your users to add this widget on their websites.
  2. Facebook: It provide ability to add your portlet as an application on Facebook page.
  3. OpenSocial Gadget: Liferay portlet can be used as Open Social Gadgets on any OpenSocial-compatible pages like iGoogle. You can also allow your users to use this OpenSocial Gadget.
  4. Netvibes: You can also share your portlet on Netvibes portal. You can also allow your users to use this Netvibes widget.
  5. Friends: It allows you to give your friends permission to add the application as a widget to another web site.

Figure 3 - User's Share Options

Using OpenSocial Gadget in Liferay

    You can add any Gadget on Liferay page. Liferay Marketplace has OpenSocial Gadget plugin. This plugin can be used in two ways to add gadgets in Liferay pages.

Adhoc Gadget: It is quick way to add Gadget on page. You need to add OpenSocial Widget portlet from Gadget category. Now open portlet configuration and set gadget URL which you want to add on page.

Figure 4 - OpenSocial Gadget Plugin

Portal-wide Gadgets: In this way, you can configure gadget at one place and use that as a portlet on liferay pages. To add gadget, you need to go Control Panel -> Apps -> OpenSocial Admin. There you need to provide Gadget URL and category in which your Gadget will available as portlet. Now a portal admin can add that Gadget on page like we add portlets on page.

Figure 5 - OpenSocial Admin

Liferay also provide possibility to configure oAuth credentials. When we add Twitter Widget, it also ask Consumer Key and Consumer Secret which you can get from twitter.com

OpenSocial Gadget Editor 

OpenSocial Gadget plugin also provide a gadget editor where you can create your own gadget and publish it. It generate a unique URL which can be used on any OpenSocial-compatible pages to show that gadget. To create new gadget, you need to go Site Administrator  -> Content -> OpenSocial Gadget Editor. It has editor to write OpenSocial Gadget XML. When you publish, it generate public gadget URL.

Figure 6 - OpenSocial Gadget Editor

 
 
 
 
Comment (1)

Related Assets

More Blog Entries

thumbnail

Bootstrap 3 in Liferay 6.2, yes! that's possible

thumbnail
Marcos Castro
24 May
33
thumbnail

Creating configurable DDL templates with structured web content

thumbnail
Allen Ziegenfus
27 May
0
Blogs
(You)
8 Years Ago
[...] In my previous blog, I wrote about Gadget/Widget and how we can use it in Liferay. Liferay provide great support of Gadgets. Liferay has out of box features like share portlet as widget and... [...] Read More
Please sign in to reply.