We've previously mentioned the TwickApps widget in our gallery, but decided it deserved its own mention here in greater detail. There was a lot of interest in how this widget was put together, as it demonstrated a cool approach of using a feed from somewhere else in a KickApps widget. Read more for an example of JSON widget code, a demo of what the widget looks like, and instructions on how to use it for your own purposes.

How to make a tabbed widget. I spent a lot of time this weekend in trial and error trying to figure this out. I was finally able to do it, so writing up some instructions to save others the time I took trying to figure it out. Kickapps: it would be great if you would do some tutorials on these things to save us time. I'm sure there is a tone of stuff that can be done in the WS that we just don't know about for lack of instructions.

How to Create a Tabbed Widget in WS -
NOTE: this is very down and dirty and is how I managed to do this. There might be other ways to do it. But this should give you a good start.

1. Drag in a list widget. Populate it with whatever feed content you want and format it the way you want (fonts, width etc)
2. Drag in a button component.  Align it to the top of your list widget to make a tab, and format it the way you want.
3. Duplicate your button for as many tabs that you want on your widget. In my example I have 3 button components as tabs.
4. In the Font and Properties sections, you can change the way your button looks on rollover, on click etc.
5. Click on your first button/tab, then in the "Actions" section (on the right), click the blue plus sign. This will open a dialoge overlay
6. For Event: choose whatever user action/event you want to happen to cause your list to change/repopulate (eg: click, roll over etc.)
7. For Action: choose "Set Media URL" Then select the feed/content that you want to populate when a user click or rolls over that tab. (if you dont have the feed you want there you can grab it and paste it in, or go back to feed builder to create a feed)
8. Click Ok.
9. Repeat steps 5-8 for each tab/botton in your widget.

From the Menu, click "preview" to test ot out. It should work like this:

• Create Your Own Players From Scratch
  You can now customize every design element of your video and audio players, including buttons and controls, complete with rollover effects.
  • Video and audio players are usually composed of a progress/"scrubber" bar, volume control, and a few buttons. Before now, if you wanted to tweak the look and feel of just one of these elements--say, design your own play button--, or if you wanted to re-position them to create your own custom layout, you couldn't. Now you can. Every element of our video and audio players can now be selected, skinned, and configured individually. It's so customizable that you can literally draw what you want your player to look like on a piece of paper, scan it, and come out with something like this:
    
    
    That's exactly what David did to create this widget. (Tip: when working on an image like this, make the area where you want the video to appear transparent, and save it as a .png.) This widget is composed of the new Video, Scrubber, and Volume components (available under the Components tab), along with buttons that have been assigned new actions for Play, Pause, Open Syndication Menu, and Toggle Full Screen mode. We've also released two new players built from these new components and actions: Advanced Video Player and Advanced Audio Player can be found under the Players tab. Use them as is or as templates for building your own custom players. Hats off to David again for creating the shiny new default skins for these players. To help jump-start your own custom player designs, you can also download .psd's containing all the images used in these players.
• New Events
  • Previously if you wanted something to happen in a widget, you had to wait for the user to click on something and then you could execute a Click Action. Now you can trigger actions on a variety of events. In addition to the Click event, you can also execute actions on rollover, rollout, "media has been playing in X player for Y seconds", and "X component has not been clicked for Y seconds".
• Share Your Widgets Between KickApps Accounts
  Building widgets just got social. Now you can export and share fully-editable versions of your widgets with anyone who has a KickApps affiliate account. Coming soon: Updates to the KickDeveloper Widget Gallery allowing you to upload, share and rate designs with the whole community.
  • To share a widget, open the widget that you'd like to share, then click Menu > Export. Your widget code will be copied to your clipboard.
  • To import a widget, click Menu > Import and paste the widget code into the pop-up.
• Monetize Your Videos with DoubleClick
  We've added DoubleClick to the list of video ad networks we support with our drag & drop interface, giving you another way to get the most out of your video content. This adds to our support for pre- and post- role video, Google Adsense for Video, 24/7, Adap.tv and ScanScout, making it easier than ever to monetize your editorial and user-generated video.
  • Learn how to run DoubleClick ads in your video players

KickApps video players have built in support for pre- and post-roll ads from DoubleClick. To run DoubleClick ads, simply drop the DoubleClick component onto your video player, and paste the desired ad URLs into the DoubleClick properties panel.  The "companion" column in this panel can be used to specify any companion banner ads that you’d like to be displayed in concert with the pre- or post-roll ad on the page that the widget is installed on.  (Get the companion ad URLs from DoubleClick.) You can also control how frequently you'd like pre- and/or post-roll ads to be played, and, to maximize the effectiveness of your ad campaign, you can specify as many pre- or post-roll ads as you like and they will be played at random.

Have you ever wondered how to move a widget from one community to another? Have you ever spent hours creating the perfect widget and wanted to share? This video tutorial is for you - Mike Sommers once again flexes his widget-fu and demonstrates how simple it is to get the code for a widget from one community exported, and then imported into another.

