NewsGator Technical Blog

Release Notes for Today's Load

Here are all the things of interest that we loaded into production today. There are a lot of awesome new features and if you have any questions about them just contact us!

Widgets (general):

• Added Related Content to widgets (WIKI)
• Added new NGFlashVideo and NGFlashAudio frameworks (WIKI coming soon)
• Modified video player to support preroll
• Modified post toolbar calls to improve cacheability
• Modified zip code related API calls to be browser cacheable for 10 minutes
• Modified default templates to include CSS Float/Clear fix (WIKI)
• Added volume control to the video player

Widgets (sharing):

• Added sharing sites using Gigya. The full list is:
• Script Sites: iGoogle, Typepad, Blogger, Freewebs, Pageflakes, Netvibes, Vox, Live Spaces
• Flash Sites: Myspace, Livejournal, Xanga, Multiply, Tagged, MyYearbook, Orkut, BlackPlanet, MiGente
• Other: Facebook, embed code, email to a friend
• Added smart sharing (your most shared-to site will appear first)
• Improved email sharing (WIKI coming soon)
• Added Gigya style themes for custom sharing (WIKI coming soon)

Editor's Desk:

• Promote Page: Added sharing tab
• File Upload: Added support for files with .rss and .flv extensions
• Widget Builder: Added Related Content to the Search content tab (WIKI)
• Widget Builder: Modified to respect enable/disable of search and related content widgets
• Widget Builder: Added 3 new options to Content->Advanced Settings pane. Options are: Get Descriptions, Get Extension Data, Get Feed Data (WIKI coming soon)
• Widget Builder: Added link from Design tab to the Wringer, to allow testing of in-progress edits.
• The Wringer: Removed all test pages for “Almost Standards” mode
• The Wringer: Added test for host pages with floating sidebars

How'd They Do That? PRI Podcast Widget Workshop

Yesterday, Josh Larson of the NewsGator Widget Blog posted some simple widget best practices. Included in his list is a note on mashing up your widget data types (text, video, pictures, animation, etc.). The PRI Podcast widget, located here: http://www.pri.org/pri-podcasts.html (right side rail) is a great example of mashing up more than one widget type for a unique experience for the user. Here's the use case:

In a widget, how do we show a feed of headlines, as well as some kind of media player with a video/podcast feed? Widgets can have more than one feed associated with them, but it seems hackey to check every single post to determine whether it belongs in the headlines section or if it should go into the player. There's a much simpler way using our framework.

The Solution:

Use a call to a slave widget to pull in desired content. This way we can have all sorts of data going into a widget, with separation of content types and ease of customization using templates in the master widget. So let's break it down.

Here's some resources that I used to create this widget:
http://developer.newsgator.com/wiki/index.php?title=Loading_a_Slave_Widget
http://developer.newsgator.com/wiki/index.php?title=Defining_Templates_Within_a_Widget

For starters, create a slave widget. Keep in mind that the only purpose this widget will serve is providing content to the master widget: therefore, just select the Empty Widget template, that way there's no confusion about where styles and scripts are coming from (they will all be in the master widget).

[This is considered a best practice, HOWEVER, you can rely on the slave widget for its own scripts and styles if absolutely necessary. The way to designate this is explained later.]

Now, create a master widget and style it up as desired. To call the slave widget you need 3 things:

1. A slave widget template. This bit of code in the HTML defines what the slave widget will look like and it retrieves the post data.
   Simply build a template using our Wiki article Defining Templates Within a Widget, and within that template style it up as desired and retrieve the post data just like you would in any other widget. The script tag method works well, however I've found that you can't add a post render callback to it. If this is needed, simply use the textarea method.


2. A content target for the slave widget. This is as simple as just declaring a div somewhere in your master widget and giving it an ID:
   

   <div id="ng_podcastDiv"></div>

   
   
3. The JavaScript function that calls the subordinate widget:
   From the Wiki article, Loading a Slave Widget. The function creates a subordinate buzz object based on a buzz ID that you've passed to it, and from there you define what the target for the widget is (the div from step 2), and the ID of the template for how the content should appear (from step 1). If for some reason you want to style up the subordinate widget on its own and call it, instead of styling it up in the master, simply pass "null" in for the template ID.

And that's it! Just call your subordinate widget in the post render callback of the master widget, and you're good to go.

Setting up XML Config Using our Widget Framework (Wiki)

What it is: Do you use XML config files with your Flash widgets? There's a way to set this up in our framework. You can also use it with HTML widgets.

Why? Well, suppose you are doing a cobranded widget campaign, or you have a number of widgets that use the same template but have minor differences, such as the logo image. By referencing an XML config file to retrieve values for such things, it increases scalability and ease of development. Also, you don't have to keep an XML file somewhere to reference: it's all built into the framework.

Here's how to do it: http://developer.newsgator.com/wiki/index.php?title=Advanced_Configuration_and_Using_xmlConfig

But wait, there's more! Gigya docs for all your widget sharing needs.

As if I'd let you experience our Gigya enhanced widget sharing without detailed Wikipedia articles to help you with every little thing:

Want to convert your custom sharing over to Gigya?
http://developer.newsgator.com/wiki/index.php?title=Converting_Your_Custom_Sharing_Over_to_Gigya

Want to configure the default sharing that is available in Gigya?
http://developer.newsgator.com/wiki/index.php?title=Enhanced_Sharing_with_Gigya_Integration

Want to customize the look and feel of the "Get This" container box?
http://developer.newsgator.com/wiki/index.php?title=Configuring_Gigya_Sharing

