About widget embed code

From KickApps Documentation

Jump to: navigation, search

KickApps offers two types of embed code, a compatible version that will work on any web page that allows HTML embeds, and a JavaScript version that offers additional features but cannot be used on web sites that don't allow JavaScript, like MySpace and Facebook.

Contents

Compatible Embed Code

Compatible embed code wraps your widget in a vanilla HTML <object> tag. The advantage of this form of embed code is that it's versatile: you can put it on any web page that accepts HTML embeds. Use this form of embed code when embedding on sites like Facebook and MySpace, which do not allow 3rd-party JavaScript.

Compatible embed code and the "Resize widget" Action
You can use this form of embed code in tandem with the Resize widget Action. When the widget re-sizes, the web page on which it is embedded will re-flow (reducing the widget's size will cause space formerly occupied by the widget to be filled in by surrounding HTML elements; expanding the widget's size will cause the widget's HTML element to push surrounding HTML elements out of the way). To avoid re-flow, use one of the special "resizing" versions of embed code as detailed below.

JavaScript Embed Code

JavaScript embed code uses .swfbject, which has a number of useful features including:

  • Flash Player version detection and automatic upgrades (this ensures that people viewing your widget have the version of Flash Player that they need to render your widget correctly)
  • Alternate content (this displays whatever HTML you enter in this section to clients that don't have the correct version of Flash player, which is great for both accessibility and SEO)


JavaScript embed code and the "Resize widget" Action
You can use this form of embed code in tandem with the Resize widget Action. When the widget re-sizes, the web page on which it is embedded will re-flow (reducing the widget's size will cause space formerly occupied by the widget to be filled in by surrounding HTML elements; expanding the widget's size will cause the widget's HTML element to push surrounding HTML elements out of the way). To avoid re-flow, use one of the special "resizing" versions of embed code as detailed below.

Resizing Embed Code

Use this version of embed code in tandem with the Resize Widget Action to resize a widget without causing the web page on which the widget is embedded to re-flow against the updated widget dimensions. This form of embed code will apply the difference between the new and old widths from the right side of the widget.

Resizing-Left Embed Code

Use this version of embed code in tandem with the Resize Widget Action to resize a widget without causing the web page on which the widget is embedded to re-flow against the updated widget dimensions. This form of embed code will apply the difference between the new and old widths from the left side of the widget.

Access widget embed code to make a custom syndication menu

If you'd like to make a custom syndication/share menu, you can populate a Text Input Component with compatible embed code by setting its text to

#{AppContainer.getEmbedCode()}

To let users copy the embed code to their clipboards, apply the Copy to clipboard Action to a Button Component.