Customizing the Twitter Feed Module in Cascade 7 Beta
Friday, December 16th, 2011 at 3:30pm -- Adam Griffis
One of the new features of Cascade Server 7.0 is the Twitter module. With it, end users can easily create a dynamic block of tweets that will update automatically. These tweets can be from a specified account or tweets returned for a specified search term. Please see the knowledge base for full details on how to create a Twitter Feed Block.
The Twitter Feed Block is the first example of a new type of Block in Cascade: modules. Modules provide dynamic content that might normally require significant time and techical knowledge to put together, quickly and without programming experience. Twitter Feed Blocks allow a content author with no technical experience to set up a feed of tweets from a managed Twitter account. Also, since they are quick and easy to create and modify; a marketer could make a feed about a trending topic or a conference hash-tag in time for the content to be relevant.
Twitter Feed Blocks differ from other blocks in that the content that is displayed to users is not available at the time of publishing the page. This means that using traditional formats on these blocks won’t really work. Traditional formats use Velocity or XSLT to transform the XML or XHTML in blocks into the published HTML. However, with the Twitter feed block the actual content rendered during publish is JavaScript, meaning that while formats can be applied to the blocks, they would have to make changes to the JavaScript with string replacement. However, this should be unnecessary as every element of the HTML created by the Twitter feed block has a distinct class, meaning that Cascading Style Sheet (CSS) formatting can customize the look and feel extensively.
A diagram outlining the different HTML classes for the Twitter Feed Block
A short guide on styling the Twitter Feed Blocks is available on the knowledge base. It outlines how the default style transforms the undecorated Twitter feed block into something that resembles a typical Twitter feed that one might see on many websites.
The transformation of the unstylized Twitter Feed HTML with the default CSS
While this transformation is impressive in the extent to which it changes the look of the feed block, it is relatively sparse and doesn’t change the actual content of the block. But since every distinct element of the Twitter feed block has its own class, you can actually customize the content that is displayed to the user. For example, by adding the style “display:none” to the classes “twitter_avatar” and “twitter_author” we can hide the author of tweets. This could be used if all tweets were coming from a single managed account and you wanted to have a header with the account name / info instead of repeating it along with each tweet.
Another example might be if you wanted each tweet to be displayed in a visually distinct element. We can give each tweet a rounded border and background by applying a style to the “twitter_item” class, along with padding to separate the tweets from each other. We got rid of the list’s bullets by applying “list-style:none” to “li” children of the twitter_stream class and kept the Twitter avatars hidden to keep the avatar’s backgrounds from clashing. Download the full CSS file for curved borders here.
One more customization option is a horizontal Twitter feed along the bottom of a page. This could be fixed to 4 or 5 items, or it could be put into an iframe, so it could be scrolled by the user at will. The CSS for this is slightly more complicated, so I’ll leave out the explanation, but the CSS file for a horizontal twitter feed is available here and you can also check out the guide to setting up horizontal unordered lists here.
So while the configurability of formats is sacrificed with Twitter Feed Blocks, this is compensated for with an ease of creation of content which might normally take more time and technical knowledge. Moreover, the structure of the HTML generated by the Twitter Feed Block allows engineers to create CSS to customize the look and feel of the Twitter Feed Block dramatically.
You Might Also Enjoy
- Hannon Hill Releases Cascade Server 7.0 for Beta Testing
- User Administration Tips and Best Practices
- Get Grouped
Category
- Product Upgrades
- Resources