You can customize your Member Profile pages by:

1. Creating profile themes that your members can use to style their profile pages.
2. Adding Member Profile questions. Your members' answers to these questions will be displayed on their profile pages.

Create a Member Profile themes

Member Profile themes are like skins that your members can apply to their profile pages. Follow these steps to create a custom theme for your members.

1. Log into the Affiliate Center.
2. Browse to Configure > Pages >Member Profile Theme Builder.
3. Click Create new Profile page at the top of the page.
4. Type a name for your theme in the "Page name" field at the top of the page.
5. Modify the style settings throughout the rest of this page (hint: click the link at the top of the page for a diagram that shows which parts of the profile page correspond to the various style settings).
6. Click Save.
7. To preview your theme, click the "preview" link next to your theme name when the page refreshes. Note: if you're using a Site Styler theme, you must first click the "make default" link next to your theme name before clicking the "preview" link.
8. Click "edit" next to your theme name to make any changes, and repeat steps 5-7 until you're finished customizing your theme.
9. (Optional) If you'd like all new members to start out with the theme that you've made, click the "make default" link next to it.

Add Member Profile questions

When your members begin customizing their profile pages, one of the first things that they'll see are Member Profile questions. These questions prompt members to share information about themselves and their interests. Choosing and creating relevant questions is a powerful way to set the tone and shape the content of your community. Follow these steps to add Member Profile questions to your community.

1. Log into the Affiliate Center.
2. Browse to Configure > Pages >Member Profile Questions.
3. Enter custom questions in the text fields next to Questions 1-10.
4. Select the checkboxes next to any of the pre-defined questions that you'd like to add to your members' profile pages.
5. Click Save.
6. Your members can now answer these questions by browsing to "my home" > edit my profile. The answers that they enter on this page will be displayed on their (public-facing) Member Profile pages.

Adding a Community Homepage to your site is a great way to create a hub for your community members to see what's going on throughout your community. It's also a great place to define the focus and set the tone of your site. KickApps offers a pre-made Community Homepage that you can add to your site in a few clicks. You can also create your own Community Homepage from scratch and link it to a "home" tab on your main navbar.

Add the pre-made Community Homepage to your site

1. Log into the Affiliate Center.
2. Browse to Configure > Pages > Community Homepage.
3. Select "Include a "home" tab in my global navigation." at the top of the page. This will add a new tab to the left end of your main navigation bar.
4. Select "Link my "home" tab to my pre-made community homepage."
5. Select "Autoplay video?" if you'd like the video player on your pre-made homepage to begin playing automatically when the page loads.
6. Modify the home page title and welcome message. The home page title will appear in the top bar of visitors' web browsers. The welcome message will appear at the top left of your pre-made homepage.
7. Click Save.

Add a custom Community Homepage to your site

For more control over your Community Homepage experience, you can build a custom homepage with HTML and link to it from a "home" tab in your community's main navigation bar. To utilize this option, you'll have to have your own web host to serve your page. Once you've uploaded your Community Homepage to your server,

1. Log into the Affiliate Center.
2. Browse to Configure > Pages > Community Homepage.
3. Select "Include a "home" tab in my global navigation." at the top of the page. This will add a new tab to the left end of your main navigation bar.
4. Select "Link my "home" tab to my custom homepage at".
5. Enter the URL of your custom Community Homepage.
6. Click Save.

Disabling a group will remove it from your community. You can re-enable disabled groups.

To disable a group,

1. Log into the Affiliate Center.
2. Navigate to Manage > Groups.
3. Find your group in the list.
4. Click the "Disable" link on the far right.

To rename a group,

1. Log into the Affiliate Center.
2. Navigate to Manage > Groups.
3. Find your group in the list.
4. Click the "Edit name" link next to your current group name.
5. Type in a new name.
6. Click Save.

When you create a group, a special homepage for that group is added to your community's Groups page. Your members will be able to join the group on that page.

To create a group,

1. Log into the Affiliate Center.
2. Navigate to Manage > Groups.
3. Type a name for your group.
4. (Optional) To upload a logo for your group from your hard drive, click the "Browse..." button.
5. (Optional) To assign your group to a category, select a category from the dropdown menu. Assigning your group to a category will make it easier for your members to find media and other groups that belong to that category.
6. Click the "Add Group" button.

When you first sign up with KickApps, we automatically give you some sample videos, photos, audio tracks, and a couple of sample members (Eric and Pete--our founders!). If you'd like to remove the sample media and members, follow these steps.

1. Log in to the Affiliate Center, then click on the "Manage Your Community" tab, then click "Media Management".
2. Since the sample media has been automatically approved, you will have to search for it. Type "sample" in the text box, uncheck every box next to "Search" except for "Tags", set "Status" to "Approved", and press the Filter button. Six sample media items will appear in the results below.
3. Click "Reject" to disable any of these items.

