Spread the word on Twitter!

Twitter seems to be taking over the web. Now you can provide your clients with a web presence that is fully integrated with Twitter and makes it easier for their content to go viral on Twitter. There is a variety of ways to integrate Twitter into your blog. Here I show you how to integrate Twitter with a DNN website and place it alongside your SunBlognuke blog.

This is done with the core News(Rss Feed) module, which is available free here:

http://www.dotnetnuke.com/Resources/Downloads/ProjectsDownloads/tabid/1373/Default.aspx

Now, look at the following screenshot:

twitterWidget

How to install it and set it up:

  1. Make sure you have installed the core News (Rss Feed) module. If not, please install it first.
  2. Add a News (Rss Feed) module into the sidebar pane of your blog page.
  3. Enter the feed panel by selecting the admin option from the drop down menu next to the name of the Twitter feed and add your twitter feed url. It should be formatted like "http://twitter.com/statuses/user_timeline/yourSwitterUsername.rss".  Not that you need to change "yourTwitterUsername" to your actual Twitter username. At this point the module will start feeding your Twitter posts.
  4. Download to your computer the customized XSLT transform package TwitterWidget.zip. Unzip it and edit the file named "TwitterWidget.xsl" in a plain text editor, making the following changes:
    Note: The DotNetNuke Twitter XSL Transformation is from dwalker's great post but I have modified it to work better with SunBlogNuke and provide some additional features.
    1. Find the following code:
      <a target="_blank" title="Follow me at Twitter" href="http://twitter.com/sunblognuke" class="followMe">More updates...</a>

      Change “sunblognuke” to your actual Twitter name. You can also change “More updates…” to “Follow me…” or anything else you like; this is the text that will appear at the bottom of your feed, that will take people to your page on Twitter where they can sign up to follow you.

    2. Find the following code:
      <img src="http://www.yourdomain.com/Portals/0/Blog/twitter.ico" alt="" style="border:none;"/>

      Change “yourdomain.com” to your actual domain name, and change “Blog” to the name of the folder you created on your DNN site for the TwitterWidget files. For example, if your domain was www.mysunblog.com and the folder you created was “BlogSupport” inside your root folder, the line would look like this:

      <img src="http://www.mysunblog.com/Portals/0/BlogSupport/twitter.ico" alt="" style="border:none;"/>
  5. Save the file "TwitterWidget.xsl" with your changes in it.
  6. Enter the News Module Settings.  Upload the modified XSLT transform file TwitterWidget.xsl and twitter.ico to the folder you created on your DNN site (in my example this is the Blog folder). Then configure any other options you want. Your screen should look something like this:

    twitterSetting 

    Note: You may get an error message when you try to upload the twitter.ico file saying that it is not an allowed file type. If that is the case, you need to log into your DNN site as a SuperUser (ideally as the Host), go to the Host / Host Settings page, scroll to "Other Settings" and append 'ico' in the "Allowable File Extensions" and it will look something like this: swf,jpg,jpeg,jpe,gif,bmp,png,doc,xls,ppt,pdf,txt,xml,xsl,css,zip,template,docx,xlsx,pptx,js,htc,ico

  7. Click update to show your latest Tweets.
  8. (Optional) you may want to change the style of your Twitter timeline list by adding the style class [followsMe] in your skin style sheet as shown below. The twit_b icon can be found in the TwitterWidget.zip.
    .followMe
    { background: url(images/twit_b.jpg) left top no-repeat; padding: 0 12px 30px 0; text-indent: 140px; float: left; width: 288px; height: 45px; }

That's all. :)

Actually everyday there seems to be more and more Twitter applications and blog plug-ins created. What have you seen or have you used to integrate Twitter into your blog?

PS:  updated clearly with Tom’s help.