Introduction
With a couple minutes of work you can make your blog show an active tile with the five most recent posts on your blog and control how the different sizes display.
How to make your blog so it pins to the windows 8 start screen.
Step 1 - Create four pictures exactly the right size.
Step 2 - Load them on the web so they have a URL
Step 3 - Add some meta data to your page.
Step 4 - Tell readers how to pin your blog.
Before we start.
Try pinning this blog so you can see how it works.
On windows 8, go to the modern start screen and click on the explorer tile. ( This does NOT work in the desktop version of explorer. )
Create four pictures exactly the right size.
You will need four pictures, these can be modern style logos or simply any pictures you trim and re-size to the required sizes. They can have transparent areas if you like.The sizes needed are:
70 x 70 - tiny.png
150 x 150 - square.png
310 x 150 - wide.png
310 x 310 - large.png
Load them on the web so they have a URL
You will need to upload then to a web server where they are shared publicly and have a URL.--------------------------------------------------
One easy way to do this is to post all four of them in a post on your blog.
Click "New Post". Name it something like "Perminate draft (DO NOT DELETE) Win 8 pin images".
Upload the images using the "insert Images Icon in the blogger editor. Save the post as a draft.
--------------------------------------------------
You do not need to publish the post, just save it as a draft.
These are the pictures I used for one of my blogs. These are an example of what not to do. Notice that the background is white. Bad idea. Windows is going to put white text in the lower left corner of each tile.
Here is a better way to make the starting image for your active tile.
This solid background will work better, it uses a darker color background and it leaves a little space below the image for the text.
Once you have the images tucked away in your blog in a draft page, you will be able to right click on them, select properties, and copy the URL you will need for the code.
If you right-click the top image on the right then select Copy Image URL,. you will have something like:
http://1.bp.blogspot.com/-pW9Q..../wide.png
in your clipboard, Then you can paste it in the code in step 3
Add some meta data to your page
<meta name="application-name" content="Scott Hanselman's Blog"/>
<meta name="msapplication-TileColor" content="#83382b"/><meta name="msapplication-square70x70logo" content="/tiny.png"/>
<meta name="msapplication-square150x150logo" content="/square.png"/>
<meta name="msapplication-wide310x150logo" content="/wide.png"/>
<meta name="msapplication-square310x310logo" content="/large.png"/>
<meta name="msapplication-notification" content="frequency=180;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://feeds.hanselman.com/ScottHanselman&id=1;cycle=1"/>
<meta name="application-name" content="Bobs Tech"/>
<meta name="msapplication-TileColor" content="#CA82E9"/>
<meta name="msapplication-square70x70logo" content="tiny.png"/>
<meta name="msapplication-square150x150logo" content="square.png"/>
<meta name="msapplication-wide310x150logo" content="wide.png"/>
<meta name="msapplication-square310x310logo" content="large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=5; cycle=1"/>
Code
<meta name="application-name" content="Bobs Tech"/>
<meta name="msapplication-TileColor" content="#CA82E9"/>
<meta name="msapplication-square70x70logo" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMheYIcar33AXzksyrZ1vE87M4GlSJ1L36z_7uyeaHM5OxJnkHA-Hi-rtOxiSiDk_dF1Ja1r9IbcdGTtAjNOirz-fEUfuwFMfi4MFRdjUhcsU0gwuQzqYSQhOVJGOusGmHi39zsVIizbpJ/s1600/tiny.png"/>
<meta name="msapplication-square150x150logo" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZCg_dYgb3Mul3IQGhyKcNWB3v7mW_h4Q-XkzSePz8BHC6Ohu7pr5VN85hFEdDx-QyrTs-TvJmJMKp4lwGRMkfVrvfFr36EFZAKsGTWl99tKlFnOsA9UV7q7MnK95mMEvpIR-HEoT-8Sl/s1600/square.png"/>
<meta name="msapplication-wide310x150logo" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDq62g-Cf8JQnFqzuSkSBHG8pXmj4DGANe0nUyRriMUEUjvBE7xSUTsDKtSBkKOaZuuJuWR1O-zAvLyAr-n2VoaXe4FbjeS3iTZYyL8ifnXudVOt5AumkJ3aKhn7okhAsNQYUiOwzNPDvu/s200/wide.png"/>
<meta name="msapplication-square310x310logo" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6M2pEkTjW95Eur1VeEyCGorYxdRsJ_pGmgdkJEgaXZZhN2C6GTZGvEBd49pGXY-EfCXlSsmfS0l35-px0KqX_ki2wHjbbkTZox95_7IXFUSe_uIKY7SIrY-mToacvtnNWY6IJTI0GFn_l/s200/large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://bobs-tech.blogspot.com/feeds/posts/default?alt=rss&id=5; cycle=1"/>
Full site feed:
Atom 1.0: http://blogname.blogspot.com/feeds/posts/default
RSS 2.0: http://blogname.blogspot.com/feeds/posts/default?alt=rss
Note:These full-site feeds are real-time enabled; developers can subscribe to low-latency updates by using the PubSubHubbub protocol.
Comments-only feed:
Atom 1.0: http://blogname.blogspot.com/feeds/comments/default
RSS 2.0: http://blogname.blogspot.com/feeds/comments/default?alt=rss
Label-specific site feed:
Atom 1.0: http://www.googleblog.blogspot.com/feeds/posts/default/-/privacy
RSS 2.0: http://www.googleblog.blogspot.com/feeds/posts/default?alt=rss/-/privacy
Individual post comment feed:
Atom 1.0: http://blogname.blogspot.com/feeds/postId/comments/default
RSS 2.0: http://blogname.blogspot.com/feeds/postId/comments/default?alt=rss
Note: You can find the postId of an individual post from the Posting | Edit Posts tab. Simply mouseover the 'Edit' link next to a particular post, and that postId will be displayed in your browser's status bar.
--------------------------------------------
Further reading
Live Tiles Examples
IE Dev Center - Pinned site enhancements
msdn.microsoft.com Declaring Pinned Site Metadata
covers:
- Set the starting page of the Pinned site
- Specify tooltip text that appears when you hover the mouse pointer over the Pinned site button on the taskbar and desktop
- Constrain the initial size of the browser window
- Customize the color of the Back and Forward buttons in the Pinned site browser window
- Add static tasks to the Jump List
No comments:
Post a Comment