/* * 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>