All Articles

Making a KickApps Search Component

Josh — Fri, 12 Jun 2009 22:02:42 +0000

In Making a YouTube Search Component I showed you how to assemble a dynamic search field that would poll YouTube's RSS API and show the results in a list component. In response we got a lot of feedback asking how to make a search component that would work with KickApps, so I've whipped up a step-by-step for this one too:

Drag an advanced video player, a text input component, a button, and a list component to the stage.
Select the button and add a new action to it:
Use this string for the value of the new media URL (replace "Text input 1" with the name of your text input component and the value of theas parameter with your own affiliate site ID, which you can find in any of your KickApps-powered URLs):
http://serve.a-feed.com/service/getFeed.kickAction?as=30483&mediaType=videos&quantity=20&keywords=#{Text Input 1.text}
That takes care of updating the list with search results from your community when users click the search button. But many users are accustomed to pressing the enter or return keys on their keyboards. To do that, add a new action to the text input component. The event will be "Keyboard Enter"; use the media URL from the previous step.
Done. Switch to Preview mode to try it out!

In this example I used the keywords parameter to filter the feed results. This parameter searches for media with the search term(s) within the tags, admin tags, media title, media description and username properties of all media items in your system. If you prefer to search on a narrower parameter like title or tags, just substitute in those parameters. You can find details and more rss filters in the RSS API doc.

If you'd like to import this widget into your App Studio, select Import from the Menu in the App Studio, and paste in the widget source code from the field below.

Make a dynamic counter for a slideshow

Josh — Fri, 15 May 2009 17:19:34 +0000

In the 4.0 Release Note I mentioned that you can build a dynamic counter for a slideshow by populating text components with values from the slideshow. Getting this right is trickier than it sounds, but with a few clicks and some clever JavaScript (thanks Derek!), you too can share in the glory that is the dynamic counter.

How to distinguish KickApps list pages via JavaScript

mauvis — Thu, 14 May 2009 22:24:05 +0000

To distinguish a list page in your JavaScript you can use the trusted Ka.Info.PAGE variable you learned from this tutorial paired with a handy dandy utility function called Ka.Util.getLocationParam - a utility method to get the mediaType GET parameter from the URL. Here's an example:

Code snippet - How to distinguish KickApp's list pages via JavaScript on Snipplr

Make a photo required during signup

mauvis — Thu, 14 May 2009 22:20:25 +0000

Just add this in script tags in your Affiliate Center footer:

Code snippet - KickApps: Make a photo required during signup on Snipplr

KickApps: raise the minimum age to signup on your community

mauvis — Thu, 14 May 2009 22:11:45 +0000

[Sorry but this article has been removed. It will be updated at a later date.]

Cutomize TinyMCE buttons and more

mauvis — Wed, 13 May 2009 19:44:08 +0000

The KickApps platform comes preloaded with a default set of buttons in your rich-text editor but you can customize your own set of buttons with a few lines of JavaScript - either for all rich-text areas or per page.

