Embed latest tweet(s) or a specific tweet in any page, post or text widget and apply your custom styles.
The usage depends on what you want to display. Only a couple of ways of displaying tweets exists but the list of applications will be expanded in the future. Make sure you take a look at the "Snippet Options" and learn how to take control over what is displayed and how.
This is useful when you want to embed a tweet in your blog article or page. Just use this snippet:
Replace "tweet_id" with the ID of the Twitter status you want to display. That's it.
This will probably be the most common application of the plugin. If you want to display a list of your (or someone elses) latest tweets in your sidebar and/or pages/articles, use this snippet
Replace "twitter_user" with the username of the account whose tweets you want to display. You can limit the number of tweets that will be fetched and displayed by adding a "count" param. Take a look at the following example:
Note: Default number of tweets that will be fetched is 5 and the maximum you can set is 25. If you set more that the maximum you will get the default 5 tweets.
There are various options to help you customise what will be displayed by the plugin for a particular snippet. You can include a custom option by adding the option string after a comma sign.
Here's a list of all options with examples:
You can select the time format inline. Have in mind that if the format you set is not supported the time will be displayed in default format Here's an example:
You can easily remove the author from display by simply adding the option:
You can easily remove the avatar from display by simply adding the option:
You can easily remove the timestamp from display by simply adding the option:
By default tweets are displayed with their authors Twitter names. If "full_names" param is set they will be displayed with their full names:
Inline tweets are rendered with a recognizable HTML markup that you can use to display them in virtually every way possible using CSS. For starters, every tweet is wrapped in an element with class "inline_tweet". Then every displayed element has it's own class and rules.
Author's Twitter name or full name is displayed as a link to his/her Twitter page:
<a class="inline_tweets_author" href="http://twitter.com/author" target="_blank">@author</a>
You can style the link by referencing the "inline_tweets_author" class (e.g. different color for plugin author than other users mentions).
If displayed, the avatar is rendered as a link to author's Twitter page also, with the addition of an image element:
<a class="inline_tweets_avatar" href="http://twitter.com/author" target="_blank"> <img src="http://pbs.twimg.com/profile_images/author_image.jpeg"> </a>
You can style the link in terms of positioning and the image display by referencing the "inline_tweets_avatar" class.
Mentions are also displayed as link to author Twitter pages and you cal easily style them by referencing the "inline_tweets_mention" class:
<a class="inline_tweets_mention" href="http://twitter.com/mention" target="_blank">@mention</a
Hashtags are wrapped in span elements enabling you to apply your custom styles (e.g. display in bold or italic) by referencing the "inline_tweets_tag" class:
If you decide to display the timestamp, you can easily style it - in terms of positioning for starters - by referencing the "inline_tweets_timestamp" class. Here's how the timestamp is rendered:
<span class="inline_tweets_timestamp">Jan 2014</span>
Here's an example of how a single tweet is displayed:
<div class="inline_tweet"> <a class="inline_tweets_author" href="http://twitter.com/ArchdukeM" target="_blank">@ArchdukeM</a> <a class="inline_tweets_avatar" href="http://twitter.com/ArchdukeM" target="_blank"> <img src="http://pbs.twimg.com/profile_images/image.jpeg"> </a> "She represented everything I loved about the English. She was totally deranged." <span class="inline_tweets_timestamp">Jan 2014</span> </div>
When more that one tweet is displayed it is rendered as a list. To cut it short, here's an example markup:
<ul class="inline_tweets_ul"> <li class="inline_tweet"> CONTENT </li> </ul>
Let's analyse the differences and the advantages. You have a ul element with a class "inline_tweets_ul" that you can use if you want to position the entire list, enable scrolling or whatever you want. Instead of a div element, there's a li element with the "inline_tweet" class for wrapping the tweet. Tweet content is rendered in the same way as single tweets.