Tweaking IE11 Live Pinned Tile Code for dual feeds on same domain

After using Microsoft’s Build My Pinned Site web app for my personal site, I decided to see what I could create for www.msmvps.com which hosts two blog platforms, WordPress and Community Server. I did some reading on MSDN, but found no reference to using more than one feed. So it was time to experiment.

 

Build My Pinned Site really does most of the work, even for tweakers like me. I started by specifying a Title (which you can leave blank if you wish), a background color for the Tile and by uploading a single image (use a png 558×558 pixels for best results and maximum flexibility). Leave lots of padding in your image so that it can be cropped to each of the supported tile sizes. Cropping for each tile size is easily done right on the web page. In the case of building the Live Pinned Tile for msmvps.com, I specified a white background, but wanted a border around the edges which the crop function does not allow you to specify. So after downloading the zip file from buildmypinnedsite.com, I used PhotoShop (you can use any editor) to add the borders to each of the four image files to give each tile a more a finished look.

build1

 

The code generated by the web app within the wizard or in the download contains references to the first RSS URL I used:

 

build2

Once you’ve specified the text and graphics, you enter the URL for the RSS feed. Then you can download the package. I ran the Add Notifications process again on the second RSS URL so that I could edit the browser.xml file in the package I would be downloading.

 

The edited browser.xml contained references to both feeds (so the most recent three posts from the Community Server blogs and two posts from the WordPress blogs would always cycle through the Live Pinned Tile):

 

xml

 

There are five files in the package which need to be uploaded to the root of your blog folder on the blog server. You will need to edit the header.php of a WordPress blog or insert the code within the header tags on any site and add the following code in the appropriate place:

 

 

<meta name=”application-name” content=”Whatever name you specified when building mypinnedsite”/>

 

Favicons are also included in the pinned live tile functionality if you have configured this in your header and added the ico file to your root directory. If the header includes the code:

 

<link rel=”shortcut icon” href=”/favicon.ico” />

 

Visitors to  MSMVPS.com who elect to use the IE 11 Live Pinned Tile feature should

1. Select the Favorites icon

pin1

2. Select the Pushpin icon

pin2

3. Select one of the four tile sizes (I suggest the wide tile which should be the first one presented) and then select Pin to Start.

 

pin3

End result, the Pinned Live Tile will cycle through five recent posts from both blog platforms at www.msmvps.com

 

pin4pin5

 

Images will display if included in the feed as well.