/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
*
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($) {
$.fn.followbox = function(options) {
var element=$(this);
//change this file path if the tiny twitter logo is not showing
var twitter_logo_path='https://twitter.com/phoenix/favicon.ico';
var settings = $.extend( {
'user' : 'jobysblog',
'width' : 292,
'height' : 252,
'theme' : 'light',
'border_color' : '#AAA',
'bg_color' : '#fff',
'bg_image' : '',
'title_color' : '#3B5998',
'total_count_color' : '#333',
'follower_name_color' : '#BBB'
}, options);
//twitter user lookup
$.ajax({
url: 'https://api.twitter.com/1/users/lookup.json?screen_name='+settings.user+'&include_entities=true',
dataType: 'jsonp',
success: function(data) {
var widget_width=settings.width-2;
var widget_height=settings.height-2;
var grid_container_height=settings.height-115;
var number_images_row=parseInt(settings.width / 55);
var number_images_col=parseInt(grid_container_height / 69)+1;
var total_followers=number_images_row*number_images_col;
element.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+widget_width+'px; height: '+widget_height+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+settings.user+'" target="_blank"><img class="profileimage img" src="'+data[0].profile_image_url_https+'" alt="'+data[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+settings.user+'" target="_blank"><span class="name titlecase">'+data[0].name.toLowerCase()+'</span> @'+data[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+settings.user+'&show_count=false&show_screen_name=false" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+data[0].followers_count+'</span>人からフォロー <b class="titlecase">'+data[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+grid_container_height+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+twitter_logo_path+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitterソーシャルプラグイン</a></div></div></div></div></div></div></div></div>');
//applying dark style if theme is 'dark'
if(settings.theme=='dark'){
element.find('.follow_box_main').addClass('dark');
}
element.find('.follow_box_follower_count').text(element.find('.follow_box_follower_count').text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
if($.browser.msie && !$.support.boxModel)
$('.follow_box .connections').css('padding-bottom','14px');
if(settings.theme=='custom')
{
element.find('.follow_box_main').css({
'border-color':settings.border_color,
'background-color':settings.bg_color,
'background-image': 'url("'+settings.bg_image+'")'
});
element.find('.follow_box a').css({
'color':settings.title_color
});
element.find('.follow_box .total').css({
'color':settings.total_count_color
});
}
$.ajax({
url: 'https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name='+settings.user,
dataType: 'jsonp',
success: function(followers) {
var idlist_string=getfollowers(total_followers,followers.ids);
$.ajax({
url: 'https://api.twitter.com/1/users/lookup.json?user_id='+idlist_string+'&include_entities=true',
dataType: 'jsonp',
success: function(follower_details) {
for(var i=0;i<follower_details.length;i++)
{
var fullname=$.trim(follower_details[i].name);
var namearray=fullname.split(' ');
var grid_item_html='<div class="grid_item"><a href="http://twitter.com/'+follower_details[i].screen_name+'" target="_blank"><img class="img" src="'+follower_details[i].profile_image_url+'" alt=""><div class="name titlecase">'+namearray[0].toLowerCase()+'</div></a></div>';
element.find('.connections_grid').append(grid_item_html);
}
if(settings.theme=='custom')
{
element.find('.connections .connections_grid .grid_item .name').css({
'color':settings.follower_name_color
});
}
}
});
}
});
}
});
function getfollowers(number,followers){
if(number>100)
number=100;
var idlist=new Array();
for(var i=0;i<number;i++)
{
idlist.push(followers[i]);
}
var idlist_string=idlist.join();
return idlist_string;
}
};
})(jQuery);
$('#foo').followbox({
'user' : 'kachibito'
});
$('#bar').followbox({
'user' : 'kachibito',
'width' : 565,
'height' : 377,
'theme' : 'dark',
'bg_color' : '#999'
});
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.follow_box .titlecase{text-transform:capitalize;}
.dark{background: #333;}
.dark a,.dark .total, .dark .connections .connections_grid .grid_item .name, .dark .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.dark .connections{border-bottom: 1px solid #444;}
div#foo,div#bar{margin:25px;}
<div id="foo"></div>
<div id="bar"></div>