現在のTwitter連携ステータスに応じて、連携中なら【コネクト】+【ログアウト】ボタン、 未連携なら【コネクト】ボタンのみを表示します。
Sign out of 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; } #signout span { font-weight:bold; } </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="signin"></div> <a id='signout' href="#">Sign out of <span>twitter</span></a> <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) { /* ページロード時に、Twitter連携中なら、ログアウトボタン非表示 */ if(!T.isConnected()) $("#signout").hide(); /* コネクトボタン表示 */ T("#signin").connectButton(); /* イベント登録 */ T.bind("authComplete", function (e, user) { /* 連携に成功した時に、ログアウトボタン表示 */ $("#signout").show(); }); T.bind("signOut", function (e) { /* ログアウトした時に、ログアウトボタン非表示 */ $("#signout").hide(); }); /* ログアウトボタンのクリックイベント */ $("#signout").bind("click",function(){ /* ログアウトする */ twttr.anywhere.signOut(); return false; }); }); }); </script> </body> </html>