How to incorporate social sharing buttons on the BlogEngine.NET blog

Introduction

BlogEngine.NET is very popular Open Source blog hosting engine written in C# on top of ASP.NET technology. This engine is getting more and more adopted, and one of the most common questions people ask is how to incorporate article sharing functionality within the blog.

For illustration purposes, I will be using a couple content sharing services: OpenWire and CommonInterview, but the same concept can be applied to any of your favorite systems.

Common Interview (http://CommonInterview.com ) is a PHP based content sharing service built on top of Pligg CMS, thus the same approach would work for any Pligg site.

OnlyWire (http://www.onlywire.com ) in turn, is a content and bookmark distribution, which allows to aggregate content sharing functionality with different providers.

As any other, those content sharing services provide a piece of JavaScript to be included on your page to integrate sharing functionality. However, there are number of tricks you need to do in order to get them working in the most convenient way for your users.

BlogEngine.NET already provides a share by email option, so it creates a very convenient location for you to insert sharing buttons:

In order to do so, open themes/Standard/PostView.ascx (replace the standard with the theme you are using). PostView.ascx is used to generate article templates for both list and full view, so your share button will appear in both places.

Find the line:

<a rel="nofollow" 
  href="mailto:?subject=&body=Thought you might like this: ">E-mail</a>

Next to this line, add:

| <a href='http://www.onlywire.com/submit?u=<%="http://" + 
  HttpContext.Current.Request.Url.Authority + 
  Post.RelativeLink %>&t=<%=Server.HtmlEncode(Post.Title) %>
  &tags=<%=TagLinks("+") %>' class="owbutton" 
  title="Bookmark & Share this Article" target="_blank">
  <img src="http://www.onlywire.com/i/buttons/127x16_1.png" border="0"></a>

Let's take a look at the code above as there are a couple of interesting things here.

The parameter "u" in the OnlyWire query string requires the article URL; however, in the list view, you have multiple articles on the same page, so you need to tweak the default code and add the following line instead of the location:

<%="http://" + HttpContext.Current.Request.Url.Authority +Post.RelativeLink %> .

Also, in BlogEngine.NET, you can use the function TagLinks(separator), which already exists in BlogEngine.NET to append article tags to the Share button. And finally, the "t" parameter is the submitted article title which you can get from the Post object itself. Just don't forget to call Server.HtmlEncode, or the link might break if you would have articles with special characters in the title.

The final result should look something like:

Most of the sharing services use the same parameters, so just change the OnlyWire URL to the service you like and you should be good to go.

As I already mentioned, this would incorporate the Share button on both the list and detail article view. But, what if instead of the Sharing button, you want to use an external Vote button from one of the services like Digg, DotNetKicks, RedIt, or others?

Here is an example of doing this by using the Common Interview External Voting button.

Find the line: <div class="text"> in the PostView.ascx file. This is the place there the article text begins.

In order to check if the template is used on the front page in the list view or in the detailed article view, you can use the following JavaScript:

<script type="text/javascript"> 
var url = location.href.toLowerCase();
if(url.length == rawUrl.lastIndexOf("/")+1 || 
   url.indexOf('default.') >=0 || url.indexOf('index.') >=0)
{
  // Add Code here if you want it appear only on front page
}
else
{
  // Add Code here if you want it appear only on detailed page
}
</script>

Now, depending on your website design, you can add an external voting button at the desired place in the condition check above, as follows:

<script type="text/javascript"> 
var url = location.href.toLowerCase();
if(url.length == rawUrl.lastIndexOf("/")+1 || 
   url.indexOf('default.') >=0 || url.indexOf('index.') >=0)
{
  // Add Code here if you want it appear only on front page
}
else
{
  // Add Code here if you want it appear only on detailed page
  document.write(‘<IFRAME vspace=0 height=71 marginHeight=0 
    src="http://commoninterview.com/evb/url.php?url=<%="http://" + 
    HttpContext.Current.Request.Url.Authority +Post.RelativeLink %> 
    &imageType=1" frameBorder=0 width=54 name=pliggit scrolling=no></IFRAME>’);
}
</script>

Another thing to mention is that because of the AJAX call, you cannot use document.write on the script block, but rather need to write the final frame by yourself, as in the code above.

You can also apply more advance logic. For example, commonInterview accepts only posts about interview questions; so, let's modify the code above to show the Vote button only on posts containing "Interview" and "Question" in the post title:

<script> 
var rawUrl = location.href.toLowerCase();
if(rawUrl.length == rawUrl.lastIndexOf("/")+1 || 
   rawUrl.indexOf('default.') >=0)
{
  // Add some code you want to appear only on front page
}
else
{
  // Add some code you want to appear only on detailed page
  var title=''; 
  if (title.indexOf("question")>0 && title.indexOf("interview")>0)
  {
    document.write('<IFRAME vspace=0 height=71 style="padding:10px" 
      marginHeight=5 src="http://commoninterview.com/evb/url.php?url=<%="http://" + 
      HttpContext.Current.Request.Url.Authority +Post.RelativeLink %> &imageType=1" 
      frameBorder=0 width=54 name=pliggit scrolling=no></IFRAME>');
  }
}
</script>

The result would be the Voting button in the top right corner of your article:

The exact same code can be applied to integrate almost any content sharing service. You can see a live example of this code here: http://interviewpattern.com.

History

• Initially posted: Jan. 2010.