If you'd also like to remove the default members Eric and Pete, follow these steps:

1. In the Affiliate Center, click on the "Manage Your Community" tab, then "Member Management".
2. Type "eric" in the text box and click "search members".
3. Click "Disable eric" in the search results.
4. In the box that appears you will have to choose whether to disable the member, the member and his/her media, or neither. Make your selection, then press "Okay".
5. To disable Pete as well, follow the same steps but search for "pete" instead of "eric".

Any visitor to your site can click the "Flag as Inappropriate" link on media play pages. You can use these clicks as a moderation mechanism. You can set the Automatic Unapproval feature to unapprove a media item when a certain number of visitors have flagged it as inappropriate. Unapproved media items are removed from your site and placed in your pending media queue.

To change your Automatic Unapproval settings,

1. Log into the Affiliate Center.
2. Click the Manage tab.
3. Click the triangle on the "Automatic Approvals and Unapprovals" panel to maximize it.
4. To activate Automatic Unapproval, enter a number between 1 and 99 to determine how many visitors must flag a media item before it is automatically unapproved.
5. To deactivate Automatic Unapproval, enter 0.
6. Click Save.

You can moderate message board posts from both the Affiliate Center and the message board interface.

To edit, delete, or approve message board posts from the Affiliate Center,

1. Log in to your site as the affiliate webmaster (i.e., log in with the username and password that you signed up with when you started this community).
2. Click Manage > Message Board Posts
3. You'll see links to "edit," "delete," and/or "approve".
   • Click "edit" to modify the content of a message board post.
   • Click "approve" to render the message board post on your message board.
   • Click "delete" to remove the post from the message board. You can reinstate it later by clicking the "approve" link.

To edit, delete, or disable message board posts from the message board interface,

1. Log into your site as the affiliate webmaster (i.e., log in with the username and password that you signed up with when you started this community).
2. Browse to the message board post that you wish to edit, delete, or disable.
3. You'll see links to "edit," "delete," and "disable".
   • Click "edit" to modify the content of a message board post.
   • Click "delete" to remove the post from the message board and erase it from the system. You cannot retrieve deleted message board posts.
   • Click "disable" to hide the post from your members. It will appear at the bottom of the page. You can reinstate it later by clicking the "enable" link.

You can moderate comments in your community in two ways: you can review and moderate all comments in your community from one page, or you can browse to the details page for a specific media item or member and moderate the associated comments there.

To review and moderate comments in your community from the central comment moderation page,

1. Log in to the Affiliate Center.
2. Click the Manage tab, and then the Comments sub-tab.

To edit or delete comments on a particular member or media item from its details page,

1. Log in to the Affiliate Center.
2. Click the Manage tab.
3. If the comment has been made on a media item, search for that media item on this page. If the comment was made on a member's profile page, click the Members tab in the subnav, and search for the member on that page.
4. When you find the media item or member, click on his/her/its thumbnail or title/name.
5. You'll land on the details page for the media item or member. Near the bottom of the left column on this page you'll find a list of comments.
6. Click "edit" or "delete" to edit or delete a comment.
7. Click Save.

If you don't have auto-approval enabled for a given media type, when media items that belong to that media type are contributed to your community, they will be held in your pending media queue until they are either approved (and displayed on your site) or rejected (and banished from your pending media queue).

To review pending media,

1. Log into the Affiliate Center.
2. Click the Manage tab.
3. Under "Search Media," find the "Status" row and click the radio button next to "Pending".
4. Your pending media items will be displayed.
5. You can approve or reject each media item by clicking on the "Approve" and "Reject" links at the far right under the "Manage" tab.
6. If you'd like to take a closer inspection of a media item before deciding, click on its title or thumbnail to go to its Details page.
7. View and/or play the media item.
8. In the lower-right corner, click the button next to Approve or Reject.
9. Click Save.

If you approved a media item, it will now be displayed on your community pages. If you rejected a media item, it will be removed from your pending queue and given the "Rejected" status.

Media items and other contributions to your community are automatically approved by default, which means that when a member contributes a new media item, makes a comment, or posts to your message board, their contribution will appear on your site as soon as it has been processed. If you prefer to review all new contributions before they're displayed on your site, you can disable the automatic approval option for videos, audio tracks, photos, and blogs, as well as for Comments and Message Board Posts.

To change your Automatic Approval settings,

1. Log into the Affiliate Center.
2. Click the Manage tab. To change the settings for videos, audio tracks, photos, or blogs, stay on the Media page. To change the settings for Comments or Message Board Posts, click on the Comments or Message Board Posts sub-tabs.
3. Click the triangle on the "Automatic Approvals and Unapprovals" panel to maximize it.
4. Check the boxes next to any of the media types that you want to automatically approve.
5. Uncheck the boxes next to any of the media types that you don't want to auto-approve.
6. Click Save.

