Tweet Button Web Part for Kentico CMS

Twitter provide some handy-code which create a Tweet button on any page, which currently looks like this:



Appetere have taken Twitter's code and wrapped it inside a configurable WebPart to make it useable within Kentico CMS.

What Does the WebPart Do?

When you click on the Tweet Button it will create a Tweet with up to three elements in the Tweet:
  1. The text that you want to Tweet.  This is fully configurable to use any (or no) data from the current page.  So you might choose to Tweet the document's name, or have a dedicated field for the text to be Tweeted.
  2. The URL of the page that the Tweet button is on.  In fact, this is shortened using Twitter's URL shortening service to give a URL starting with 'http://t.co'.
  3. An optional 'via' screen name, which you can include so that people know the source of the Tweet's contents.
You can try the Tweet Button for yourself - there is one at the end of this post!

How Does It Work?

A Tweet request is created by starting with the URL "http://twitter.com/share" and adding parameters to the QueryString which represents the data to be Tweeted.

Most of these parameters are added in the code-behind of the WebPart, based on the properties set when the WebPart is added to a page.

The WebPart then renders a single link with the URL set in the code-behind:
<asp:HyperLink ID="tweetButton" runat="server" CssClass="twitter-share-button" />

The remaining configuration is carried out using JavaScript, which is hosted as a library by Twitter.  This looks for the "twitter-share-button" class, adds remaining default values to the URL and sets the Tweet image (note, if Twitter change the image, the image will change everywhere this WebPart is used).

When someone clicks the Tweet button, a new window will open and (after logging in to Twitter) the Tweet can be made.

Download Download

Download the Tweet ButtonV1_1.zip WebPart installation package for free.

The WebPart is unlicensed so you may modify or use it how you wish.  We only ask that you leave the original acknowledgement to Appetere Web Solutions in the comments of the code-behind file, when using it.

Installing the WebPart

The WebPart installation package is a standard Kentico export file, which is imported as follows:
  • Copy the downloaded file to /CMSSiteUtils/Import directory of your Kentico installation.
  • Go to CMS Site Manager => Sites => Import site or objects
  • Select the Tweet Button package and follow the wizard to complete the import.
    • Note that the export package was created with Kentico V4.1, so you will receive a warning about versions if you  are using a more recent version of kentico (see Version Information below).
The WebPart will be ready to use. 

(If you are running in medium trust hosting, it is not necessary to save virtual objects to disk).

Configuring the WebPart

The WebPart can be added to pages in CMS Desk in the normal way.  By default you will find the WebPart in a subdirectory called "Appetere".

The standard Visibility Properties let you control where the WebPart is shown.

The 'Twitter' properties are explained below:

Property
Notes
Tweet text field This property is used to specify where the Tweet text will come from. Any field belonging to the current document can be specified (eg "DocumentName").  In other words, any field from View_CMS_Tree-Joined or a document-type's coupled data, can be used.

For maximum control of the Tweet text, you can add a field to the Document Type, such as "TweetText" then specify this as the Tweet text field.
Via screen name Sets the Twitter screen name of the user to attribute the Tweet to.
Related screen name Sets the Twitter screen names of up to two recommended accounts (which are displayed after the tweet is posted). Separate two names with a comma ','.
Hide if Tweet empty Sets whether to hide the WebPart if the Tweet text is not set, or empty.  If there is no Tweet text specified and you decided to show the Tweet button anyway, the URL of the page would still be Tweeted.
Hide if not live site Sets whether to hide the WebPart if it is not the live site.

The default setting = true, to ensure the correct live URL is sent to Twitter.

May set to false during development, in order to make the WebPart visible while designing a layout.
Count box position Sets where the count of the number of Tweets will be displayed.  The default is to the right of the button.  It can also be shown above the button, or not shown at all.


The Tweet Button is rendered as a hyperlink.  If you want it shown as a block element, you can add <div></div> tags in the 'Content Before' and 'Content After' properties, in the normal way.

For further explanation of the Tweeting functionality it is worth reading the Twitter documentation.

Version Information

The WebPart was originally written & exported from a Kentico V4.1 installation.  It has been tested up to Kentico 5.5 and should be forwardly compatible to newer versions (the only assumption it makes is that the "StopProcessing" property will exist, which is a core property of CMSAbstractWebPart and therefore unlikely to change).

The Tweet Button JavaScript code comes live from the Twitter web site.  Twitter may choose to update this code in the future, but the changes are unlikely to break the WebPart since it would also affect thousands of other people using the same code.

Feedback

If you have any thoughts or suggestions about the WebPart, please leave a comment below.
Comments
yourwellness.net
Hi Steve.

Just to let you know that I have it working on the Article level on yourwellness.net and we are running 5.5R2 so it seems to be fine.

Michael.
20/04/2011 16:35:38
 
Steve Moss
Pleased you liked it. I've only used it so far up to Kentico v 5.5, but it should be forwardly compatible.
23/02/2011 19:56:30
 
Brian McKeiver
Very cool web part. Thanks for making it! Just curious did you test it with 5.5 R2 ? or just 5.5 ?
23/02/2011 17:52:26
 
Leave comment



 Security code