Tweet Button Control For BlogEngine and ASP.Net

Download Source Code For Server Control (3.38 kb)

Download Assemblies For Server Control (5.26 kb)

For quite some time I have been using Tweet This button on this blog and on some of client's customized blogs. Yesterday when I tried to use that button to tweet about new posts I saw that Twitter has changed their handling of URL that used to populate the tweeter box to post a tweet. So I went to their developer support pages and noticed that Twitter has updated their APIs and provider few more options now to share the URLs on tweeter. For most part you can just put their two lines of javascript on every page and twitter will pick up the URL of that page along with title of the page and create a message for you to post as a tweet.

But if you want to have more control on the message along with the URL then you will need to be little bit work on how the HTML is constructed on your page. For example in my implementation of BlogEngine I have two sets of titles for each post. One title that is used to construct URL and second is the title that actually gets put in the TITLE tag of the page itself. Now you can see that default javascript may not work for me. Also from time to time I like to include my tweeter screen name in the tweet itself.

I have created an ASP.Net server control that you can deploy in any ASP.Net application including BlogEngine.Net. The implementation renders following HTML on the page as described in Twitter Documentation.

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
  <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="http://dev.twitter.com/pages/tweet_button"
      data-via="your_screen_name"
      data-text="Checking out this page about Tweet Buttons"
      data-related="anywhere:The Javascript API"
      data-count="vertical">Tweet</a>
</div>

How to include Tweet Button In BlogEngine Posts

• Compile the attached project or use the pre-compiled binaries for the control and copy them in BIN folder of your application.

• Add Register tag at the top of your page or view's control that refers to this control's assembly. For example on my blog this looks like as below.

  <%@ Register TagPrefix="ByteBlocks" Namespace="ByteBlocks.TweetThisButton" Assembly="ByteBlocks.TweetThisButton" %>
  

• Add instance(s) of control on your post or page as shown below.

  <ByteBlocks:TweetItButton ID="TweetPostButton" runat="server" CounterOrientation="Vertical" />
  

• Now set the properties of the control to specify tweet text and URL. For example I did this in code in PostView of my theme as shown below.

  public override void RenderControl(HtmlTextWriter writer)
  {
     TweetPostButton.TweetUrl = Post.AbsoluteLink.AbsoluteUri;
     TweetPostButton.TweetText = Post.MetaTitle;
     base.RenderControl(writer);
  }
  

Now you are all set with Tweet Button control in your post. Following screen shot shows how it looks. You can actually see it at bottom of this post as well and give it a try and see how it works!