Widgets
From Flux Developer Portal
Contents |
Generating 2.0 Widgets For Your Pages
Please note there is a new Widget Developer Kit available for the use of 3.0 widgets. Information below pertains to the WDK 2.0 widget versions and we suggest new sites use the newer 3.0 versions located here [[1]].
flux Communities that integrate widgets can generate the code for the widgets through the Widget Wizard interface when logged in as the Community Admin. Widgets allow a flux Community to surface community activity on pages not powered by the flux Platform – for example, "Members online now". To access the widgets wizard, log in to your Community as the Community Admin, select the Community Manager from the "More" menu, and go to the "Widgets" tab.
Widget Integration Pre-Requisites
For widgets to function, a unique community ID must be used. This is known as the Community UCID. When the community is setup this will be provided.
Two script codes must be placed on each page which uses the widgets as follows. These codes must be placed directly after the ‹body› tag of the page:
Where:
[Flux Widgets URL] is http://widgets.flux-staging.com for staging/dev environment, and http://widgets.flux.com for live environment
[Community UCID] is the unique community ID. This is in the form of a 28 character hexadecimal string.
Adding Widgets to an Existing Site
Once the pre-requisites are completed, and widget codes are generated, the widget codes can be added to the site. Simply find the correct place in the source code for the site and embed the widget codes. The widgets should immediately be visible on the site.
Note, when adding the comments widget to a content detail page, any existing native comment code should be hidden.
CSS Customization
CSS styling for widgets is inherited from the community CSS. Therefore, the widgets are automatically styled when they are added.
Currently there are two types of widgets: DIV-based and IFRAME-based. DIV-based widgets can have their CSS overridden by additional CSS on the publisher site, but IFRAME widgets cannot. To override CSS for IFRAME widgets, changes must be made in the community CSS which lives on the flux servers. Please contact your Community Manager for assistance in updating the CSS of these widgets.
Examples of DIV-based widgets are the QuickMenu, ContentAction, Comments widgets. Examples of IFRAME widgets are People, Videos, and Photos.
An additional document is available to describe how to override CSS for the DIV-based widgets.
flux Widget Troubleshooting Checklist
- Check version of flash available in the browser (http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15507) and update cross domain file.
- Java script support is enabled in browser settings
- Cookies are enabled browser settings
- Put all three java script pieces of a widget into
<body>element not in<head>; - Check hosts file - make sure it is not overriding domains widgets.flux.com and daapi.flux.com;
- Use Fiddler and check crossdomain.xml file on a server that hosts custom markup and/or custom logic of a widget - make sure it has two elements in it:
- Test widget on a stand-alone test page. Ensure that the widget is placed within the following HTML tags.
- If it works on a stand-alone page then it indicates a different problem.
- Ensure the URI parameter is correctly passed with permalink/URI for the content item the widget is bound. It is very important that this permalink/URI matches the format specified during setup of discovery/import of content. Note - this only applies to the following widgets: Content Action, Comments, Usage, FShare
- Ensure that the Access Key parameter for the widget is valid for the current community. If it does not match the community UCID being passed to context.js the widget will not work. The widget pick-up page auto-generates this Access Key for any new widget
- If using both Content Action and Usage widgets, ensure that both widgets use the same rating metric (i.e. ThumbsUp, ThumbsUp/Down or 5Star). All widgets use ThumbsUp by default, but it's important if customizing the rating metric in one widget the same change is applied to the other widget
- If Content Action widget is not allowing to register a vote, make sure that the current logged-in user has not already registered a vote
- If comments widget does not allow a user to comment and the user is not a logged-in community member, check community settings to ensure non community members are allowed to comment.
Types of Widgets
Coming Soon, with examples how to set them up
How to make your own widgets
Coming Soon
