Al Bsharah Business Minded, Technically Inclined

Integrate TweetMeme Button into BlogEngine.NET

I

UPDATE: 5/26/2010:  As you’ve probably noticed, I’ve replaced this code with a Topsy.com button.  I like the system better, and it seems much more reliable and stable.  You can apply this similarly by checking out their APIs and sample code.

UPDATE 5.13.2009:  Trying to find out why the counter is not incrementing, I know there’s at least two out there…and other posts seem to work fine.

UPDATE 5.15.2009:  Appears Tweetmeme might have lost some Tweets and not aggregated them into the system, they did an upgrade and things seem to be better…  (their support response was admirably quick, too!)

Ran across a nice article on Daily Cycle called Re-Tweet Counter For BlogEngine.NET that shows how to add a TweetMeme Button to your site or blog.  This shows how many times your post has been re-tweeted, as well as allowing your readers to easily re-tweet your article.

As you can see, I’ve added the “button” to the left of the body text within each post.  As stated in the Daily Cycle post, all it takes to get up and running is a quick modification of the TweetMeme code and the PostView.aspx file in your theme.  Voila, you’re good to go.

My code is slightly different than that posted on Daily Cycle, so I’ve included it here.

<div style=”float: left; padding: 10px;”>
  <script type=”text/javascript”>
    tweetmeme_url = <%=”‘” %><%=Post.AbsoluteLink %><%=”‘” %>;
    tweetmeme_source = ‘ALBsharah’;
  </script>
  <script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>
</div>

You can also add the following line for a more “compact” version of the button:

tweetmeme_style = ‘compact’;

Enjoy… Oh, and go click the Re-Tweet button while you’re at it!

About the author

Al Bsharah

Al’s been involved in multiple San Diego startups since 1999 after leaving the Detroit auto industry as an electrical engineer. He's started two of his own companies where he's raised capital from both VCs and angels, and sold one of them to both Seismic and Return Path. He resides on the board of Startup San Diego, is a Tech Coast Angels member, and has graduated both Techstars and Founder Institute accelerator programs where he now mentors. Al is currently the Vice President of Product Strategy at Seismic and in his free time he manages to play a little beach volleyball, trade stocks, and camp with his wife, son, dog, and friends.

12 comments

  • Hey thanks for the link. I like the way you have added your re-tweeter. I thought about doing something similar but I often have images at the start of the post so didn’t want it to get in the way.

  • Thanks for posting, Tim! Your article was great and got me rolling with the button, which I love.

    It doesn’t look *too* bad with images (I do that a lot too, but with the images to the right), you can see it in some of my other articles. It’s starting, in some cases, to look a little cluttered though…but I still like it.

    Cheers!

  • Thanks, Al. I just ran across Tweetmeme. And found your post in a search. Saved me a bit of work. I’m not yet sure if I’ll keep the compact button at the top of stories where — as you mentioned — it can start to make things cluttered. But it’s easy enough to move it later.

  • Hey Robin, thanks for commenting! Glad you liked it, I’ve been very happy with how it works. Oh, and thanks for clicking the re-tweet button… <grin>

  • Sure. Always happy to retweet even though I doubt many of my followers on Twitter would even know what BlogEngine is. But hey…

    BTW, one thing I’ve noticed is that having the button on the posts makes it really awkward to change a slug after the fact (as I sometimes do with redirects from ManagedFusion.Rewriter). TweetMeme only recognizes tweets to the current url.

  • Ahhhh, that’s a good point. I’ll have to keep that in mind…

    While your readers might not be familiar with BlogEngine, you might be surprised how many people talk about BlogEngine on Twitter! I have my Google Reader pull in tweets via http://search.twitter.com/search?q=BlogEngine – I get multiple hits per day on it, and have learned about new extensions this way (i.e. this very button).

  • Thanks for posting… The template is based off one of the BlogEngine.NET default themes, but I modified the color scheme and added a third pane to the left (the LifeStream).

  • How do I get the box to drop down a little further into the posting? I used your code (changing my username, obviously) but the box pops up into the title bar instead of melding neatly into the text.

  • Hey Jason, looks like you might have wedged the code into the wrong place? (i.e. after your name and before the comments counter)

    It needs to go right before the first character of the post body…so find that control and stick this code in front of it. Should do the trick…

    Good luck!

By Al Bsharah
Al Bsharah Business Minded, Technically Inclined