If you opted to disable automatic approval for a media type, when members contribute a new media item of that media type, their media item will enter your pending media queue. You can then review this media item and manually approve or reject it. Learn how to approve and reject pending media.

You can use this feature to prevent abusive members from logging into your community. The member will be identified by an IP address from which he or she has accessed your community. As other members may be accessing your community from the same IP address, we recommend that you use this feature sparingly and with care.

To blacklist a member's IP address,

1. Log into the Affiliate Center.
2. Navigate to Manage > Members.
3. Enter the member's username into the search field. If you do not know it, leave the field blank and use the advanced search options to search for the member.
4. Click the search button.
5. Locate the member in the search results.
6. Click the member's username.
7. Click the "Block IP Address" button on the right.
8. Click Save.

Disabling a member will prevent that member from logging into your community.

To disable a member,

1. Log into the Affiliate Center.
2. Navigate to Manage > Members.
3. Enter the member's username into the search field. If you do not know it, leave the field blank and use the advanced search options to search for the member.
4. Click the search button.
5. Locate the member in the search results.
6. Click the "disable" link (it's near the right end of the table).
7. Decide whether you want to reject all of the member's media in addition to disabling him or her. Rejected media will be removed from your member-facing pages.
8. Click Ok.

With Email Verification activated, when users complete your community's member registration form, a message will be sent to the e-mail address that they submitted. This e-mail will contain a special link. Users will not be able to log into your community until they click this link and arrive on the registration confirmation page. This feature is not activated by default.

To activate Email Verification,

1. Log into the Affiliate Center.
2. Navigate to Manage > Members.
3. Click the triangle on the "Email Verification" panel to maximize it.
4. Click the radio button next to "Yes".

All KickApps affiliates have access to the Right Skyscraper ad unit on all pages. If you're interested in controlling all of the ad slots on your site to run your own ads (or to remove all ads from your site), visit the Services page in the Affiliate Center. You'll find it under Configure > Services.

1. Log into the Affiliate Center.
2. Browse to Configure > Advertising.
3. Select the page that you'd like your ad to be displayed on from the menu at left.
4. Click "edit".
5. Click the "Enable" link next to the advertising unit that you'd like to use.
6. Paste your ad code into the "Ad Code" text field.
7. Click Save.

Your KickApps-powered pages contain a variety of ad units. Different page types contain different ad slots. To see where the various ad units are located on each of the page types, check out the diagrams below. If you're using KickApps at no cost under our Ad Network model, KickApps is running an ad in the top leaderboard slot on all of your pages, and you have access to the Right Skyscraper unit on all pages. If you're interested in controlling all of the ad slots in order to run your own ads (or to remove all ads), login to the Affiliate Center and navigate to Configure > Services.

Play Page | Community Homepage | My Home Page | Member Profile | Message Board | List Page | Groups Page

Play Page

Community Homepage (top)

My Home Page (top)

Member Profile Page (top)

Message Board Pages (top)

List Page (top)

Groups Page (top)

Welcome to KickApps! In order to help you get your site ready for launch, we've put together this list of suggested "first steps" to help you get started. It's an evolving list, so if you have suggestions or questions about getting started, feel free to post them on the KickDeveloper Message Board.

1. Login to the Affiliate Center (the AC)

The Affiliate Center is the place where you build and run all aspects of your KickApps community. When you're in the AC, you can access your community pages at any time by clicking the "Launch Site" link in the upper left corner of the pages.

2. Choose Your Community's Features

You probably already selected the features you want for your community during the sign-up process. If you did, we've already created a suite of community pages for you based on those choices. If you didn't, or you want to make any changes, you can do so at any time by visiting the Add/Remove Features page in the AC.

3. Set up a Community Homepage

A Community Homepage can serve as both the front door and hub of your community. If you don't have one yet, we recommend that you add a Community Homepage to your site.

4. Integrate KickApps With Your Existing Website

If you plan on integrating KickApps with an existing website, consider embedding widgets and integration components throughout it to make it easy for your visitors to find your community and participate in it.

5. Customize Your Pages

Use the Site Styler to quickly customize the look and feel of your site, or get more advanced by adding custom CSS, HTML, or scripts. Learn more about customizing your pages..

6. Select an Advertising Option

If you're using KickApps for free under our Ad Network model, consider purchasing full control of your community's advertising inventory. Learn more about advertising on KickApps.

7. Consider Customizing Your URLs

You can use a technique called "DNS masking" to customize the URLs of your community pages. To implement this technique, you need to own a domain (like http://www.mysite.com) or a subdomain (like http://subdomain.mysite.com). Learn more.

8. Create Your Own Member Profile

Are you going to be the "host" of your community? If so, your members will want to get to know who you are, so it's a good idea to fill out your profile and upload a profile picture.

1. Login to your site.
2. Click "my home" (on the left-hand side of your top nav), then "edit my profile".
3. Fill in the "about me" section on this page and click save.
4. Click the "Edit Account" subtab in this area, and scroll down to the profile icon section. Click "Add new profile icon" and follow the steps to upload a picture or other image to serve as your avatar.
9. Seed Your Site with Relevant, High-Quality Media

Once you've got your site set up and styled to your liking, the next step is to fill it up with media that will be of interest to your members. Cool and interesting videos, pictures, and audio will draw new people in to your site and keep them engaged when they get there. Here's how to do it:

1. Log into your site
2. Click "my home".
3. At the top left of the "my home" page, you'll find a section called "Get Active" with links to add videos, audio tracks, photos, or blog posts. Follow these links to add some exciting media to your site.
10. Invite Your Friends

Get the word out! Invite your friends, family, coworkers, colleagues, and anyone else who might be interested in your community. Log into your site, click "my home", then select "invite friends" from the subnav.

If you have any questions, feel free to post to the KickDeveloper Message Board. Best of luck on setting up your site, and come back to KickDev to let us know when you've launched it!

Have you ever wondered why we don't have a More From This User list on our media play pages? If you have, the answer is simple, we wanted to let you get creative! Now to help you along in the process, we put together a tutorial and some sample code for you!

To make this happen, first create a widget from the widget studio. For the sake of this example, lets make our widget canvas 300px by 105px. Stlye it however you'd like. This is going to display images, so make sure it is scrollable and easy to view.

Once you've created your widget and you are content with what you're looking at, you can move onto the tough stuff, but considering we've already written the code for you, all thats left is copy and paste with some edits. Which reminds me, be sure to replace all the highlighted terms below with the appropriate values.

<script  type="text/javascript">
 
if(Ka.Info.PAGE === "pages/mediaPlayPage.jsp" &amp;&amp;  Ka.Info.MEDIATYPE=='PHOTO'){
 
    $j('<div  id="ka_widgy"></div>').insertAfter('#ka_playPageDetails');
 
    var photoContributor = $j 
 
    var so = new SWFObject("<a href="http://">http://</a>serve.a-widget.com/kickapps/service/getWidgetSwf.kickAction",  "kickWidget_ASID_WIDGET-ID", "WIDTH", "HEIGHT",  "9.0.25", "#000000");
    so.addParam("FlashVars",  "affiliateSiteId=ASID&amp;amp;widgetId=WIDGET-ID&amp;amp;width=WIDTH&amp;amp;height=HEIGHT&amp;amp;mediaURL="  + escape('<a href="http://">http://</a>serve.a-widget.com/' + $j('#ka_rssLink  li.ka_rssLink_user a').attr('href')) );
 
    so.addParam("menu", "false");
 
    so.addParam("quality", "high");
 
    so.addParam("allowfullscreen",  "true");
 
    so.addParam("wmode", "window");
 
    so.addParam("allowScriptAccess",  "always");
 
    so.write("ka_widgy");
 
}
 
</script>
 
 

The code above will either be attached to your pre-existing script files, if you have, or can be placed in the footer of the Global Page Template between <script></script> tags.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at This e-mail address is being protected from spambots. You need JavaScript enabled to view it .

 
/* ka_generalStyle.css */
  #ka_myMessages, #ka_myNewMessages 
  {
    background:transparent url(/kickapps/images/sprites/sprite_media.gif) no-repeat scroll 0 -1200px;
  }
 

 
/* yourStyle.css */
  #ka_myMessages, #ka_myNewMessages 
  {
    background:transparent url(/yourURL/yourIcon.gif) no-repeat scroll 0 0px;
  } 
 

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at This e-mail address is being protected from spambots. You need JavaScript enabled to view it .

What you see above is a KickApps status widget, powered by an RSS feed from Twitter!

What's cool about this is, you can create one for your self, customize the widget and what not, and then embed it on your profile page! Check out the code below for inserting this into your community:

if(Ka.Info.PAGE  === "pages/kickPlaceServerSide.jsp" &amp;&amp; Ka.Info.PROFILENAME==<span class="hilite">'DannyM'</span>){
 
    $j('<div id="ka_widgy"></div>').insertAfter('#ka_profileAbout');
 
    var so = new SWFObject("<a href="http://serve.a-widget.com/kickapps/service/getWidgetSwf.kickAction">http://serve.a-widget.com/kickapps/service/getWidgetSwf.kickAction</a>",  "kickWidget_ASID_WIDGET-ID", "WIDTH", "HEIGHT",  "9.0.25", "#ffffff");
 
    so.addParam("FlashVars", "affiliateSiteId=ASID&amp;amp;widgetId=WIDGET-ID&amp;amp;width=WIDTHT&amp;amp;height=HEIGHT");
    so.addParam("menu", "false");
    so.addParam("allowScriptAccess", "always");
    so.addParam("allowfullscreen", "true");
    so.addParam("wmode", "window");
    so.write("ka_widgy");
}

If you try to copy and paste this code, you wont see anything on your community, unless you have the distinct privilege of having me as a member. To get this to work, you'll have to search through code for the following terms and replace them with the appropriate parameters, as shown in the table below:

The code above will either be attached to your pre-existing script files, if you have, or can be placed in the footer of the Global Page Template between <script></script> tags.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at This e-mail address is being protected from spambots. You need JavaScript enabled to view it .

KickApps 3.1 Launches

New features include:

• Multiple Language Support

  You can now customize all the text on your KickApps-powered pages and in e-mails. For a quick start, choose one of the pre-loaded, editable language packs (English, Spanish, French, German, Italian, or Brazilian Portuguese). For a deeper customization you can enter your own text to replace any word or group of words that appears on your pages; you can even use HTML!

  To customize the text on your site, log in to the Affiliate Center and browse to Configure > Languages.

  
• Integrated (Drag & Drop) Support for Ads in Video Players

  Insert overlay, banner, pre-, and post-roll ads into your video players in the Widget & Video Player Studio. Integrated support for Google AdSense for Video, Adap.tv, and ScanScout.

  To add advertising to your video player, drop an ad component onto it from the new Advertising tab, and enter your ad network Publisher ID into the config. panel.

  

  Below: a video player showing an overlay ad from Adap.tv.

  

  Above: KickApps Video Player running a video ad from ScanScout

• Lots More Features & Improvements
  • Administrator Facing: New features which make it easier to create and manage your KickApps website
    • Widget & Video Player Studio Updates
      • Expanded Workspace: the Widget Studio is now sized at nearly 100% of screen width, giving you plenty of elbow room to work on your widgets and video players.
      • Text and Image components can now display content from other components.
      • Video players now have configurable aspect ratios.
      • New click actions allow for more dynamic, configurable widgets. Now when users click on a component you can scroll a list, play a media item in another component, show or hide components, change the feed that is powering a list or player, or select the previous or next items in a list.
      • Enhanced styling for buttons on playbars, including gradients and alpha controls.
      • We've added 2 new parameters that can be appended to your widget embed code to define what content the widget should play or display. These parameters will override the feed or media setting made for this widget in the Widget Studio.
        • Append &mediaURL= to the FlashVars of your embed code to specify the URL to an RSS feed, .flv, .jpg., .gif, or .mp3, like this:
          &mediaURL=http://www.mysite.com/myfeed.rss
        • Append &mediaType_mediaID= to the FlashVars of your embed code to specify a particular KickApps media item, like this:
          &mediaType_mediaID=video_23
        • Note: When using either of these parameters, make sure to append them to both instances of the FlashVars in your widget embed code
      • Longer Sessions: You and your members will stay logged in for up to 1 week.
      • Your pages now load faster, thanks to a range of cross-platform performance improvements and caching.
      • Ban and kick out members from group chats in your Userplane chat rooms.
  • Member Facing: New features that make your website more engaging for your members
    • Embed videos from YouTube and KickApps into blogs, message board posts, member-to-member messages, comments on member profiles, and the "About Me" section of your profile.
    • Friends & Fans: When one member adds another member as a friend, the other member will receive an e-mail inviting them to accept the friend request. If the friend request is accepted, the members will be listed as friends; otherwise the member who sent the request will be listed as a fan.
    • Smilies and other emoticons now available in the rich text editor.

Add social interactivity to your content with KickApps External Media & APIs

Does your site include more content than videos, photos, audio tracks, and blogs? Want to add logins, comments, and ratings to your editorial content, stories, and other pages that aren't powered by KickApps? Tomorrow, July 15th, KickApps will add a new External Media type to the platform, allowing you to provide social tools on any content within your website.

The process is simple:

1. First, register for the KickApps API and Developer Kit. (See below for more information.)
2. Then enable External Media with one click inside the Affiliate Center.
3. Then paste a simple JavaScript code snippet on any of your website's pages.
4. Comments, ratings, and a login form will instantly appear on those pages.
5. All of the page's comments and rating information will also appear in the Affiliate Center, so you can moderate them just like the videos, photos, audio tracks, and blog post that are already a part of the KickApps platform.
6. As an additional option, you'll be able to approve or reject comments before they appear on your site. (We've added this feature to all KickApps-powered comments.)

For greater integration and flexibility, you can also use the KickApps Developer Kit to integrate External Media via server-side calls to our REST API. The API provides discreet calls for creating new External Media as well as adding comments and ratings, so you can provide specific functionality in a format of your own design.

Customization and the KickApps API Developer Kit

The KickApps platform is a hosted suite of web services that are easily customizable for integration into your website on a free, self-service basis through the KickApps Affiliate Center using DNS masking and Widgets, along with HTML, CSS, and JavaScript.

In addition to that, we've designed the platform to be extremely flexible using our premium KickApps API Developer Kit. The Dev Kit enables your development team to access your community data on a self-service basis and display it in applications, feeds, or any other programmable format. With it, you can also add data into your community to recreate and customize features such as media comments, ratings, and more.

Download our API Developer Kit white paper to learn more.

the KickApps API Developer Kit is available by request and includes technical documentation (covering access rights, functionality, implementation, sample code, errors, and resolutions) and sample applications in Java, PHP and .Net. APIs are charged under KickApps' usage-based pricing model, with a minimum monthly starting package.

Our separate Single Sign On (SSO) API is freely available to all KickApps affiliates.

Contact us about the KickApps APIs

Contact us if you're interested in discussing the KickApps APIs. We'll work with you to assess your deployment needs and determine the most effective customization for your requirements.

Ok this is the page that should show a list of categories under the "Configure Site Settings" section.

Note the complete lack of modules to display content items from a category, I end up using a freaking FEED module to get this effect. Hrmph!

It's not too difficult to customize your KA site to look like your core site, but you need to be prepared to put in the time to work on it to get things looking the way you want.

GOOD NEWS!
If you already have your core site built, then carrying that established header, side navigation, and footer is pretty much as simple as copying the code you have for your main site and pasting it in your KA Affiliate Manager.

CSS IS YOUR FRIEND!
If you are not familiar with CSS, do not be intimidated. Have confidence! The design (and layout changes if you want to get a bit more advanced) you make will be done via CSS modifications. Therefore, you will need to familiarize yourself with CSS. DonÕt fret -- the basics are not complicated Ð and the more you do it, the better you'll get at it.

GETTING PREPARED

1. My advice is for you to browse the Tutorials here.There is a lot of good information to tell you how to change certain things in your site design. http://www.kickdeveloper.com/tutorials_landing.html

2. Note that any changes you make to your CSS you will need to enter in your KickApps Affiliate Center under Configure > Pages > Global Page Template. The best place for CSS is in the <head></head> field of your Global Page Template. You can either create an external stylesheet, upload it to a server, and then link to it from the <head></head> field like this:
   
   <link rel="stylesheet" type="text/css" href="http://www.yourserver.com/yourstyles.css" media="all" />
   
   ...or write css directly into the head field, like this:
   
   <style type="text/css">
   ::put your style rules here::
   </style>

3. Be prepared for the fact that there is going to be some trial and error as you customize your pages. Even world-class coders make mistakes and have to backtrack sometimes. I recommend always saving a backup of the latest version of your CSS modifications, header and footer code locally before you begin. This way, if you make so many changes that you can't backtrack if you make a mistake, you can always revert back to your previous version and go from there. Clean slate!

THE NITTY GRITTY
Step 1: Your Header, Side Navigation (if applicable) and Footer code

1. Copy the code that you have established in your main site's header. Change any relative links and img srcs to absolute links and img srcs (e.g. <img src=Ó/images/image1.gif"> becomes <img src=Óhttp://www.mysite.com/images/image1.gifÓ>; <a href="contactus.html"> becomes <a href=http://www.mysite.com/contactus.htmlÓ>)
2. Do the same thing for your side navigation.
3. Do the same thing for your footer.

The combination of your header code from step 1a and your side bar code from step 1b is what you are going to copy and paste into your KA Affiliate Center under: Site Settings>Enter Header & Footer Code in the 2nd field right after the <body> headline

Step 1c is what you will enter under: Site Settings>Enter Header & Footer Code in the 3rd/last field right before the </body> headline.

BUT before you do any of that, you need to add some code that will place the main KickApps content within the layout for your header, side nav and footer...

Step 2: Prepare to Fit It All Together
The easiest way to get your KickApps content, your header, your side navigation and footer to fit together in harmony is with CSS div's.

Create CSS rules similar to these (this is similar to what worked for me, however there are many other ways this can be done). Add these IDs to your external style sheet or paste them in the CSS Rules area (mentioned above in #2 under Ògetting preparedÓ).

You can also specify other things in these classes like padding, font style, color, border, margin, background images and so on.

If you have a right navigation and a left navigation, create another class like #myrightnav, with the float declaration. Your #mainkacontent div will need to be that much smaller in width.

Step 3: Modifying your HTML from Step 1 to use your Step 2 Classes
This is where the magic happens. :)

1. Paste the following in your Affiliate Center under Site Settings>Enter Header & Footer Code in the 2nd field right after the <body> headline:
<div id="everythingÓ>

<div id="myheader">
<!-- enter your header code from Step 1a here-->
</div>


<div id="myleftnavÓ>
<!-- enter your side nav code from Step 1b here-->
</div>


<div id="mainkacontentÓ>

That's it for this field. All of your KickApps content should populate itself right after this div. That is why you are leaving it open. You will close this div in the footer section in Step 3b below.

2. Paste the following in Site Setting>Enter Header & Footer Code in the 3rd/last field right before the </body> headline: </div> <!-- this closes the #mainkacontent div you opened above -->

<div id="myrightnav">
<!--if you have a right nav, enter the code here, if not leave this out.-->
</div>

<br clear="all"> <!--donÕt ask me what this is for -- it worked for me to keep my footer
in the right place for some reason.-->

<div id="myfooterÓ>
<!--enter your footer code from 4c here-->
</div>

</div> <!--this closes the #everything div you opened at the very beginning.-->

DONE!
This should be a great start for you. Of course you will need to make modifications that suit your needs. Once you have all of this done and have established your core site foundation/layout, you can start to customize the design of your Kickapps content (colors, fonts, etc) by finding the CSS classes you want to change, making the modifications and pasting the modified classes in your Site Styles or by modifying your external style sheet.

If you don't have a FireFox browser, get it and download the developer add-ons that make it easy to find classes and make CSS edits, like Firebug. It is great for many reasons, one of which is that it allows you to preview what CSS modifications would look like before you finalize them by pasting them in your site styles. Be sure to read other tutorials here for more on this.

Happy Customizing!

Did you enjoy this tutorial? Have questions or comments? Send a private message to the author of this tutorial or post a reply to the discussion where it was first published.

We've had some questions about how ratings work on KickApps-powered media, so here's a quick overview:

First, the easy part: each registered member can vote once on each video, photo, blog, and audio file. Non-members cannot vote on content until they join your community.

Now the interesting part: as an affiliate, you can make power ratings on members' media from the Affiliate Center. To do so:

1. Log in to the Affiliate Center
2. Select the desired site, if you've created more than one
3. Browse to Manage Your Community » Media Management
4. Click the "Details" link for a desired media item
5. In the media details page, you'll see an option to "Add your rating" – click on the stars to give the media a rating
6. Now here's the good part: do it again!

As an affiliate webmaster, you can rate media as many times as you want. Each click on those stars counts as 10 ratings.

Have an important video that you want at the top of the list? Click that 5 star rating a few times and it's there! Is that annoying tune stuck in your head? Bump it out of the spotlight with a couple of one-star ratings.

Power ratings, are your tool to bring your best media to the top of Widgets and lists, showcasing your most interesting content.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at This e-mail address is being protected from spambots. You need JavaScript enabled to view it or Post a message on our related Message Board discussion – we want to hear from you.

Setting up the infrastructure for an on-line community is one thing, but turning that infrastructure into a living, breathing community is a whole different venture. The folks over at our corporate site have put together a set of 9 best practices for doing just that. You can download the white paper through this page.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at This e-mail address is being protected from spambots. You need JavaScript enabled to view it .

It may not be at the top of your to-do list, but as the adoption to and use of Apple's iPhone continues to increase, serving your community's user generated content to the widest possible audience will mean providing rich media that the iPhone's browser can support.

Today, the Flash plug-in which most browsers use in order to play video on the web, is not included in iPhone's Safari browser. Unfortunately, the absence of the Flash plug-in leaves the vast majority of the world's user generated rich media (videos) unsharable by and inaccessible to one of the most exciting "gadgets" to hit the marketplace in a long time. Oh, the inhumanity.

In our effort to foster the growth of social communities and strengthen the channels by which great content is shared, we now transcode all videos submitted to KickApps-powered communities both in the Flash/.flv and Quicktime/.mov formats.

The following outlines the steps required to iPhone-enable your community.

<?php
// Grab  this feed URL in your Òpreview and codeÓ section whenever you create a widget.
$widgetFeedUrl  =  'http://affiliate.kickapps.com/kickapps/service/displayBrandableEntityXml.kickAction?b=123';
// load  the widget XML feed. 
$s =  simplexml_load_file($widgetFeedUrl);
// this  will simply dump the name/value pairs, but you can do whatever you want with  the data inside these loops
echo  '<pre>';
foreach  ($s->E as $e) {
   // you'll typically have one E element per media item (video, audio, photo,  blog, user)
   echo 'E: name:' . $e->attributes()->name . '|value:' . $e->attributes()->value  . "\n";
   foreach ($e->SE as $se) {
       // the SE elements under the E element will contain the media item (or user)'s  properties again as name value pairs
       echo 'SE: name:' . $se->attributes()->name . '|value:'  . $se->attributes()->value . "\n";
  }
}
echo  '</pre>';
?>

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at This e-mail address is being protected from spambots. You need JavaScript enabled to view it .

#ka_element {display: none} 

The easiest way to find the id of an element is to use Firebug (a Firefox add-on), so if you haven't installed it yet, you should do so now.

In an earlier tutorial, I showed you how to hide tabs on the main navbar. In this tutorial, we're going to add a new tab to the main navbar using JavaScript. If you don't know any JavaScript, don't worry-- all you need to do is copy and paste; I'll walk you through the rest. If you're comfortable hacking on JavaScript, feel free to grab this JS code and take off.

In some cases, this change can result in Play pages that look a little unbalanced: the right column can get a lot longer than the left, especially if there aren't many comments on the page. With a simple CSS snippet, you can limit the length of the related media module on the Play page, using a scrollable div to display the content.