The newest Custom Element that we have added is the Twitter Feed.  This element displays the most recent updates of a Twitter account.  An example of this can be seen here: http://www.ecu.edu/cs-training/hallwa/Twitter-Feed.cfm.

To use the element, pick Insert New Element on any CommonSpot page.  Pick Twitter Feed listed under Custom Elements.  When the page reloads, click on the “Click here to define the custom element data” link.  The element has only two options:  Twitter User Name and Tweets to Import.  Just put any publicly accessible Twitter username in the first and how many tweets you want to display in the second. This element will not work if the account is protected (i.e. requires logging into Twitter to view).  Click Finish.

The element automatically converts:

• any URLs within a tweet into hyperlinks
• any replies or retweets into links to the other user’s Twitter page
• any hashtags to a link to the Twitter search page for that tag

By default, the element uses the default CommonSpot styles, but we have applied several empty CSS classes so that you can create your own stylesheet to change its appearance.

• The entire element is within a div tag with class “tweetContainer”
• The Twitter image and “Latest tweets from …” are within a div with class “twitterLinkDiv”
• The Twitter image and “Latest tweets from …” are a hyperlink to the Twitter username’s twitter page.  The link has class “twitterLink”
• The Twitter img tag has class “twitterImage”
• The “Latest tweets from…” is within a span with class “twitterHeading”
• The list of tweets are within a div tag, class “tweets”
• Each tweet is within a p tag with class “tweet”
• Each tweet displays the date/time that the tweet was sent, linked to the Twitter page for that tweet.  The link has class “tweetLink”
• Hyperlinks within each tweet have class “internalTweetLink
• Replies within each tweet have a class “atTweeter”
• Hashtags with each tweet have a class “twitterHashTag”

As always, please share any questions or comments.  Also be sure to check out many more CommonSpot tutorials at the ITCS Learning Center (requires login) and the ITCS CommonSpot page.