Introducing the NuGet Button

When I was going through Scott Hansleman’s blog posts, I had realized that he makes extensive use the the nuget style Install-Package buttons like the one shown below.

I was a bit jealous and wanted to see for myself if I could have those nuget install-package buttons too. As of now I have around 18 unique nuget packages (most popular ones being Facebook C# SDK, SimpleJson and FluentHttp) hosted at nuget.org so I thought it was lame to do a print screen, a bit of editing and then pasting the image. So, I needed to come up with a new solution, a replacement to using images.

In the mean time, I seriously needed to make more people aware of nuget’s awesomeness. In Facebook C# SDK, we ship two files from the codeplex download tab – binary/assembly files (also available through nuget) and source code. But at the end of the day, the number of assembly files downloaded from codeplex always seems to be the higher than that of the source code and almost double than from nuget. (most probably VS2008 users.). So I decided that I ‘m going to start putting the Install-Package button in my blog on almost every blog post I do about Facebook C# SDK.

So my answer to both the above problems – a Javascript based solution that works with minimal amount of code the way you want too in any of your existing sites, just like Facebook’s like button, Google's +1 button or Github's "Fork me on Github" ribbons.

Enough of the history crap, show me the code First of all you will need to add the following code just before the end of the body tag. nuget-button.min.js is download asynchronously using the below code.

<script type="text/javascript">
    (function () {
        var nb = document.createElement('script'); nb.type = 'text/javascript'; nb.async = true;
        nb.src = 'http://s.prabir.me/nuget-button/0.1/nuget-button.min.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(nb, s);
    })();
</script>

Then use pre tag and assign a class called nuget-button to it where ever you want the nuget Install-Package button to be rendered.

<pre class="nuget-button">Install-Package Facebook</pre>

You can see a live working example at http://s.prabir.me/nuget-button/0.1/nuget-button.htm

The best part about nuget-button is that you could now copy/paste the code and execute directly in the nuget package manager. No worries about Javascript being disabled coz pre is a standard html tag and will still get rendered.

Some of you may be wondering why its named “nuget-button” when there is nothing to do with behavior of a button like clicking. For vNEXT I plan to add anchor tag for the name of the project, so when you click, it will open http://nuget.org/List/Packages/Facebook. It is just the beginning and since all the code for nuget-button is open source, make sure to fork it or send suggestions/patches at https://github.com/prabirshrestha/nuget-button.

Here is a live sample showing nuget-button working in my blog.

Install-Package Facebook