Want to create a Gigya gallery for a widget?
http://developer.newsgator.com/wiki/index.php?title=Show_Gigya_Sharing_on_its_Own

Wanna Grab a Gigya Gallery?

You can show a Gigya sharing gallery on its own, without having to render a widget. There's a new Wiki article for this: http://developer.newsgator.com/wiki/index.php?title=Show_Gigya_Sharing_on_its_Own

Suppose you wanted to provide sharing to social sites on their own, not within a widget... this is the approach you would take. The best part is that all the configuration for the Gigya sharing can be done in Editor's Desk: http://developer.newsgator.com/wiki/index.php?title=Enhanced_Sharing_with_Gigya_Integration

This post has been brought to you by the letter "G," which was used 25 times :)

Widget Customer Connect Webinar - 10/08 Recording

If you missed this month's Customer Connect Webinar, you can experience it here.

After Andy showed us the how's and why's of time-sensitive widgets and tabbed widget metrics, I took over to show how you put auto-rotation into your tabbed widgets, introduced the tech blog, and happily unveiled our new Gigya enhanced sharing.

Using the webinar to announce the tech blog that links back to the webinar... did I just create some kind of info vortex?

NewsGator Introduces Enhanced Widget Sharing with Gigya

Starting today, all default widgets will include Gigya sharing. In an earlier post on the NewsGator Daily blog we announced our partnership with Gigya as a means to provide the best sharing options to our customers. So what does this mean for widget developers? Well, for one thing implementation and configuration is a lot simpler. Also, if you are using default sharing, no changes have to be made to take advantage of the new sharing: it will show up automatically.

If your widgets have any type of custom "Get This," our legacy sharing will be used. Basically, if you are passing anything into the getBuzzFooter() function. The good news is that a lot of the configuration that was done by passing parameters in this function can now be handled in a UI in Editor's Desk. More information here: http://developer.newsgator.com/wiki/index.php?title=Enhanced_Sharing_with_Gigya_Integration

Eventually, more advanced configuration options will be availabe through the widget code. When we get that rolled out you can count on seeing it announced here.

Get an RSS Feed From a Widget

You can return an RSS feed from any of your widgets, just by using load=RSS as a query parameter. Simply take the URL from your widget embed code:

<script 
src="http://nmp.newsgator.com/NGBuzz/Buzz.ashx?buzzId=142970
&apiToken=504035ED85FA4B55A4244AE2E65C0C64" type="text/javascript" 
language="javascript"></script>

And tack on that parameter, so you'll have a URL that looks like this: http://nmp.newsgator.com/NGBuzz/Buzz.ashx?buzzId=142970 &apiToken=504035ED85FA4B55A4244AE2E65C0C64&load=RSS

This will give you an RSS feed that shows all of the results going into that widget. Here's a neat use-case that came up a couple weeks ago:

Suppose you'd like a widget to contain BOTH regular RSS feeds AND search content. For example, say I want to create a sky diving widget, but I can only find a few resources that post regular content. I can create a search widget that will look for all articles related to "sky diving", then use the load=RSS parameter to create a feed from it. I can then use this feed along with other feed URLs specified in the "Your Content" tab for my sky diving widget. This is by far the simplest way to include a broader range of content in your widgets.

A few things to note:
* The "Manage Articles" utility for widgets will come in handy as far as maintaining the integrity of the content shown in your search widgets, especially if you are searching all NewsGator content.
* Search widgets can be a good way to find resources that you didn't know about before: blogs and other websites can crop up in a search that you could use as regular content.

NGFlashVideo Auto Upgrade

If you are using the beta version of our Flash media player (this post) and don't want to have to make changes when we load the production version, just add this to your widget HTML:

{if 
LoadScript(NGBaseUrl + "/host/elect/js/BetaNGFlashVideo.js", 
"window.NGFlashVideo != null || window.BetaNGFlashVideo != null")
}

{eval}
   if (window.NGFlashVideo == null)
   {
	window.NGFlashVideo = window.BetaNGFlashVideo;
	window.NGFlashVideoConfig = window.BetaNGFlashVideoClass;
   }
{/eval}

<!--- All your widget code --->

{/if}

This way, when we roll over from beta it will automatically update in your widget. Since function names won't be changing all of the functionality you are using will remain the same. Just make sure that you are referencing the Flash object via NGFlashVideo and NGFlashVideoConfig; with the above code you do not have to declare it as "Beta."

Here is an updated sample widget that uses the auto upgrade:

http://nmp.newsgator.com/host/NGSUP/misc/NG_Widget_142081__Examples_-_Video_Framework.xml

Beta Test our New FLV Player Framework!

We're working on some code to provide an extremely simple to use, yet highly configurable framework for inserting our Flash media player into your widgets. If you want to try it out, we've published the JavaScript file for you to play around with! For those of you currently using our embedded players (wiki info on video here and audio here), you won't have to replace your code: it'll still work because we will continue to support it. We just wanted to create something new that would give our widget developers more options and an easier way to put a Flash movie player player into your widgets :)

You can either reference the script directly, or download it to make changes. If you are linking to the file we're hosting keep in mind we might make changes to it at any time. We will, of course, announce it on this blog.

The script is here: http://nmp.newsgator.com/host/NGSUP/js/BetaNGFlashVideo.js

Here is XML for a very simple widget that uses the new framework. Just save this file and upload the widget into your Editor's Desk account to get started! http://nmp.newsgator.com/host/NGSUP/misc/NG_Widget_141514__Examples_-_Video_Framework.xml

Let us know what you think, and any bugs you might find. The final version of the player will be announced here on this blog as soon as it's live!