Documentation

Create, customize, and publish a widget

From KickApps Documentation

Jump to: navigation, search

Contents

Create a widget

  1. Log in to the KickApps Affiliate Center.
  2. Click the App Studio tab.
  3. Select File > New.
  4. Drag and drop a widget or components from the Templates, Components, Plug-Ins, or Advertising panels on the left.

Define content for your components

To define the content that you'd like a component to play or display,

  1. Select a component.
  2. A Content panel will appear at the top of the properties panels on the right.
  3. Different components consume different kinds of content. Players consume RSS feeds, URLs to media, and playlists. If you need help negotiating the various options in your component's Content panel, turn on help icons by clicking Help > View help icons. You'll then see a blue help icon adjacent to your component's name at the top of the column on the right. Click on this icon to view detailed information pertaining to the selected component, including its various Content options.

    Kickapps_app_studio_component_help_icon.png
  4. If you want your component to render content from your KickApps system, see below for information on creating an RSS feed in the Feed Builder.

Create a feed

Widget components consume RSS feeds as their content. To create a feed from content in your KickApps system,

  1. Log in to the KickApps Affiliate Center.
  2. Click the App Studio tab.
  3. Click the Feed Builder sub-tab.
  4. Click the Create button.
  5. Enter a title for your feed.
  6. Select one or more media type checkboxes.
  7. Make use of whatever filters or sort options you need.
  8. Click Save.

Customize components' properties

In addition to its content, each component has a number of properties that you can configure. Click through the properties panels in the right column to customize your components.

Save

When you're satisfied with your widget,

  1. Select File > Save.
  2. Give your widget a unique name, and, optionally, an External Name and Description (these are shown when widgets are shared to sites like Facebook).
  3. Press Okay.

Publish your widget

You can publish your widget on any web page that accepts HTML embeds, including Facebook and MySpace. There are three ways to publish widgets:

1. Copy widget embed code onto a web page

2. Click-through to post your widget to Facebook or MySpace

3. Install widgets on your KickApps pages


Copy widget embed code onto web pages

To add a widget to a web page by pasting its embed code,

  1. Select File > Publish.
  2. Click on a widget in your widget list.
  3. The embed code for your selected widget is located in the text field under the "Publish to the web" tab at right. The dropdown above this field enables you to pick from two different types of embed code:
    1. Use Compatible embed code if you're embedding on a 3rd party site that doesn't support JavaScript (like MySpace)
    2. Use JavaScript embed code if you're embedding on your own site or any other site that doesn't mind if you use JavaScript. The JavaScript embed code has some powerful features, including the ability to specify alternate content for agents that don't have Flash (this is great for getting the pages containing your widgets indexed by search crawlers) and Flash version detection and automatic upgrades (to ensure people viewing your widget have the appropriate version of the Flash player that will render it). It also has a workaround for an issue in some browsers that forces the user to click in before loading your widget. JavaScript embed code is the preferred method for deploying KickApps widgets.
  4. Once you've selected the type of embed code that you need, click the "Copy Embed Code" button to copy the code to your clipboard.
  5. Paste the widget embed code into an HTML file, your profile on a social networking site, or anywhere else that accepts HTML embeds.


Post your widget on Facebook, Twitter, or MySpace

  1. Select File > Publish.
  2. Click on a widget in your widget list.
  3. Click the "Publish to the web" tab under the widget preview image. You'll see buttons for Facebook and MySpace.
  4. Click the Facebook icon to add your widget to Facebook, the Twitter button to add your widget to Twitter, or the MySpace button to add your widget to MySpace.
  5. Follow the instructions to log in and add your widget to the network you've chosen.


Install widgets on your KickApps pages

If you're using KickApps apps that provide hosted web pages, follow the directions below to install widgets to these pages from the App Studio. If you're not using KickApps hosted pages, you should be! Learn how.

  1. Select File > Publish
  2. You'll be taken to the Widget Manager. In the Widget Manager, select the Publish to KickApps pages tab beneath the widget preview image.
  3. Within this tab, check off the boxes next to the pages to which you'd like to publish your widget. If you're not sure which page is which, click their titles to visit them in a new browser tab.
  4. To assign different widgets to different pages within the same screen, click the "Manage widgets on all KickApps pages" link, and such a screen will appear in a pop-up.
  5. Click Save. Your updates will go live within 5 minutes.


Special Note on Feeds

When you publish a widget to a KickApps page, the widget's content will be populated dynamically by the page. For example, if you assign a particular feed or video to a video player in its Content panel in the App Studio, and then publish that video player to your KickApps-hosted video play page per the instructions above, when the video player loads on your video play page, it will play the video associated with that page, rather than the feed or video you assigned it in the App Studio. If you prefer to override the content supplied by the page with the content setting you make in the App Studio, you can do so by applying an Action on the component whose content you wish to define in the App Studio.


Changing the Default Player on Community Homepage

For example, by default the video player installed on the KickApps-hosted Community Homepage is set up to play the most recent video. If you would like it to play a different video or feed, open up the video player assigned to the Community Homepage in the App Studio, and:

1) Select the video player component, and

2) Add a new Action to it: 

   Event => "Component Loaded"
   Action => "Update Property"
   Component => your video player name
   Property => "mediaURL"
    MediaURL ==> see Step 3, below


3) The value of "mediaURL" should be the URL of the feed or video you wish to play. (Tip: if you want to play a feed saved in the Feed Builder, go to the Feed Builder, select that feed, and click the Copy URL button near the top of the right column - it will be something like: 
 http://serve.a-feed.com/service/getFeed.kickAction?feedId=900256&as=1234567).

4) You can leave the Select Feed: setting under Content on the AppStudio widget page alone, whatever you set here is overridden by the Action above.

Note: if your widget is larger than the space allotted for it in the selected page, you may need to alter the slot dimensions using CSS - or reduce your widget size!

Next Steps

Add rich interactivity to your widget with Actions. |

Retrieved from "http://www.kickapps.com/documentation/index.php/Create,_customize,_and_publish_a_widget"