I've been working on a jQuery plugin for pulling tweets since the v1 endpoints were all closed off and you need oAuth now. This is just the jQuery part but if you want to see the php behind it I'll be happy to post. But basically, I'd love suggestions, as this is one of the first real plugins i've made, i'm really looking for critique on patterns and efficiency. Is there anything I'm doing that can be shorten'd significantly? Is there a feature you think would be cool for me to include?
And just FYI, there is an oAuth/twitter library that authenticates everything first and pulls, and the php file my ajax call references holds the logic for all that and creating / serving the json, but it's not that exciting.
I'm going to post the plugin with the documentation comments I have in there, to see if it all makes sense to people who have never seen it. All opinions and comments welcome, I want to write better code!
/*************************************
Invisible Tweets
Author : Shan Robertson
Website: http://invisibled.com
Version: 1.0
Updated: August 7th, 2013
Description:
This plugin allows you to simply display Twitter timelines & lists on your website.
It caches the twitter content in a json file & changing the cache name will
allow you to have as many instances of Invisible Tweets as you want.
Dependancies:
- jQuery
- invisibletweets.php (included)
- OAuth.php (included)
- twitteroauth.php (included)
- invisibletweets/cache folder (must be writable)
Options:
user : [string] - The desired Twitter username.
slug : [string] - The slug to your Twitter list.
cache : [string] - The cache name, if dealing with multiple feeds.
path_to_core : [string] - Path to the invisibletweets folder.
expire : [string] - Cache expire time, uses default PHP time syntax eg. 15 minutes, 10 seconds.
Warning: If expire time is shorter than 15 minutes, you may hit the rate limit.
type : [string] - Choose what feed to display. Displaying a 'list' requires the 'slug' option to be set to your list's slug.
Options: 'timeline' or 'list'
template : [string] - Comma delimited string of what elements to show and in what order.
Options: 'name, avatar, date, time, text, btn_tweet, btn_retweet, btn_favorite'
limit : [integer] - Number of tweets to return.
retweets : [boolean] - Show retweets.
Options: true/false
clear : [boolean] - Clears the cache.
Options: true/false
TO DO
- wordpress plugin version
*************************************/
;(function ( $, window, document, undefined ) {
/*************************************
Plugin Functions
*************************************/
/*************************************/
Plugin.prototype.init = function () {
var params = [ '?user=' + this.options.user,
'&limit=' + this.options.limit,
'&type=' + this.options.type,
'&slug=' + this.options.slug,
'&cache=' + this.options.cache,
'&expire=' + this.options.expire,
'&clear=' + this.options.clear,
'&retweets=' + this.options.retweets
].join('\n');
$.ajax({
url: this.options.path_to_core + 'invisibletweets.php' + params,
context: this,
dataType: 'json',
success: function(data){
// If the errors object is returned, show the error and exit the script
if(data.errors){
$(this.element).html("Fatal Error: " + data.errors[0].message);
return false;
}
// Variables
var scope = this;
var parent = this.element;
var tpl = "";
var tplArray = scope.options.template.replace(/[\s,]+/g, ',').split(',');
// Creates an empty template with all present data, in order.
$.each(tplArray, function(i, elm){
if(elm == 'name'){
tpl = tpl + '<div class="it_name"><a href="" target="_blank"></a></div>';
} else if(elm == 'avatar'){
tpl = tpl + '<div class="it_avatar"><a href="" target="_blank"><img src="" /></a></div>';
} else if(elm == 'date'){
tpl = tpl + '<div class="it_date"></div>';
} else if(elm == 'time'){
tpl = tpl + '<div class="it_time"></div>';
} else if(elm == 'text'){
tpl = tpl + '<div class="it_text"><p></p></div>';
} else if(elm == 'btn_tweet'){
tpl = tpl + '<a href="http://twitter.com/intent/tweet?in_reply_to=" target="_blank" class="it_btn_tweet">Tweet</a>';
} else if(elm == 'btn_retweet'){
tpl = tpl + '<a href="http://twitter.com/intent/retweet?tweet_id=" target="_blank" class="it_btn_retweet">Retweet</a>';
} else if(elm == 'btn_favorite'){
tpl = tpl + '<a href="http://twitter.com/intent/favorite?tweet_id=" target="_blank" class="it_btn_favorite">Favorite</a>';
}
});
//Populates the template with data
$.each(data, function(i, item){
// Variables
var text = scope.findLinks(item.text);
var date = scope.dateTime(item.created_at, 'date');
var time = scope.dateTime(item.created_at, 'time');
var profile_url = 'http://twitter.com/' + item.user.screen_name;
var thisTweet = ".it_tweet:eq("+i+") ";
// Creates a searchable object of the template
$(parent).append('<div class="it_tweet">' + tpl + '</div>');
//If in array, show, else don't show, for each item.
if(tplArray.indexOf('name') != -1){
$(thisTweet + ".it_name a").attr("href", profile_url).html(item.user.name);
}
if(tplArray.indexOf('avatar') != -1){
$(thisTweet + ".it_avatar").find('a').attr("href", profile_url).find('img').attr("src", item.user.profile_image_url);
}
if(tplArray.indexOf('date') != -1){
$(thisTweet + ".it_date").html(date);
}
if(tplArray.indexOf('time') != -1){
$(thisTweet + ".it_time").html(time);
}
if(tplArray.indexOf('text') != -1){
$(thisTweet + ".it_text p").html(text);
}
if(tplArray.indexOf('btn_tweet') != -1){
$(thisTweet + ".it_btn_tweet").attr("href", 'http://twitter.com/intent/tweet?in_reply_to=' + item.id);
}
if(tplArray.indexOf('btn_retweet') != -1){
$(thisTweet + ".it_btn_retweet").attr("href", 'http://twitter.com/intent/retweet?tweet_id=' + item.id);
}
if(tplArray.indexOf('btn_favorite') != -1){
$(thisTweet + ".it_btn_favorite").attr("href", 'http://twitter.com/intent/favorite?tweet_id=' + item.id);
}
}); //each
} //success
}); //ajax
}; //init
/*************************************/
Plugin.prototype.findLinks = function(tweet){
var text = tweet;
text = text.replace(/http:\/\/\S+/g, '<a href="$&" target="_blank">$&</a>');
text = text.replace(/\s(@)(\w+)/g, ' @<a href="http://twitter.com/$2" target="_blank">$2</a>');
text = text.replace(/\s(#)(\w+)/g, ' #<a href="http://twitter.com/search?q=%23$2" target="_blank">$2</a>');
return text;
}; //findLinks
/*************************************/
Plugin.prototype.dateTime = function(created_at, select){
var dateTime = created_at;
var strtime = dateTime.replace(/(\+\S+) (.*)/, '$2 $1')
var date = new Date(Date.parse(strtime)).toLocaleDateString();
var time = new Date(Date.parse(strtime)).toLocaleTimeString();
if(select == 'date'){
return date;
} else if(select == 'time'){
return time;
}
}; //dateTime
/*************************************
Plugin Setup
*************************************/
var pluginName = 'invisibleTweets',
// Options for the plugin
defaults = {
user : 'RobGronkowski', // Twitter username
limit : 10, // Number of tweets
type : 'timeline', // Feed select, can be timeline/list
slug : '', // For lists
cache : 'default', // The cache name if dealing with multiple feeds
expire : '15 minutes', // The time it takes the cache to expire
clear : false, // Clears the cache.
retweets : true, // Show retweets
path_to_core: 'js/vendor/invisibletweets/', // Path to the invisibletweets folder.
template : 'name, avatar, date, time, text, btn_tweet, btn_retweet, btn_favorite' // Elements to show and in what order
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
// A really lightweight plugin wrapper around the constructor, preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );
if elsecould be answitch case: stackoverflow.com/questions/2922948/… \$\endgroup\$