Skip to content

Latest commit

 

History

History
116 lines (65 loc) · 3.15 KB

README.md

File metadata and controls

116 lines (65 loc) · 3.15 KB

jqSimpleTweets v1.0

Simple jQuery Twitter Plugin

jqSimpleTweets, is a simple jQuery Twitter Plugin that displays a single user's timeline and is compatible with Twitter API 1.1

Demo

http://devfront.net/demo/jqSimpleTweets/

Required: Twitter API consumer key and access token

Before anything else, make sure you already have your API consumer key and access token.

Don't have one? Go get one - https://dev.twitter.com/apps

Usage

In jqSimpleTweets/config.php, update replacethis with your own information:

define('CONSUMER_KEY'   , 'replacethis');
define('CONSUMER_SECRET', 'replacethis');
define('ACCESS_TOKEN'   , 'replacethis');
define('ACCESS_SECRET'  , 'replacethis');

Be sure to include jQuery

 <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

Next, the jqSimpleTweets plugin

 <script  src=" jqSimpleTweets/jqSimpleTweets.min.js"></script>

then the CSS file

<link rel="stylesheet" href=" jqSimpleTweets/jqSimpleTweets.css">

And the code

$("#divname").jqSimpleTweets({ username: "yourtwitterusername"  })

HTML Code

 <div id="divname"></div>

Options

keyword Type Default Description
username String none Twitter Username
tweetcount Integer 5 Number of tweets to be displayed
includeretweets Boolean true Include retweets (RT)?
excludereplies Boolean false Include replies?
displaytweetavatar Boolean false Display avatar in every tweet?
displayheaderavatar Boolean true Display avatar on top?
loadingtext String Loading Tweets… Loading text can include html code
loadtweetfile String scripts/tweet.php Where tweet.php is located
maxlimit Integer 20 Max number of tweets retrieved

HTML Structure

This is the HTML code generated by the plugin

	<div class=""tweet_container">
	
	     <div class="tweet_header">
	         <img alt="" src="" class="tweet_avatar" >
	         <p>
	            Name 
               <span>@username</span>
            </p>	
	     </div>
	   
	     <ul class="tweet_feed">
	         <li>
	            <p class="tweet_text"></p>
	            <a class="tweet_date" href=""></a>
	            <div class="tweet_actions">
	                <a class="tweet_reply" href="">Reply</a>
	                <a class="tweet_favorite" href="">Favorite</a>
	                <a class="tweet_retweet" href="">Retweet</a>
	            </div>
	        </li>
	     </ul>
	   
  </div>

Notes

  1. jqSimpleTweets uses OAuth lib by Abraham Williams
  2. Images are from Twitter's Image Resources
  3. Speech bubble CSS taken from Pure CSS Speech Bubbles