NewsGator Technical Blog

New Wiki Article - Dynamic Content in Widgets

A new wiki article has been published that explains how to dynamically pass content into a widget:

This is a particularly useful feature if you would like to use a widget as a template, and have that widget present unique content on different areas of your website.

Check it out here; it's very easy to do! http://developer.newsgator.com/wiki/index.php?title=Using_Dynamic_Content

Related Content Screencasts

Want to sit back and watch me explain related content for you?

(It's easier than reading documentation, isn't it?)

Here's how to build a related content widget, and

Here's how related content works.

More on Related Content Widgets

So you've created a related content widget (using this helpful post as a guide), so now let's work on refining it.

How does NewsGator find related content?
For the page that the widget is residing on we look in our database for that very same post URL. How would it be in our database? Well, it should be no surprise that NewsGator syndicates SO MUCH CONTENT that yes! your blog is probably in there too. This post gets sent over to our friends at mSpoke, who analyze the content to define what topics the post is related to. We then hit up your whitelist to find other posts that match those topics.

Where should I put my related content widget?
The best place for related content widgets is on unique pages within your blog/website. The main page of a blog (for instance, http://blogs.newsgator.com/newsgator_technical_blog) usually isn't an actual article post, and so there aren't any topics that could define it (I'll show you how to get around that via a query string parameter on the script block).

How can I ensure that I get the best related content?

• Select a large number of feeds for your whitelist that are rich in the content you would like to show. The more articles that can be found in your whitelist, the less the widget will resort to the secondary search terms. Also, feeds that contain full text are best: the way to test this is if you view the feed in a reader, you see several paragraphs of content and not just the headline.
• Use secondary search terms just in case we can't find anything for the article the widget is residing on. While these searches may not be as closely related to the article, they are still based on our capable content searching techniques to find articles within your whitelist.
• If you have control over it, make sure the posts in your personal feed (the articles that we send over to mSpoke) have full text descriptions! This is how mSpoke figures out the topic of the post.

Why aren't any topics being found?
As I mentioned before, the main page of your site isn't really a topics-related post. But you can tell the widget to associate the content with a particular topic in the script block:

<script src="http://nmp.newsgator.com/ngbuzz/buzz.ashx?buzzId=1234
&apiToken=abcd&topic=widgets"></script>

This is a great way to show topics-oriented posts on your main page, or if your content isn't syndicated (won't be found in our database) you can select a topic for a particular page.

Another thing that could happen is we're not finding the exact post URL for where the widget is. If this is the case, you can override the URL in the script block:

<script src="http://nmp.newsgator.com/ngbuzz/buzz.ashx?buzzId=1234
&apiToken=abcd&url=http%3A%2F%2Fwww.example.com%2Fsomepage.html"></script>

What if my blog feed isn't in your system?
Add it to your whitelist!

What topics did you find for this post?
This code in the widget will show you:

{for topic in Topics}
  ${topic} 

{forelse}
  No topics found
{/for}

I need more information! MOAR!!
http://developer.newsgator.com/wiki/index.php?title=Related_Content_Widgets

Widget Workshop: Let's create a Related Content widget, shall we?

What is it?
We've released quite a bit of press about this exciting new feature over the past week, you can read about it in more detail on the NewsGator Widgets Blog and in the NewsGator Daily press release.

Basically, you provide content sources for a widget (using a whitelist), and we perform a search for relevant content pertaining to the very page that the widget resides on. If I have a blog post about robots, my widget will show content about robots. When that same widget shows up on a blog post about laser beams, it will show posts pertaining to laser beams (and hopefully sharks with laser beams on their heads). All the posts are coming from a list of feeds that I've specified as having great content about these topics.

Note: Since related content is such an awesome feature that involves a lot of extensive searching and sleuthing, you'll have to enable it through sales via Craig Lachman. Shoot him an email and he'll get you squared away.

How to do it? Let's walk through the creation of our very own Related Content widget that can be found on the widgets blog.

Here's what you need before you create the widget:

• Make sure you've signed up for related content (see the note above).
• Create a whitelist of feeds you'd like the related content widget to pull posts from (whitelist creation is done through the Utilities tab in Editor's Desk. More information can be found in our Editor's Desk User's Guide-pdf).

Let's make that widget!!

1. Create a new widget, and style it up as you'd like.
2. Navigate to Content for your widget, and select the Search for Content tab.
   
3. For Search by, select Related Content. While you're here, a link is provided to the Wiki article that talks more in depth about the feature.
4. In the dropdown provided, select the whitelist you've created.
5. If you'd like, you can provide secondary search terms that the related content widget will search for. For example, if your widget is showing 10 posts and we are only able to find 6 that are in your whitelist, the rest will be filled in via those keywords.
6. The next step is to test your widget. To get an idea of what would show up in the widget when it is on a particular page, you can test the URL here.

Those are the basics. For the true nitty-gritty of Related Content widgets please see our Wiki article. There are a number of ways to refine your search and ensure the best quality content, but this article is simply a means of getting you started.

One more note: When this feature was first deployed a couple weeks ago, it was referred to in Editor's Desk as "Topic" search. After the load today, this will change to "Related Content" search.

Want to show favicons for posts in your widgets? (Wiki)

I just put up a new Wiki article on retrieving favicons for all your posts. This is a handy way to show the feed source in an attractive way. And come on, the images are so tiny. They're so cute!

http://developer.newsgator.com/wiki/index.php?title=Showing_FavIcons_for_Feed_Sources

One caveat I've found though, is that when the feed is produced by Feedburner it'll show that icon, not the actual source. To get around that you can manually define the images for your icons:

http://developer.newsgator.com/wiki/index.php?title=Associate_an_Image_With_a_Feed_%28that_is_not_part_of_the_RSS%29

And say it with me now: faaahhhvicon

YouTube Feeds for your Video Widgets

YouTube offers a plethora of feeds (found here), but by golly none of them have video content IN the feed. If I wanted to include one of these feeds in a video widget, I'd be out of luck because the RSS post items only contain a link and a thumbnail. So for a while I figured there wasn't a good way to get YouTube content into a widget.

Not so fast! At yesterday's webinar a question was asked about adding YouTube channels to a video widget. I Googled this and found a great article that points you to some of the available feeds made from YouTube content: http://googlesystem.blogspot.com/2008/01/youtube-feeds.html

So channels, search terms, and favorites can all be added to a widget! I made one with my favorited videos, so now I can watch "You Suck at Photoshop" anytime :D

Widget Custom Connect Webinar - 11/18 Recording

If you missed this month's Customer Connect Webinar, you can have a listen to it here.

Andy talked about video widget best practices and related content, and I went into detail about Gigya sharing for widget developers. The next webinar won't be until the end of January, so I hope the holidays can somehow fill the void created by our absence ;)

Quick Tip: Grouping Widgets in Editor's Desk

To help you better organize your widgets, you can put them into descriptive groups (this is also helpful if you'd like a group dedicated to test widgets). It's simple, but not exactly intuitive. Just follow this naming convention:

_GROUPNAME - WIDGETNAME

If the group doesn't exist yet, one will be created. If you are using the tabbed widget framework and are referring to your content widgets by name in the configuration, ensure that you use the ENTIRE name of the widget, including the group.

Say you have a group with a large number of widgets, and there's one in particular that you'd like to see at the top of the list (like the master tabbed widget). Since the widgets are listed alphabetically, just add an underscore to the beginning of the widget name:

_GROUPNAME - _WIDGETNAME

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