Use Clearspring for Widget Syndication and Tracking

From KickApps API Reference

Jump to: navigation, search

Clearspring offers widget syndication and analytics services. By wrapping your widget in Clearspring, you'll get access to detailed analytics information on their website, as well as a slick syndication menu that you and your users can use to syndicate your widget to a number of social networking and social bookmarking sites.

To use Clearspring for widget syndication and tracking, first sign up for an account at clearspring.com. Then use the following directions for widgets that aren't installed on your KickApps-hosted pages, and the next set of directions for those that are.

Wrapping KickApps widgets in Clearspring

  1. Copy the compatible version of your widget embed code into a text file.
  2. Search for 'FlashVars='.
  3. Paste everything within the double quotes to the end of this URL.
    http://serve.a-widget.com/kickFlash/KickShell.swf?referralUrl=&widgetHost=serve.a-widget.com&buildVersion=1.0.800&
  4. Remove the following bit of code from your URI:
    &kaShare=1
  5. Paste your code within the quotation marks in this function:
    javascript:decodeURI('')
  6. Paste the whole line into the address bar of your browser and press return.
  7. The URI that should now be displayed in your browser window is the one you'll use for the widget source URI in Clearspring.
  8. Log into your Clearspring account and select 'Add Widget', then 'In My Widget'.
  9. Make sure that you're adding a Flash widget and that 'AS3' is set.
  10. After you paste in the widget source URI, you'll be given the option to have query parameters converted to configuration parameters. Select 'No'.
  11. Save your widget, then grab the embed code.

