During the Windows 8.1 preview, I posted an article about IE 11 pinned tiles. Last night, one of my Twitter followers asked me why I didn’t have a Pinnable Live Tile for this site and I replied that I’d removed it as I wanted visitors to download my dedicated app for me blog. I soon realized that not everyone wants an app, so went about restoring/rebuilding the functionality. If you haven’t tried Microsoft’s free and easy buildingmypinnedsite.com, put it on your to-do list and spread the word.
My Twitter friend pointed me at a WordPress plugin for this function. I took a quick look at it and found it to be a derivative of Microsoft’s Build My Pinned Site and that it used PHP and Javascript and a single image with less control over the end result. The plugin is ok for novice users, but buildmypinnedsite.com also offers a way to upload a single image, crop it for each of the five supported tile sizes. I do recommend that if you have a self hosted site and access to the root that you use buildmypinnedsite.com and upload the images and the xml file to the root and then edit the header (header.php) in your WordPress theme for the best impact and full functionality. It’s wizard driven (and you can even manually tweak the images if you download the zip file).
You start 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.
Once you’ve specified the text and graphics, you enter the URL for the RSS feed. Then you can download the package. 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 and add the following code in the appropriate place:
<meta name=”application-name” content=”Whatever name you specified when building mypinnedsite”/>
The browser.xml contains all the code needed to fetch the RSS feed to cycle through the most recent five posts.
You can alternatively copy ALL the meta code presented to your header and upload the four png image files. (But again, I recommend you use the xml and image file upload method if you are able to access the root of your server).
The user experience to add a Pinned Live Tile in Internet Explorer in Windows 8.1 is quite good.
The visitor to your site navigates to your site in IE and swipes or right clicks to display the app bar and the add to favorites command.
Then, they select the Pin to Start icon.
Finally, the visitor to your site selects one of the four tile sizes using the < and > arrows presented and then selects Pin to Start.
 |
 |
 |
 |
The end result on a Windows 8.1 computer:
The large tile shows titles of recent blog posts and IMAGES from digitalmediaphile.com.
Undocumented extra bonus! It looks as though 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” />
then the Pinned Live Tile will display the favicon in the lower left hand corner (which you can see in the screen capture above, just below the listing of three recent posts).