If you're anything like me, you'll be less than enthused with the social sharing options that come with a default BlogEngine install.  DotNetKicks?  DevZone?  For a solely tech-focused blog those might be useful.  But for the rest of us, not so much.  So here's how you can add links to each post for social networking sites like Facebook, StumbleUpon and Digg. 

You'll need an editor like Visual Studio or Visual Studio Express.  You can also use a text editor like NotePad.

Step 1 - Download web site icons

Download the icon pack and save the files to the images folder for your current theme (/themes/[themeName]/images).  If you are planning on transitioning to a different theme in the future, you may want to place the images in the "/pics" folder.

social networking icons.zip (2.49 kb)

Step 2 - Insert new CSS in style.css

Copy the following CSS into the style.css (/themes/[themeName]/style.css) for your current theme.  If you are going to use a different theme, you will have to copy the CSS into the style.css for your new theme.

.digg { background: url(./images/digg.png) no-repeat; padding: 3px; padding-left: 20px; }
.reddit { background: url(./images/reddit.png) no-repeat; padding: 3px; padding-left: 20px; }
.facebook { background: url(./images/facebook.gif) no-repeat; padding: 3px; padding-left: 20px; }
.stumbleupon { background: url(./images/stumbleupon.gif) no-repeat; padding: 3px; padding-left: 20px; }

Step 3 - Modify PostView.ascx

Open up the PostView.ascx file for your current theme (/themes/[themeName]/PostView.ascx).  Locate the bookmarks div tag.  Inside this div tag, add the following code.

<a class="digg" rel="nofollow" href="http://digg.com/submit?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&amp;title=<%=Server.UrlEncode(Post.Title) %>">Digg</a>
<a class="reddit" rel="nofollow" href="http://www.reddit.com/submit?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&amp;title=<%=Server.UrlEncode(Post.Title) %>">Reddit</a>
<a class="facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&amp;t=<%=Server.UrlEncode(Post.Title) %>">Facebook</a>
<a class="stumbleupon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>">StumbleUpon</a>

If you want to add links to more social networking services, you can add links to those services here.  The bookmarks div tag should look something like this.

<div class="bookmarks">
    <a class="EmailIt" rel="nofollow" href="mailto:?subject=<%=Post.Title %>&amp;body=Thought you might like this: <%=Post.AbsoluteLink.ToString() %>">Email</a>
    <a class="digg" rel="nofollow" href="http://digg.com/submit?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&amp;title=<%=Server.UrlEncode(Post.Title) %>">Digg</a>       
    <a class="reddit" rel="nofollow" href="http://www.reddit.com/submit?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&amp;title=<%=Server.UrlEncode(Post.Title) %>">Reddit</a>
    <a class="facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&amp;t=<%=Server.UrlEncode(Post.Title) %>">Facebook</a>
    <a class="stumbleupon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>">StumbleUpon</a>
    <a class="delicious" rel="nofollow" href="http://del.icio.us/post?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&amp;title=<%=Server.UrlEncode(Post.Title) %>">del.icio.us</a>          
    <a class="plink" rel="bookmark" href="<%=Post.PermaLink %>">Permalink</a>
    <a class="rssLink" rel="nofollow" href="<%=CommentFeed %>">Post RSS</a>          
</div>

Step 4 - Save and upload

Save changes and upload the new and modified files to your server.  Start sharing.