The example (#1) here changes the rich-text editor buttons for just the add-blog page to have other options such as font-selection. (Wrap it in script tags and place in your AC header.)

A full list of button options can be found here (first column only): http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

For the advanced users wanting to access plugins in the second and third column of the above link, you need to append the plugin name to the variable Ka.Settings.tinyMCE.plugins.

You can also specify up to three rows of buttons by editing the variables Ka.Settings.tinyMCE.themeadvancedbuttons2 and Ka.Settings.tinyMCE.themeadvancedbuttons3.

Default values of all variables are:
Ka.Settings.tinyMCE.themeadvancedbuttons1 = "bold,italic,link,unlink,forecolor,backcolor,bullist,numlist,hr,blockquote,charmap,code,emotions,kickmedia";
Ka.Settings.tinyMCE.themeadvancedbuttons2 = '';
Ka.Settings.tinyMCE.themeadvancedbuttons3 = '';

Ka.Settings.tinyMCE.plugins = "kickmedia,emotions,media";

Other editable values:
Ka.Settings.tinyMCE.defaultHeight
Ka.Settings.tinyMCE.resizingMinHeight
Ka.Settings.tinyMCE.resizingMaxHeight

Note: For security reasons, most but not all plugins from the full plugin list will work on the KickApps platform.

Code snippet - KickApps: Cutomize TinyMCE buttons and more! on Snipplr

Using a Flash cross-domain policy file when hosting your own feeds or widget assets

Matt — Tue, 12 May 2009 12:22:50 +0000

Using non-KickApps hosted feeds or assets/skins in your widgets? Hosting a simple text file on your server can improve its loading speed and reliability.

Due to Adobe Flash Player security, our widgets are not allowed to access/load certain types of content on another server without explicit permission. This access is granted via a special kind of xml file that resides on the server called a Cross-domain Policy File. Without this Flash permission file in place, our widgets have to route these file requests through a proxy server which can cause unnecessary delays or in rare cases interoperability issues.

Adding a Flash cross-domain policy file to your server is easy. Simply add a text file named crossdomain.xml to the same sub-domain as the files you are hosting. The contents of this file should look like this:

<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.a-widget.com"/>
</cross-domain-policy>

Note that a-widget.com is our widget host domain. You can add multiple domains to this file like so http://grammys.com/crossdomain.xml.

For more information on Adobe Flash's Cross-domain policy file, please check out http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html

Selecting Components & Containers

Josh — Fri, 01 May 2009 16:43:29 +0000

There are 4 ways to select a single component or container.

Click on it!
Click on its listing in the Layers panel.
If the item you want to select is part of a container, double-click on its container, then single click on the component you want to select.
If you're working with multiple nested containers, you can always keep track of which container you're in by looking at the breadcrumb trail across the top of the stage. The container that you're in is the last one listed. If you need to select a parent container of the one that you're in, just click on its link.

There are 2 ways to select multiple components or containers.

Click on the stage and drag out a selection area that touches each component and/or container that you want to select.
Hold down the SHIFT key while clicking on the items you want to select.

Selected items can be moved together. With multiple items selected, click on one of the selected items and drag. All selected items will move with your cursor.

Learn how to add selected components to a container.

Controlling unwanted content and Spam in your community

Matt — Thu, 30 Apr 2009 16:00:13 +0000

A thriving community filled with active members can sometimes attract unwelcome guests. If your members report Spam/unwanted messages and postings on your site, here what you and your entire community can do to nip it in the bud:

-Adjust the "Automatic Approvals and Unapprovals" and "Disable Automatically" settings for media, comments, and message boards. You can set it so items must be vetted and approved by your and/or an editor before they can go live on the site.

You can also set a flagging threshold for items (i.e. if X unique users flag a specific item, the item is pulled from the live site). Those settings are found in the various sections of the Configure > Manage > pages of the Affiliate Center.

-Set the Disable Members Automatically flag threshold to 1. Then encourage your community to flag any members who send/post Spam. That setting is found on the Configure > Manage > Members page of the Affiliate Center.

-If you get reports of members Spamming, disable the offending members in the Affiliate Center.

-If you start seeing a pattern in the IP addresses of disabled accounts, add that IP to the Member Blacklist in the Affiliate Center.

-If members complain they're getting email Spam, let them know they can go the Edit Account section of their profile and change their message delivery settings so they only receive messages at their community inbox.

Those simple steps can really make a difference.

Making a YouTube search component

Josh — Mon, 27 Apr 2009 19:38:16 +0000

Use the text input component, a video playlist, and some widget-fu to search and play videos from YouTube, all from within your widget!

Drag an advanced video player, a text input component, a button, and a list component to the stage.
Select the button and add a new action to it:
Use this string for the value of the new media URL (replace "Text input" with the name of your text input component):
http://gdata.youtube.com/feeds/api/videos?orderby=updated&vq=#{Text input.text}
That takes care of updating the list with the search results from YouTube when users click our button. But many users are accustomed to pressing the enter or return keys on their keyboards. To do that, add a new action to the text input component. The event will be "Keyboard Enter"; use the media URL from the previous step.
Done. Switch to Preview mode to try it out!

You can use the same technique to pull in videos or other media from any other site that has an open RSS search API. Just replace http://gdata.youtube.com/feeds/api/videos?orderby=updated&vq= with their RSS search URI. Try making a search component for another service and tell us about your experience on the boards!