現在のTwitter連携ステータスに応じて、連携中ならログイン中のユーザー情報+【ログアウト】ボタン、未連携なら【コネクト】ボタンのみを表示します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Twitter @Anywhere:User login & signup | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <style type="text/css"> #signin { float:left; } #signout { display:inline-block; float:left; margin:0 0 0 5px; padding:2px 10px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; text-decoration:none; font-size:11px; color:#fff; background: -moz-linear-gradient(top, #559dcb, #156598); background: -webkit-gradient(linear, left top, left bottom, from(#559dcb), to(#156598)); border:1px solid #094b60; text-shadow: -1px 0 2px #333; display:none; } #signout span { font-weight:bold; } #signin { line-height:2em; } #loginbox { display:inline-block; float:left; margin:0 0 0 5px; padding:10px 10px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; text-decoration:none; font-size:11px; color:#666; border:1px solid #ccc; text-shadow: -1px 0 2px #fff; } #loginbox img { vertical-align:middle; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <p>現在のTwitter連携ステータスに応じて、連携中ならログイン中のユーザー情報+【ログアウト】ボタン、未連携なら【コネクト】ボタンのみを表示します。</p> <div id="loginbox"> <div id="signin"></div> <a id='signout' href="#">Sign out of <span>twitter</span></a> </div> <br clear="all" /> <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&v=1"></script> <script type="text/javascript"> $(function(){ twttr.anywhere(function (T) { var currentUser, screenName, profileImage, profileImageTag; /* ページロード時に、Twitter連携中なら、ログアウトボタン非表示 */ if(!T.isConnected()){ /* コネクトボタン表示 */ T("#signin").connectButton(); }else{ $("#signout").show(); showUserInfo(); } /* イベント登録 */ T.bind("authComplete", function (e, user) { /* 連携に成功した時に、ログアウトボタン表示 */ $("#signout").show(); showUserInfo(); }); T.bind("signOut", function (e) { /* ログアウトした時に、ログアウトボタン非表示 */ $("#signout").hide(); $("#signin").html("").show(); T("#signin").connectButton(); }); /* ログアウトボタンのクリックイベント */ $("#signout").bind("click",function(){ /* ログアウトする */ twttr.anywhere.signOut(); return false; }); function showUserInfo(){ currentUser = T.currentUser; screenName = currentUser.data('screen_name'); profileImage = currentUser.data('profile_image_url'); profileImageTag = "<img src='" + profileImage + "' width='16' height='16' />"; $('#signin').html("Logged in as " +profileImageTag + " " + screenName); } }); }); </script> </body> </html>