Adding Tweet Button to ActiveModules’ ActiveForums

Comments (4) | Share

Here is how to add a “Tweet” button to your ActiveForums threads, using John Resig’s (@jeresig) “Easy Retweet Button”.  I added a “Tweet” button to the header of each post, right next to the existing quote/reply buttons.

First, modified the default styling of John’s retweet.js so that the tweet button matches ActiveForums.  I modified retweet in the following ways:

1. Set the link_text to just “ Tweet”.
2. I killed the click count by setting count_type to “none”.
3. Completely deleted the “styling:” section at the top of retweet.js. 
4. Near the bottom of the script, I removed the line of code that adds the title of the page to the content of the tweet (this line:  elem.title = document.title). Not doing so results in an ugly tweet text.
5. I added a tiny twitter logo to the “Tweet” link text by modifying the setting of elem.innerHTML:
   elem.innerHTML = "<span><img align='absMiddle' src='http://www.rat-terrier.com/images/Twitter_16x16.png' border='0'>" + RetweetJS.link_text + "</span>";

Here is the modified retweet.js.  Copy your own retweet.js file to your own server and include it in your DNN page by adding the following line to the top of your skins ascx file.:

<script src="http://www.textbox1.com/retweet.js"></script>

Update: Previously I'd suggested adding the above line to the root default.aspx.  Stephen Webster of bikeclicks.com corrected me and suggested adding this line to the skin within your DNN portal instead.  This keeps the functionality limited to a specific portal (even if it's portal 0) and when you upgrade DNN the next time your changes won't get over-written.

Next, modify the ActiveForums TopicView template to make use of the retweet code (easiest way is to modify TopicView.txt in DesktopModules/NTForums/templates/).  Here is an example snippet:

[TOPIC]
<tr>
    <td valign=top class="[POSTINFOCSS]" height=100>[POSTINFO]<br>[SPACER:1:125]</td>
    <td valign=top class="[POSTREPLYCSS]" width=100%>
        <table cellpadding="4" cellspacing="0" border="0" width="100%">
            <tr>
                <td class="afsubrow"><a name="[POSTID]"></a>[POSTDATE]</td>
                <td class="afsubrow" align=right valign=top>[ACTIONS:DELETE]
                        [ACTIONS:EDIT]
                        [ACTIONS:QUOTE]
                        [ACTIONS:REPLY]
                        <a class='retweet self'>[SUBJECT]</a>
                        [ACTIONS:ALERT]&nbsp;
                </td>
            </tr>

Note:  I did this with ActiveForums v3.7.0.12761.