Creating a Thumbnail Toolbar for a Pinned Site (Windows)

Article
03/03/2016

This task explains how to create and display a basic Thumbnail Toolbar for a Pinned site.

Note The Thumbnail Toolbar is not available with Pinned Sites in Internet Explorer 10 on the new Windows UI.

Methods Used in this Task
- msSiteModeAddThumbBarButton(bstrIconURL, bstrTooltip)
- msSiteModeShowThumbBar()
Planning your toolbar interface
Creating toolbar buttons
Putting It All Together
Next Steps
More Examples
- HuffingtonPost.com
- DiscoveryChannel.com
Related topics

Methods Used in this Task

The following methods are introduced in this topic:

msSiteModeAddThumbBarButton(bstrIconURL, bstrTooltip)

You use the window.external.msSiteModeAddThumbBarButton method to add a 16x16 pixel button to the Thumbnail Toolbar.

msSiteModeShowThumbBar()

You use the window.external.msSiteModeShowThumbBar method to enable the Thumbnail Toolbar.

A Thumbnail Toolbar is essentially a "remote control" for your site. The toolbar appears underneath the thumbnail preview when you hover over a Pinned Site's taskbar button. This feature is especially useful for sites that implement video or audio playback, but many such possibilities exist. Thumbnail Toolbar buttons might include:

Play/Pause
Previous/Next (Skip)
Favorite (I like this...)
Share (Social Bookmark)
Search (More Info)
Change Status (Online/Offline)
Buy Now
Rate

As you decide which commands to make available on your toolbar, consider the following guidelines:

You cannot add buttons to a toolbar after the toolbar is visible. However, you can temporarily hide or disable buttons that are not needed. For more information, see Disabling and Hiding Buttons on a Thumbnail Toolbar.
A Thumbnail Toolbar can hold a maximum of seven buttons. The size of the thumbnail preview window limits the number of buttons you can display. In practice, this means that some buttons must perform double duty. For example, you might not need both a Pause and a Stop button, because the sound stops in either case. You can save even more space by using a single button for both Play and Pause. For more information about how to maximize space on the Thumbnail Toolbar, see Toggling Button State on a Thumbnail Toolbar.
The toolbar and its buttons are created for the lifetime of the tab. Even if you navigate away from the original page, the same toolbar and buttons are available to subsequent pages. You should start the toolbar with all the buttons you require, and re-create the toolbar in the same way on each page of your website.

Creating a Thumbnail Toolbar is a two-step process. Before you can display the toolbar, you must first create buttons by using the msSiteModeAddThumbBarButton method, as shown in the following code example.

// Add buttons
btnPrev = window.external.msSiteModeAddThumbBarButton('Images/prev.ico', 'Previous');
btnPlayPause = window.external.msSiteModeAddThumbBarButton('Images/play.ico', 'Play');
btnNext = window.external.msSiteModeAddThumbBarButton('Images/next.ico', 'Next');

Each button is assigned an ID when it is created. Make sure to save this value so that you can retrieve it later. When a button is clicked, the button ID will enable you to tell the buttons apart. If the toolbar was created earlier in the lifetime of the tab, the same button ID values are returned when you create the toolbar again. Just remember to use the same icon URL and tooltip text that you used when you created the toolbar the first time.

Note The original icon and tooltip are considered style zero (0) for purposes of msSiteModeShowButonStyle. For more information, see Toggling Button State on a Thumbnail Toolbar.

Finally, you display the toolbar by calling the msSiteModeShowThumbBar method.

// Show toolbar
window.external.msSiteModeShowThumbBar();

Putting It All Together

The Channel9 Podcast Player sample application provides three buttons to control audio playback, as shown in the following screen shot.

The following codes example shows how to create these three buttons.

// Add buttons
btnPrev = window.external.msSiteModeAddThumbBarButton('Images/prev.ico', 'Previous');
btnPlayPause = window.external.msSiteModeAddThumbBarButton('Images/play.ico', 'Play');
btnNext = window.external.msSiteModeAddThumbBarButton('Images/next.ico', 'Next');

Next Steps

At this point, you have a visible Thumbnail Toolbar that has three buttons that do not operate you click them. In the next task,Responding to Clicks on the Thumbnail Toolbar, you learn how to write an event handler for your toolbar.

More Examples

HuffingtonPost.com

HuffingtonPost.com uses a Thumbnail Toolbar with buttons for Facebook and Twitter.

When the user clicks on one of the toolbar buttons, a pop-up window appears for the chosen social network and then the user can share the current article with friends, followers, or people.