Wrapping widgets on KickApps hosted pages with Clearspring

  1. Copy the compatible version of your widget embed code into a text file.
  2. Search for 'FlashVars='.
  3. Paste everything within the double quotes to the end of this URL.
    http://serve.a-widget.com/kickFlash/KickShell.swf?referralUrl=&widgetHost=serve.a-widget.com&buildVersion=1.0.800&


    Now your URI should look something like this: 

    http://serve.a-widget.com/kickFlash/KickShell.swf?referralUrl=&widgetHost=serve.a-widget.com&buildVersion=1.0.800&affiliateSiteId=30483&widgetId=30904&width=420&height=338&autoPlay=0&mediaURL=http%3A%2F%2Fserve.a-widget.com%2Fservice%2FgetFeed.kickAction%3FmediaId%3D241125%26mediaType%3Dvideo%26as%3D30483
  4. Remove the following bit of code from your URI:
    &kaShare=1
  5. Paste your code within the quotation marks in this function:
    javascript:decodeURI('')
  6. Paste the whole line into the address bar of your browser and press return.
  7. The URI that should now be displayed in your browser window is the one you'll use for the widget source URI in Clearspring.
  8. Log into your Clearspring account and select 'Add Widget', then 'In My Widget'.
  9. Make sure that you're adding a Flash widget and that 'AS3' is set.
  10. After you paste in the widget source URI, you'll be given the option to have query parameters converted to configuration parameters. Select 'Yes'.
  11. Save your widget.
  12. Your widget will probably appear clipped in the preview. Don't worry about this; we'll fix it later.
  13. Select 'Edit Your Widget', then 'Size & Appearance'
  14. Manipulate the dimensions until the widget and Clearspring bumper menu fit together nicely. The default video player on KickApps play pages needs 420px width and 362px height. Under 'Apply these settings to:', make sure to select 'Both Flash Stage and Embed Tag'.
  15. Save your changes.
  16. Back on the Edit Your Widget page, select 'Screenshots'. Use this page to configure the thumbnail that should be displayed for this widget when it's syndicated to the sites listed. If you don't define custom images here, all instances of this widget will show the thumbnails on this page, regardless of whether these thumbs correspond to the media in the widget.
  17. Save your changes, then click the Publish tab, then 'Get the Code'.
  18. Click the 'MySpace-only code' tab and copy the code there.
  19. Paint this embed code into your KickApps-hosted page with JavaScript that also removes the other player and tells it which media item to play. The following code snippet does this for the video play page:
    &lt;!-- Clearspring wrapper for KickApps Video Play Page widget, updated 3/02/09--&gt;<br>
    &lt;!-- Paste me into the Footer section of your Global Page Template --&gt;<br>
    &lt;script type="text/javascript"&gt;<br>
    $j(function() {<br><br>
     
    if (Ka.Info.PAGETYPE == 'Play' &amp;&amp; Ka.Info.MEDIATYPE == 'VIDEO'){<br> <br>
     
    $j("#ka_playPagePlayer").html('CLEARSPRING_EMBED_CODE_GOES_HERE');<br><br>
     
    widgetURL = $j("object + param[name='movie']").attr('value');<br>
    modifiedWidgetURL = widgetURL+'/mediaURL/http%3A%2F%2Fserve.a-widget.com%2Fservice%2FgetFeed.kickAction%3FmediaId%3d'+Ka.Info.MEDIAID+<wbr>'%26mediaType%3D'+Ka.Info.MEDIATYPE.toLowerCase()+'%26as%3D'+Ka.Info.AFFILIATESITEID;<br>
     
    $j("object + param[name='movie']").attr('value', modifiedWidgetURL);<br><br>
     
    widgetURL = $j("object[data]").attr('data');<br>
    modifiedWidgetURL = widgetURL+'/mediaURL/http%3A%2F%2Fserve.a-widget.com%2Fservice%2FgetFeed.kickAction%3FmediaId%3d'+Ka.Info.MEDIAID+<wbr>'%26mediaType%3D'+Ka.Info.MEDIATYPE.toLowerCase()+'%26as%3D'+Ka.Info.AFFILIATESITEID;<br>
     
    $j("object[data]").attr('data',modifiedWidgetURL);<br><br>
    } <br><br>
    }); <br>
    &lt;/script&gt;<br>
    &lt;!-- End Clearspring wrapper for KickApps Video Play Page widget --&gt;

    ..and here's a snippet to replace the video player on your Community Homepage with one wrapped in Clearspring:

    <!-- Clearspring wrapper for video player on KickApps Community Homepage, updated 3/02/09-->
    <!-- Paste me into the Footer section of your Global Page Template -->
    <script type="text/javascript">
    $j(function() {
     
    if (Ka.Info.PAGETYPE == 'Homepage'){
     
    $j("#ka_mostRecent_swf").html('CLEARSPRING_EMBED_CODE_GOES_HERE');
     
    widgetURL = $j("object + param[name='movie']").attr('value');
    modifiedWidgetURL = widgetURL+'/mediaURL/http%3A%2F%2Fserve.a-feed.com%2Fservice%2FgetFeed.kickAction%3Fas%3D'+Ka.Info.AFFILIATESITEID+'%26mediaType%3Dvideos%26sortType%3Drecent%26quantity%3D1';
    $j("object + param[name='movie']").attr('value', modifiedWidgetURL);
     
    widgetURL = $j("object[data]").attr('data');
    modifiedWidgetURL = widgetURL+'/mediaURL/http%3A%2F%2Fserve.a-feed.com%2Fservice%2FgetFeed.kickAction%3Fas%3D'+Ka.Info.AFFILIATESITEID+'%26mediaType%3Dvideos%26sortType%3Drecent%26quantity%3D1';
    $j("object[data]").attr('data',modifiedWidgetURL);
     
    }
     
    });
    </script>
    <!-- End Clearspring wrapper for KickApps Community Homepage -->
  20. The only part of the snippets that you need to change is the CLEARSPRING_EMBED placeholder. Just replace that whole string between the single quotes with a Clearspring MySpace-friendly embed code.
  21. Paste the modified scripts into the Footer section of your Global Page Template (Configure > Pages > Global Page Template).
  22. Done!
Retrieved from "http://www.kickdeveloper.com/api/index.php/Use_Clearspring_for_Widget_Syndication_and_Tracking"