Live Tiles Toolbox
Live Tiles Toolbox - Download Links Toolbox – Step By Step
Any interest in adding a cool Windows 8 UI download link toolbox to your blog or website? Make your blog or website the place people go to find the latest downloads 
I put together some resource pages that I am using on my blog and wanted to share the embed codes with you in case you want to use it on your website or blog. Make your site the GO TO location for the latest downloads by adding this really cool looking toolbox. You make the change on your site and it will “auto magically” be update with links to the latest software when new releases come out. I would love to see you post on your blog or website if you think the information is useful to your friends or other audiences, please do help me promote it (see Live Tiles Toolbox Friends for details). If you need help implementing it for your blog/website please feel free to reach out to me itproguru.com/contact/ or itproguru @ Microsoft.com. I would be happy to help you get these activated for your community.
I created some active images for the download resources. There is a horizontal version and a vertical grid version. For each there is a “Static” and an “Active – Live Tiles” version. Use whichever you want (or both/all if you like) Notice more changes are coming regularly. You now have the option of adding your own image and link to your RSS or About page (or whatever page you want)
If you add this toolbox to your website or blog, send me an email with a link to the page that is displaying the toolbar and I will add you to the “Friends of Live Tiles Toolbox” post. ITProGuru blogs get 10’s of thousands of unique visitors per week so a link back to your site can help raise your ranking. Hope this helps and thanks for supporting Live Tiles Toolbox. If you do not have a blog you can still help spread the word about this great tool. Please tweet or email your friends “Check out #LiveTilesToolbox itproguru.com/toolbox A must have tool for all bloggers!”
Current links included Windows Server 2012, Windows Azure, Early Experts, Microsoft Virtual Academy, System Center, Private Cloud, Hyper-V Server, More… Plus, we are planning some really cool changes. If you have more suggestions, please let us know.
=======================================================================
Add Vertical “Live Tiles” Toolbox Embed Code
Add the Vertical Grid br embed code in your blog where you want the vertical images All that is required is copy the following to the source of your blog/website where you want the graphics to be displayed:
embed frame
<br src="/img/spacer.gif">
When you enter the code above a box shown below will be inserted.
========== Use YOUR PICTURE and URL to About or RSS =====================
Add Vertical “Live Tiles” Toolbox Embed Code
First you will need to create a picture 110 x 110 px and post that on your website or blog (or skydrive or whatever) then paste the below embed code changing the location of the images and URL links to your image and your URL link. Add the modified Vertical Grid br embed code in your blog where you want the vertical images and you are done. Put the modified version of the the following source embed on your blog/website where you want the graphics to be displayed:
====== Embed Codes for Rolling Tiles with custom static tiles ==========
<div style="text-align:center;px"> <!-- CHANGE THE FOLLOWING LINE TO CONTAIN PATH TO YOUR "About Me" Page--> <a href="itproguru.com/about"> <!-- CHANGE THE FOLLOWING LINE TO CONTAIN PATH TO YOUR GRAPHIC--> <img src="itproguru.com/wp-content/uploads/2012/11/dan_110px_me.png" title="Who is Dan Stolts?" border="0px" /></a> <!-- CHANGE THE FOLLOWING LINE TO CONTAIN PATH TO YOUR RSS--> <a href="feeds.feedburner.com/ItProGuru" target="_blank"> <img src="itproguru.com/wp-content/uploads/2012/11/MetroRSSSubscribeTile110.png" title="Subscribe to RSS" border="0px" /></a><br></div><div style="text-align:center;px"><br style="margin:0; padding:0; border:none" width="245px" src="itproguru.com/livetiles-v2.htm" height="390" frameborder="0" scrolling="no"></br></div>
When you enter the code above a box shown below will be inserted.
=======================================================================
Add Horizontal “Static” Toolbox Embed Code
Add the Horizontal Tools br embed code in your blog where you want the horizontal images All that is required is copy the following to the source of your blog/website where you want the graphics to be displayed:
<br width="100%" src="itproguru.com/eplinkh.htm" height="140" frameborder="0" scrolling="no"></br>
This will add a box like the following at the location where you entered the above code.
If you want less than 6 boxes, see below to change the width
=======================================================================
Add Horizontal “Live Tiles” Toolbox Embed Code
Add the Horizontal Live Tiles Tools br embed code in your blog where you want the horizontal images All that is required is copy the following to the source of your blog/website where you want the graphics to be displayed:
<br width="100%" src="itproguru.com/livetiles-h.htm" height="140" frameborder="0" scrolling="no"></br>
This will add a box like the following at the location where you entered the above code.
the default is to have 6 boxes wide. If you would like to have less boxes, change the width as follows
- Full Size (6 Boxes): “width = 100%”
- Five Boxes Wide: “width = 595px”
- Four Boxes Wide: “width = 475px”
- Three Boxes Wide: “width = 360px”
- Two Boxes Wide: “width = 245px”
- One Box Wide: “width = 130px”
- See Samples Page
=======================================================================
Deployment Hints:
- If you are using SharePoint you can follow instructions for inserting an br from this post or for later versions of SharePoint see this post
- If you have other platform and cannot figure out how to add it, contact Dan Stolts itproguru.com/contact for help getting it on your site.
- If you want to HIDE the Live Tiles Toolbox <embed> link change the height in the embed code. You might have to play around a bit with the numbers but I think the following will get your real close. Change the “150” in the horizontal bar to “125”. Change the “390” in the vertical bar to “353”. However, I strongly suggest you leave it. This will give you easy access to setup and information page for the Toolbox so you can easily take advantage of future enhancements. It will also leave in the Friends link so others can see your are a friend of Live Tiles Toolbox.
Suggested Uses for the embed tools…
- I used the Horizontal Bar to at the top and bottom of blog posts as well as in the middle of a blog post kind-of like an advertisement. It adds color and value to the post.
- I used the Vertical Grid for the News in the sidebar. You can add it to your blog as a separate widget if you prefer by adding an “unfiltered HTML” and pasting the br embed.
Examples:
- My primary Blog: ITProGuru.com (Right sidebar & bottom of page) notice I added to all pages including search, tag results, etc)
- My TechNet Blog blogs.technet.com/danstolts: Added to top bar
- Blog post with the horizontal bar added in the middle of the post (like an advertisement)
Please provide feedback.
Feature Enhancements |
ETA |
| Add Randomizer so the boxes change location | 12/2012 |
| Add a 2x Tile for Blog Feed RSS to scroll through a few hot blog articles - Allow toolbox hosting site to pick “Tag” to use for Blog feed tile - Allow toolbox hosting site to turn off blog feed tile |
2013 |
| Add Windows 8 Download Add Visual Studio, SQL Server, Etc Download => After tiles are activated and they can scroll Do not want to take more real-estate |
2013 |
| Add [optional] Windows Phone Skin around vertical grid | 2013 |
| Add 4 square “Follow Me” block to link to RSS+Twitter+LinkedIn+Facebook/email OR |
11/2012 |
| Create Promotion To Encourage Use: |
- Link back to their site [already setup]
- Prize for all that participate [xbox 1600 pts card for all "friends of Toolbox"?]
- Prize for top referrer each month (requires unique links) [xbox points/ xbox game?]
- Prize for three consecutive months of top referrer [New Laptop?]
- Drawing prize each month (xbox ?) – all that have on their website will be automatically entered.
12/2012
Allow host to add their own links to the tool rotation 1/2013 Please submit your ideas!
History:
- 2012-11-13:
- Create Shared Tools Toolbox – Vertical (2column x 3rows) and Horizontal (6column x 1row)
- 2012-11-14:
- Create “Live Tiles Toolbox <embed>“ Link on primary embed graphics
- Add instructions on how to turn off/hide “Live Tiles Toolbox <embed>” link (Deployment Hints)
- Add Future Enhancements section
- 2012-11-15
- Activate the Tiles – Create Vertical Live Tiles
- Animate tiles sample
- Scroll through more tile options sample
2012-11-19
- Activate the Horizontal Tiles – Create Horizontal Live Tiles sample
- Allow hosting user to add their own images and url’s for the first row sample Add Picture and Link back to host website – Dynamically allow user to add their own picture with a link back to their home page/about page/rss page sample
- Add Friends of Live Tiles Toolbox details Send a message to me with a link to where you have the toolbox posted and I will link back to your site. With 10′s of thousands of unique visitors every week, this could help you in search relevance. Please allow a few days for me to get your link posted. I reserve the right to refuse based on website content (objectionable content sites rejected). The email to Dan Stolts should include the following information:
- Subject: Friends of Live Tiles Toolbox
- Name: Your Name and/or Company Name
- URL: URL of blog or website page that is showing the Toolbox
- Description: 10 word description of your site
- Comment: Comment about Live Tiles Toolbox and/or What you like about Live Tiles Toolbox
PS. Yes, it is true IT “Pro Guru Blog” is an “Official Microsoft Blog”. You can read more about the author at itproguru.com/about
Very Special Thanks:
- Powered By: Bay State Integrated Technology
- Robert Borges help in implementation of toolbox
- Peter Laudati JrzyShr Dev Guy coding activation of live tiles
Other Programs You May Be interested in by ITProGuru:
- Call To Action Challenge – Are you ready?
- Early Experts Get Certified!
- Proof of Concept Get Started Today!
- Windows Server 2012 – Download Now!
- Free Online Server – Build it and they will come!