<!-- Include jQuery via the Microsoft CDN-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"
type="text/javascript" ></script>
<!-- Include the pinify jQuery plugin -->
<script src="jquery.pinify.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Here we're adding calling pinify and passing it a set of options
// pinify will then automatically create the correct <meta> tags and
// insert them into the head of your document
$("head").pinify({
applicationName: "Build My Pinned Site",
favIcon: "/favicon.ico",
navColor: "#3480C0",
startUrl: "http://buildmypinnedsite.com",
tooltip: "Start Build My Pinned Site",
window: "width=1024;height=768"
});
// pinify() can be called with no parameters,
// if it is, the plugin will use current information available
// to the browser to set the needed values.
});
</script>
How to use this code.
Use HTML for basic pinning
Upload the favicon (.ico) files that you created above to your site's server
Use the tag (line 4) to point your site to the favicon you created
Use the optional tags to define how your site should behave when a user pins it:
application-name (line 5): Users see this in when they hover over the Windows Taskbar
msapplication-tooltip (line 6): Users see this in their Windows Start Menu or Desktop
msapplication-starturl (line 7): When a user pins your site, this is where they always start from (like your home page)
msapplication-navbutton-color (line 8): Make the browser feel more like your site by choosing colors to match your favicon.
msapplication-window (line 9): Indicate if you want the window to be a specific size
Copy and paste the code above into the HTML tag on your site
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about Declaring Site Metadata on MSDN.
Use jQuery for basic pinning
Download the pinify jQuery plugin and upload to your site's server
Use the jQuery favIcon option (line 13) above to point your site to the favicon you created
Use the optional jQuery code to tell with your site how it should behave when a user pins it:
applicationName (line 12): Users see this in when they hover over the Windows Taskbar
tooltip (line 14): Users see this in their Windows Start Menu or Desktop
startURL (line 15): When a user pins your site, this is where they always start from (like your home page)
navColor (line 16): Make the browser feel more like your site by choosing colors to match your favicon.
window (line 17): Indicate if you want the window to be a specific size
Copy and paste the code above. Place the code right before the closing tag of your site’s HTML or copy into your own document.ready function
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Update the plugin settings for your site or remove the settings altogether and Pinify will pull information from your site to generate the pinning tags
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about using the pinify jQuery plugin here.