jQueryでフォロアー一覧表示とアイコン選択!

りまいんたーで、フォロアーアイコン選択で、テキストボックスにscrean_name挿入したかったので、作ってみました。


これ使いました!!!!!

http://tympanus.net/codrops/2009/12/02/twitter-api-and-jquery-showcase-display-your-followers-or-friends/


cakephpのadd画面で使用したかったので、ファイルの構造が、ややこしかった><。


◆やること

・webroot/jsにjsファイルを全部突っ込む
・webroot/csscssファイルを突っ込む
・webrootにphpファイルを突っ込む
・webroot/imgにimageファイルをつっこむ

以上でとりあえず、下準備は完了です。



◆以下変更点




→style.css


・imageファイルのpathが変わってるので、変更してください(4つぐらいあります)




jquery.TwitterConnections.js


・11行目
 clickreadyに変更(onloadのjQuery版)

・22行目
 urlを絶対パスで記入。
 例)http://hogehoge/callTwitter.php?screen_name='+user+'&type='+o.type



→使いたいビューに記述


※jsファイルのパスは任意で変更してください!


<?php $this->addScript('<SCRIPT src="/cakephp2/js/twitter.js"></SCRIPT>'?>
<?php $this
->addScript('<SCRIPT src="/cakephp2/js/jquery-1.3.2.js"></SCRIPT>'?>


<div class="column">
    <
class="hidden" id="followers"></a>    <div class="jf-container">
        <
h5><span id="title" class="username"></span
            <
span id="refresh" class="refresh" title="refresh"></span></h5>
            <
div id="jf-grid" class="jf-grid"></div>
            <
div class="jf-nav">
                <
a id="rightbtn" class="right" style="display:none;"></a>
                <
a id="leftbtn" class="left" style="display:none;"></a>
        </
div>
    </
div>
</div>



<script src="<span style="color:#FF0000;">/cakephp2/js/jquery-1.3.2.js</span>" type="text/javascript"></script>
    
<script src="<span style="color:#FF0000;">/cakephp2/js/jquery.TwitterConnections.js</span>" type="text/javascript"></script>
    
<script src="<span style="color:#FF0000;">/cakephp2/js/jquery.qtip-1.0.0-rc3.min.js</span>" type="text/javascript"></script>
    
<script>
        $(
"#followers").TwitterConnections({
            
screen_name'<span style="color:#FF0000;">検索したいユーザの名前'</span>,     
            
type'Friends'
        
});
    
</script>