and like us on FB

If you’re looking to include a Twitter stream into your website, there’s no easier way of doing so via the Twitter widgets available on the Twitter website . While the Twitter widgets are rather generic in nature, there are some CSS options to add subtle styling. However, if you choose to completely customize the output of your feed the Twitter API ensures that you’re able to render your data in a manner completely to your liking.

This post will show you how to include a custom Twitter stream in WordPress with shortcode. It’s very generic in nature and only intended as a guide. The inline JavaScript and CSS is less than ideal, and those snippets should be transplanted into an appropriate custom file if choosing to use the code. Further articles will follow that’ll show you how to style containers to emulate Twitter’s own feed.

The Result

The basic rendering returned with the shortcode of [twitterstream count="4"] is displayed below. We’ve included a crude media dropdown blind and a basic interaction panel.

In reality you might add a nice jQuery blind for the media, use a lightbox to highlight video/image media, and style the tweets more convincingly. Consider this version as a blank canvas. If we were to use this code we’d likely include image thumbnails attached to each post (no blind).

We’ve defaulted the result to return your user_timeline but you could modify the function to return your home_timeline, mentions_timeline, or a (7-day) search of tweets.

Considerations

  • Compliance with Twitter Display Requirements is required.
  • Our feed caches results with Simple Cache. Required.
  • Font Awesome is required to show the feed icons. If your theme doesn’t support FA by default, use the code here. Alternatively, you can use images from Twitter’s Display Requirements page.

Download

Clients should log in to download the shortcode. Mailing list recipients would have received a link with a few stylistic variations on the theme.

Shortt URL for this post: http://shor.tt/F5a