Search

Twitter関連Twitter連携ソリューション @Anywhere

  1. Twitter @Anywhereとは
  2. @Anywhereの導入フロー
  3. linkifyUsers〔@username自動リンク化〕
  4. Hovercards〔@usernameにマウスオーバーでユーザー情報とフォローボタンを吹出表示〕
  5. Follow buttons〔指定したユーザーのフォローボタン設置〕
  6. User login & signup〔コネクトボタン設置〕
  7. Tweet Box〔Twitterへの投稿フォームを設置〕
  8. Tweet Box + bit.ly〔Twitterへの投稿フォームにbit.lyの短縮URLを挿入〕

Twitter @Anywhereとは

2011/6/1

Twitterで提供されている「@Anywhere」は、サイトやブログに、下記のようなTwitter連携機能をWebサイトに簡単に導入することができるTwitter連携フレームワークです。 発行された専用コードをWebサイトに設置するだけで組み込めてしまいます。 パラメータで、多少のカスタマイズも可能です。

ここでは下記の設置方法について解説していきたいと思います。
※@Anywhereの開発ドキュメントはこちら。

特徴設置イメージ
◆linkifyUsers（@username自動リンク化）
ページ内に含まれる@username部分をTwitterのユーザーページへのリンクに変換して表示します。
◆Hovercards（ユーザー情報＋フォローボタンを吹き出し表示）
ページ内に含まれる@username部分にマウスオーバーするとそのユーザー情報と【フォローする】ボタンを吹き出し表示します。 「もっと読む...」リンクを表示してコンパクト表示するか、展開表示するかをカスタマイズできます。
◆Follow buttons（フォローボタン設置）
指定したユーザーのフォローボタンをWebサイト上に設置します。
◆Twee Box（投稿フォーム設置）
Twitterへの投稿フォームを表示します。 ラベル、テキストエリアのサイズ、文字数カウント表示の有無、リスナーの設定などのカスタマイズが可能です。
◆User login & signup（コネクトボタン設置）
コネクトボタンをWebサイト上に設置します。 button要素やa要素をコネクトボタンとして使用すことも可能です。

@Anywhereを導入するには、@Anywhereアプリの登録が必要です。 まずは、Twitterアカウントで開発者サイトにログインしてアプリ登録を行いましょう。 　⇒　@Anywhereの導入フロー

@Anywhereの導入フロー

2011/6/1

@Anywhereのアプリ登録を行い、専用コードを発行するまでの流れを説明します。

  1. Twitterアカウントで、Twitter開発者サイトにログインします。

  2. Register an @Anywhere Applicationにアクセスし、@Anywhereアプリケーションを登録します。

    ※ここで指定するアプリ名、アプリの公開URL、アプリアイコンは、アプリの許可画面表示されます。

    項目説明
    Application Nameアプリ名。
    Descriptionアプリの説明文
    Application Websiteアプリの公開URLや、アプリのダウンロードページ。
    Organization組織名。作者名。
    Application Typeデスクトップアプリなら「Client」、Webアプリなら「Browser」を選択。
    Callback URLブラウザ上で認証後、アプリに戻るためのコールバックURL。プログラムからTwitterにトークンを投げる際、上書きできるので適当でもよいです。
    Default Access typeアプリが要求するアクセス権限を指定。
    @Anywhereの場合は、真ん中の「Read & Write」を選択します。
    Application Iconアプリアイコンを指定します。アップロード可能な画像形式はGIF/JPEG/PNG。アップロード可能なファイルサイズは700KBまで。

  3. 上記の必要事項を入力後、【Register application】ボタンをクリックすると、規約が表示されますので、【I Accept】ボタンをクリックします。

  4. アプリの登録が完了すると、専用のコードが発行されます。

この専用コードを使用することで、Webサイト上で下記のTwitter連携を行うことができます。 各説明は以下のリンクからどうぞ。

@Anywhereアプリの解除は、Twitter公式サイトにログインし、【設定】⇒【アプリ連携】より解除できます。

linkifyUsers
@username自動リンク化

2011/6/1

linkifyUsersは、ページ内に含まれる「@{スクリーンネーム}」部分を、各ユーザーのTwitterページへのリンク（http://twitter.com/{スクリーンネーム}）に変換して表示することができます。

基本的な記述例

Webページ内に下記を記述します。
※*********部分はアプリ作成時に発行された専用コードのIDになります。

<script src='http://platform.twitter.com/anywhere.js?id=*********&v=1'></script>
<script type='text/javascript'>
twttr.anywhere(function(T) {
  T.linkifyUsers();
});
</script>

「@cocoism hello!」、「@cocoismあいうえお」などはきちんと「cocoism」部分だけがリンク化されるようになっていますが、「武蔵小杉@cafe」みたいなものも変換されてしまいますので、対象となる要素を指定しておくとよいでしう。 例えば、resというID名のdiv要素内のテキストだけを変換したい場合は下記のように記述します。 

<script src='http://platform.twitter.com/anywhere.js?id=*********&v=1'></script>
<script type='text/javascript'>
twttr.anywhere(function(T) {
  T('#res').linkifyUsers();
});
</script>

対象となる要素を指定しない場合

設置サンプルサンプルを見る
<!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：linkifyUsers | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
         twttr.anywhere(function(T) {
            T.linkifyUsers();
         });
      </script>
    </head>
    <body>
        <p>
            @cocoism aiueo @cocoismあいうえお</p>
        </p>
        <p>
            ちなみに、「武蔵小杉@cafe」みたいなのも変換されますので、対象となるコンテンツを特定しておくとよいでしょう。
        </p>
    </body>
</html>

対象となる要素を指定した場合

設置サンプルサンプルを見る
<!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：linkifyUsers | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
         twttr.anywhere(function(T) {
            T("#res").linkifyUsers();
         });
      </script>
    </head>
    <body>
        <p id="res">
            @cocoism aiueo @cocoismあいうえお</p>
        </p>
        <p>
            ちなみに、「武蔵小杉@cafe」みたいなのも変換されますので、対象となるコンテンツを特定しておくとよいでしょう。
        </p>
    </body>
</html>

設置サンプル

下記の例では、Twitter検索結果の表示に@Anywhereを適用し、「@{スクリーンネーム}」部分を自動リンク化しています。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Twitter @Anywhere：linkifyUsers | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
        <!-- @Anywhere -->
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <!-- @Anywhere // -->
        <script type="text/javascript">
            (function($){
                var pcnt=1;
                $.fn.twSearch=function(options){
                    var settings=$.extend({
                        url:"http://search.twitter.com/search.json",
                        type:"mixed",
                        page:"1",
                        holderID:"res",
                        readmore:false
                    },options);
                    this.click(function(){
                        //クエリ
                        var _query=$("#myquery").val();
                        //API
                        if(settings.readmore){
                            var _url=settings.url+"?q="+encodeURIComponent(_query)+"&type="+settings.type+"&page="+pcnt+"&callback={callback}";
                            pcnt++;
                        }else{
                            var _url=settings.url+"?q="+encodeURIComponent(_query)+"&type="+settings.type+"&page="+settings.page+"&callback={callback}";
                        }
                        //alert(_url);
                        $.getJSONP(_url, function(json){
                            $("#loading").show();
                            if(json.results==""){
                                  $("#btn_more").hide();
                                  $("#"+settings.holderID).append("<p id='caution'>※もうデータがありません</p>");
                                  return false;
                            }
                            var s="";
                            $("#"+settings.holderID+" > h2").html("Results for "+_query);
                            $.each(json.results, function(i, item){
                                s+="<li>";
                                s+="<a href='http://twitter.com/"+item.from_user+"'><img src='"+item.profile_image_url+"' /></a> ";
                                s+="<a href='http://twitter.com/"+item.from_user+"'>"+item.from_user+"</a>: "+formatStr(item.text)+"";
                                s+="<div>";
                                s+="<span><a href='http://twitter.com/"+item.from_user+"/status/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></span>";
                                s+="<span class='hoge'>"+formatSource(item.source)+"から</span>";
                                s+="</div>";
                                s+="</li>";
                            });
                            if(settings.readmore){
                                // もっと読む
                                $("#"+settings.holderID+" > ul").append(s);
                            }else{
                                // 検索
                                $("#"+settings.holderID+" > ul").html(s);
                                $("#btn_more").show();
                                pcnt=settings.page;
                                pcnt++;
                            }
                            $("#searchurl").html("検索URL:"+_url).show();
                            $("#loading").hide();
                            // <!-- @Anywhere -->
                            twttr.anywhere(function(T) {
                                T.linkifyUsers();
                                //T("#res").linkifyUsers();
                            });
                            // <!-- @Anywhere // -->
                            return false;
                        });
                    });
                    var formatStr=function(str){
                        str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.-]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
                        //str = str.replace(/@(\w+)/gm,'@<a href="http://twitter.com/$1" target="_blank">$1</a>');
                        str = str.replace((\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
                        return str;
                    }
                    var formatSource=function(str){
                        str = str.replace(/&gt;/gm,">");
                        str = str.replace(/&lt;/gm,"<");
                        return str;
                    }
                    var relativeTime=function(pastTime){
                        var origStamp = Date.parse(pastTime);
                        var curDate = new Date();
                        var currentStamp = curDate.getTime();
                        var difference = parseInt((currentStamp - origStamp)/1000);
                        if(difference < 5)                return "いまさっき";
                        if(difference <= 20)            return "数秒前";
                        if(difference <= 60)            return "1分以内";
                        if(difference < 3600)            return parseInt(difference/60)+" 分前";
                        if(difference <= 1.5*3600)         return "1時間前";
                        if(difference < 23.5*3600)        return Math.round(difference/3600)+" 時間前";
                        if(difference < 1.5*24*3600)    return "1日前";
                        var dateArr = pastTime.split(' ');
                        return (parseInt(difference / 86400)).toString() + '日前';
                    }
                    return this;
                };
            })(jQuery);
            $(function(){
                $("#btn_serach").twSearch().click();
                $("#btn_more").twSearch({readmore:true});
            });
        </script>
        <style type="text/css">
            #loading,#searchurl,#btn_more { display:none; }
            #res ul { margin:0; padding:0; list-style:none; border-top:1px solid #ccc; }
            #res li { background-color:#fff; margin:0; padding:10px 10px 10px 62px; list-style:none; display:block; position:relative; min-height:42px; height:auto!important; height:42px; font-size:13px; border-bottom:1px solid #ccc; }
            #res li:hover { background-color:#d3f7ff; }
            #res li img { display:block; width:32px; height:32px; margin:0; padding:1px; outline:1px solid #ccc; background:#fff; position:absolute; top:10px; left:10px; }
            #res li div { margin:5px 0; padding:0; font-size:11px; }
            #res li div span { margin:0 10px 0 0; padding:0; }
            #searchurl { font-size:10px; border:1px dotted #ccc; background:#eee; word-break:break-all; }
            #caution { margin:10px 0; padding:10px; background:#ffffcc; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>Twitter @Anywhere：linkifyUsers | 設置サンプル</h1>
            <h2>linkifyUsers</h2>
            <p>下記のタイムラインに含まれる「@{スクリーンネーム}」部分を各ユーザーのTwitterページへのリンク（http://twitter.com/{スクリーンネーム}）に変換して表示します。</p>
<!-- CODE -->
            <p>
                <label for="myquery">クエリ：</label>
                <input type="text" value="@cocoism" name="myquery" id="myquery" />　
                <input type="button" value="　検索　" id="btn_serach" />
            </p>
            <div id="searchurl"></div>
            <div id="res"><div id='loading'>loading...</div><h2></h2><ul></ul></div>
            <p><a href="#" id="btn_more" onclick="return false;">もっと見る</a></p>
<!-- / CODE -->
        </div>
    </body>
</html>

Hovercards
@usernameにマウスオーバーでユーザー情報とフォローボタンを吹出表示

2011/6/1

Hovercardsは、ページ内に含まれる「@{スクリーンネーム}」部分を、各ユーザーのTwitterページへのリンク（http://twitter.com/{スクリーンネーム}）に変換し、さらに マウスオーバーした時に、そのユーザー情報と【フォローする】ボタンを吹き出し表示します。

吹き出し内の「もっと読む...」リンクをクリックすると、詳細情報を見ることができます。

基本的な記述例

Webページ内に下記を記述します。
※*********部分はアプリ作成時に発行された専用コードのIDになります。

<script src='http://platform.twitter.com/anywhere.js?id=*********&v=1'></script>
<script type='text/javascript'>
twttr.anywhere(function(T) {
  T.hovercards();
});
</script>

吹き出し表示のカスタマイズ

吹き出し内の「もっと読む...」リンクの有無をカスタマイズできます（デフォルトは有）。 マウスオーバー時に、Hovercardsが展開した状態で表示するには、「expanded:true」を指定します。 

<script src='http://platform.twitter.com/anywhere.js?id=*********&v=1'></script>
<script type='text/javascript'>
twttr.anywhere(function(T) {
  T.hovercards({ expanded:true });
});
</script>

設置サンプル

下記の例では、Twitter検索結果の表示に@Anywhereを適用し、「@{スクリーンネーム}」部分にマウスオーバーすると、そのユーザー情報が吹き出しするようにしています。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Twitter @Anywhere：Hovercards | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
        <!-- @Anywhere -->
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <!-- @Anywhere // -->
        <script type="text/javascript">
            (function($){
                var pcnt=1;
                $.fn.twSearch=function(options){
                    var settings=$.extend({
                        url:"http://search.twitter.com/search.json",
                        type:"mixed",
                        page:"1",
                        holderID:"res",
                        readmore:false
                    },options);
                    this.click(function(){
                        //クエリ
                        var _query=$("#myquery").val();
                        //API
                        if(settings.readmore){
                            var _url=settings.url+"?q="+encodeURIComponent(_query)+"&type="+settings.type+"&page="+pcnt+"&callback={callback}";
                            pcnt++;
                        }else{
                            var _url=settings.url+"?q="+encodeURIComponent(_query)+"&type="+settings.type+"&page="+settings.page+"&callback={callback}";
                        }
                        //alert(_url);
                        $.getJSONP(_url, function(json){
                            $("#loading").show();
                            if(json.results==""){
                                  $("#btn_more").hide();
                                  $("#"+settings.holderID).append("<p id='caution'>※もうデータがありません</p>");
                                  return false;
                            }
                            var s="";
                            $("#"+settings.holderID+" > h2").html("Results for "+_query);
                            $.each(json.results, function(i, item){
                                s+="<li>";
                                s+="<a href='http://twitter.com/"+item.from_user+"'><img src='"+item.profile_image_url+"' /></a> ";
                                s+="<a href='http://twitter.com/"+item.from_user+"'>"+item.from_user+"</a>: "+formatStr(item.text)+"";
                                s+="<div>";
                                s+="<span><a href='http://twitter.com/"+item.from_user+"/status/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></span>";
                                s+="<span class='hoge'>"+formatSource(item.source)+"から</span>";
                                s+="</div>";
                                s+="</li>";
                            });
                            if(settings.readmore){
                                // もっと読む
                                $("#"+settings.holderID+" > ul").append(s);
                            }else{
                                // 検索
                                $("#"+settings.holderID+" > ul").html(s);
                                $("#btn_more").show();
                                pcnt=settings.page;
                                pcnt++;
                            }
                            $("#searchurl").html("検索URL:"+_url).show();
                            $("#loading").hide();
                            // <!-- @Anywhere -->
                            twttr.anywhere(function(T) {
                                //T.hovercards();
                                T("#res").hovercards();
                            });
                            // <!-- @Anywhere // -->
                            return false;
                        });
                    });
                    var formatStr=function(str){
                        str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.-]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
                        //str = str.replace(/@(\w+)/gm,'@<a href="http://twitter.com/$1" target="_blank">$1</a>');
                        str = str.replace((\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
                        return str;
                    }
                    var formatSource=function(str){
                        str = str.replace(/&gt;/gm,">");
                        str = str.replace(/&lt;/gm,"<");
                        return str;
                    }
                    var relativeTime=function(pastTime){
                        var origStamp = Date.parse(pastTime);
                        var curDate = new Date();
                        var currentStamp = curDate.getTime();
                        var difference = parseInt((currentStamp - origStamp)/1000);
                        if(difference < 5)                return "いまさっき";
                        if(difference <= 20)            return "数秒前";
                        if(difference <= 60)            return "1分以内";
                        if(difference < 3600)            return parseInt(difference/60)+" 分前";
                        if(difference <= 1.5*3600)         return "1時間前";
                        if(difference < 23.5*3600)        return Math.round(difference/3600)+" 時間前";
                        if(difference < 1.5*24*3600)    return "1日前";
                        var dateArr = pastTime.split(' ');
                        return (parseInt(difference / 86400)).toString() + '日前';
                    }
                    return this;
                };
            })(jQuery);
            $(function(){
                $("#btn_serach").twSearch().click();
                $("#btn_more").twSearch({readmore:true});
            });
        </script>
        <style type="text/css">
            #loading,#searchurl,#btn_more { display:none; }
            #res ul { margin:0; padding:0; list-style:none; border-top:1px solid #ccc; }
            #res li { background-color:#fff; margin:0; padding:10px 10px 10px 62px; list-style:none; display:block; position:relative; min-height:42px; height:auto!important; height:42px; font-size:13px; border-bottom:1px solid #ccc; }
            #res li:hover { background-color:#d3f7ff; }
            #res li img { display:block; width:32px; height:32px; margin:0; padding:1px; outline:1px solid #ccc; background:#fff; position:absolute; top:10px; left:10px; }
            #res li div { margin:5px 0; padding:0; font-size:11px; }
            #res li div span { margin:0 10px 0 0; padding:0; }
            #searchurl { font-size:10px; border:1px dotted #ccc; background:#eee; word-break:break-all; }
            #caution { margin:10px 0; padding:10px; background:#ffffcc; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>Twitter @Anywhere：Hovercards | 設置サンプル</h1>
            <h2>Hovercards</h2>
            <p>下記のツイートに含まれる「@スクリーンネーム」リンクにマウスオーバーするとHovercardsが表示されます。</p>
<!-- CODE -->
            <p>
                <label for="myquery">クエリ：</label>
                <input type="text" value="from:cocoism" name="myquery" id="myquery" />　
                <input type="button" value="　検索　" id="btn_serach" />
            </p>
            <div id="searchurl"></div>
            <div id="res"><div id='loading'>loading...</div><h2></h2><ul></ul></div>
            <p><a href="#" id="btn_more" onclick="return false;">もっと見る</a></p>
<!-- / CODE -->
        </div>
    </body>
</html>

Follow buttons
指定したユーザーのフォローボタン設置

2011/6/1

下記のように、ユーザーのスクリーンネームを指定するだけで、フォローボタンを表示し、Twitterサイトに遷移することなく、そのサイト上でフォローを行うことができます。

基本的な記述例

Webページ内に下記を記述します。
※*********部分はアプリ作成時に発行された専用コードのIDになります。

<script src='http://platform.twitter.com/anywhere.js?id=*********&v=1'></script>
<span id='follow-twitterapi'></span>
<script type='text/javascript'>
twttr.anywhere(function (T) {
  T('#follow-twitterapi').followButton('cocoism');
});
</script>

設置したフォローボタン（【Follow @{スクリーンネーム} on Twitter】ボタン）をクリックすると、アプリ連携確認画面が別窓表示されます。

（Twitter認証していない場合は、ログイン後）【連携】ボタンをクリックすると、下図のようなボタンに表示が切り替わります。

なお、アプリ作成者自身が自分自身をフォローしようとした時（自分自身をフォローできないため）などフォローに失敗した場合は、下図のようなエラーボタンに表示が変わります。

また、Twitter上に存在しないユーザーのスクリーンネームを指定した場合は、下図のように無効化された状態で表示されます。

設置サンプル

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Twitter @Anywhere：Follow buttons | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <!-- @Anywhere -->
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <!-- @Anywhere // -->
    </head>
    <body>
        <div id="wrap">
            <h1>Twitter @Anywhere：Follow buttons | 設置サンプル</h1>
            <h2>Follow buttons</h2>
            <p>ツイートボタンの作成例です。</p>
<!-- CODE -->
            <p><span id="follow-twitterapi"></span></p>
            <p><span id="follow-twitterapi2"></span>　←存在しないユーザーを指定した場合</p>
            <!-- @Anywhere -->
            <script type="text/javascript">
                twttr.anywhere(function (T) {
                    T('#follow-twitterapi').followButton("cocoism");
                    T('#follow-twitterapi2').followButton("coooooooooooooooooooocoism");
                });
            </script>
            <!-- @Anywhere // -->
<!-- / CODE -->
        </div>
    </body>
</html>

User login & signup
コネクトボタン設置

2011/6/1

Webサイト上にアプリ連動を行うコネクトボタンを設置することができます。

基本的な記述例

Webページ内に下記を記述します。
※*********部分はアプリ作成時に発行された専用コードのIDになります。

<script src='http://platform.twitter.com/anywhere.js?id=*********&v=1'></script>
<span id='login'></span>
<script type='text/javascript'>
twttr.anywhere(function (T) {
  T('#login').connectButton();
});
</script>

【Connect with twitter】ボタンをクリックするとアプリ連動許可画面が表示され、【連携】ボタンをクリックして連携を実行すると、【Connected with 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" />
    </head>
    <body>
        <span id="loginbox"></span>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
          twttr.anywhere(function (T) {
                T("#loginbox").connectButton();
          });
        </script>
    </body>
</html>

設置サンプル - ボタンサイズ指定

コネクトボタンのサイズは、「size」パラメータでカスタマイズできます。指定可能な値は、small, medium, large, xlargeのいずれかです。デフォルトは「midium」です。

設置サンプルサンプルを見る
<!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" />
    </head>
    <body>
        <span id="loginbox_small"></span>　
        <span id="loginbox_medium"></span>　
        <span id="loginbox_large"></span>　
        <span id="loginbox_xlarge"></span>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
          twttr.anywhere(function (T) {
                T("#loginbox_small").connectButton({size: "small"});
                T("#loginbox_medium").connectButton({size: "medium"});
                T("#loginbox_large").connectButton({size: "large"});
                T("#loginbox_xlarge").connectButton({size: "xlarge"});
          });
        </script>
    </body>
</html>

設置サンプル - コネクトボタンのカスタマイズ

コネクトボタンの見た目をカスタマイズしたい時などは、button要素やa要素などをコネクトボタンとして動作させることができます。 その場合は、下記のように、コネクトボタンをクリックした時にサインアップするように指定します。 

<script src='http://platform.twitter.com/anywhere.js?id=*********&v=1'></script>
<button type='button' class='signin-btn'>Connect with Twitter</button>
<script type='text/javascript'>
twttr.anywhere(function (T) {
  document.getElementById('signin-btn').onclick=function(){
    T.signIn();
  }
});
</script>

下記のサンプルではbutton要素とa要素をコネクトボタン化しています（jQuery使用）。

設置サンプルサンプルを見る
<!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>
    </head>
    <body>
        <button type="button" class="signin-btn">Connect with Twitter</button>　
        <a href="#" class="signin-btn">Connect with Twitter</a>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
          twttr.anywhere(function (T) {
                $(".signin-btn").click(function(){
                  T.signIn();
                  return false;
                });
          });
        </script>
    </body>
</html>

設置サンプル - 連携ステータスに応じてコネクトボタン＆ログアウトボタン表示切り替え

ページを閲覧しているユーザーが、Twitter連携中かどうかは、T.isConnected()で判定できます。 また、Twitter連携に成功した時、ログアウトした時のイベントは、それぞれ「authComplete」と「signOut」で受け取ることができるため、 下記のように連携ステータスに応じてボタン表示を切り替える事ができます。

下記のサンプルでは、現在のTwitter連携ステータスに応じて、 連携中なら【コネクト】＋【ログアウト】ボタン、 未連携なら【コネクト】ボタンのみを表示してみました。

【コネクト】ボタンはTwitter側で生成される画像ボタンです。 【ログアウト】ボタンは、a要素にCSSでボタンっぽく見えるようにしています。

設置サンプルサンプルを見る
<!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>
    </head>
    <body>
        <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&amp;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>

設置サンプル - 連携しているユーザーの情報を表示

ページを閲覧しているユーザーが、Twitter連携中の場合、そのユーザー情報（ユーザーのスクリーンネーム、プロフィール画像URL）を取得できます。

下記の例では、現在の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>
    </head>
    <body>
        <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&amp;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>

Tweet Box
Twitterへの投稿フォームを設置

2011/6/1

Tweet Boxは、Webサイト上にTwitterへの投稿フォームを設置することができます。

基本的な記述例

Webページ内に下記を記述します。
※*********部分はアプリ作成時に発行された専用コードのIDになります。

<script src='http://platform.twitter.com/anywhere.js?id=*********&v=1'></script>
<div id='tbox'></div>
<script type='text/javascript'>
twttr.anywhere(function (T) {
  T('#tbox').tweetBox();
});
</script>

ツイートを入力し、【Tweet】ボタンをクリックすると、下図のようにTwitterにツイートが投稿されます。 投稿元には、@Anywhereアプリを登録した際のアプリ名称とリンク先が適用されます。

設置サンプル

設置サンプルサンプルを見る
<!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：Tweet Box | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    </head>
    <body>
        <div id="tbox"></div>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
          twttr.anywhere(function (T) {
                T("#tbox").tweetBox();
          });
        </script>
    </body>
</html>

パラメータ

下記のパラメータを指定することで、Tweet Boxの幅・高さ、デフォルトコンテンツ、ラベル等のカスタマイズが可能です。

パラメータ説明
counter入力文字のリアルタイムカウント表示の有無を真偽値で指定。
デフォルトは「true」（カウント表示あり）。
heightTweet Boxの高さをピクセルで指定。
デフォルトは133（px）。
widthTweet Boxの幅をピクセルで指定。
デフォルトは133（px）。
labelTweet Box上に投稿を促すメッセージを指定。
デフォルトは、「What's happening?」。
defaultContentテキストエリアにデフォルト表示する文字列を指定。
デフォルトはなし。
onTweetTweet Boxからツイートが送信された時のリスナーを指定。リスナーは、投稿したツイートをプレーンテキスト、HTML文の2つの引数で受け取ります。
デフォルトはなし。
dataユーザーのステータス更新時に設定できるオプションパラメータを指定。設定可能なオプションは、POST statuses/updateを参照。
デフォルトはなし。

設置サンプル - 幅・高さ（400x100）指定＋カウンターなし

設置サンプルサンプルを見る
<!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：Tweet Box | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    </head>
    <body>
        <div id="tbox"></div>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
          twttr.anywhere(function (T) {
                T("#tbox").tweetBox({
                    width:400,
                    height:100,
                    counter:false
                });
          });
        </script>
    </body>
</html>

設置サンプル - デフォルトコンテンツ、ラベル指定

設置サンプルサンプルを見る
<!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：Tweet Box | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    </head>
    <body>
        <div id="tbox"></div>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
          twttr.anywhere(function (T) {
                T("#tbox").tweetBox({
                    label:"好きな映画をツイートしてね！",
                    defaultContent:"@cocoism "
                });
          });
        </script>
    </body>
</html>

設置サンプル - ツイート送信後にアラート表示

onTweetパラメータを使用して、ツイート投稿後に、投稿したメッセージをアラート表示します。

設置サンプルサンプルを見る
<!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：Tweet Box | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    </head>
    <body>
        <div id="tbox"></div>
        <div id="res"></div>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
          twttr.anywhere(function (T) {
                T("#tbox").tweetBox({
                    onTweet : function(plaintext, html) {
                        alert("下記のメッセージを投稿しました。\n\n"+plaintext+"");
                    }
                });
          });
        </script>
    </body>
</html>

設置サンプル - 位置情報付加

dataパラメータを使用して、位置情報（place_id）を付加してツイート投稿します。

設置サンプルサンプルを見る
<!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：Tweet Box | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    </head>
    <body>
        <div id="tbox"></div>
        <div id="res"></div>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
          twttr.anywhere(function (T) {
                T("#tbox").tweetBox({
                    "data":{
                        "place_id":"d3552f4b2b06cbc8"//Shinjuku Ward, Tokyo
                    }
                });
          });
        </script>
    </body>
</html>

Tweet Box + bit.ly
Twitterへの投稿フォームにbit.lyの短縮URLを挿入

2011/6/1

デフォルトコンテンツに、下図のようにTweet Boxを埋め込んだページのURLを、bit.lyの短縮URLにして挿入する例です。 bit.lyのAPIキ―は、bit.lyにログイン後、http://bitly.com/a/your_api_keyで確認できます。

PHPでbit.ly APIにアクセスする方法は、Creating an AJAX Web App Using the Bit.ly APIを参考にしています。

bitly.php
<?php
if(isset($_POST['long_url']) && !empty($_POST['long_url'])){
    $long_url = htmlspecialchars(strip_tags(trim($_POST['long_url'])));
    //Ensure that the url is valid, php 5+ required 
    if(!filter_var($long_url, FILTER_VALIDATE_URL)){
        echo 'Invalid URL.';
    }
    else{
        $url_enc = urlencode($long_url);
        $login = 'ログインするときのユーザー名';
        $api_key = 'APIキー';
        $format = 'json';
        $data = file_get_contents('http://api.bitly.com/v3/shorten?login='.$login.'&apiKey='.$api_key.'&longUrl='.$url_enc.'&format='.$format);
        $json = json_decode($data, true);
        echo $json["data"]["url"];
        return $json["data"]["url"];
    }
}
else {
    return 'Null or empty URL given.';
}
?>
設置サンプルサンプルを見る
<!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：Tweet Box | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="loading" style="height:100px;line-height:100px;font-weight:bold;">loading...</div>
        <div id="tbox"></div>
        <script src="http://platform.twitter.com/anywhere.js?id=Vr1OpiUZD7KOxQlpSvYdEA&amp;v=1"></script>
        <script type="text/javascript">
            /*
                bit.lyのURL短縮(PHP)
                参照：http://blog.themeforest.net/tutorials/creating-an-ajax-web-app-using-the-bitly-api/
            */
            $(function(){
                $.ajax({
                    url:"/module/include/topic/twitter_anywhere/bitly.php",
                    success:function(data) {
                        /* 現在のURLの短縮URLをbitlyで取得 */
                        /* Tweet Box埋め込み */
                        twttr.anywhere(function(T){
                            $("#loading").hide();
                            T("#tbox").tweetBox({
                                label:"コメントしてね！",
                                defaultContent:"@cocoism: ("+data+") "
                            });
                        });
                    },
                    error:function(x,y){
                    },
                    data:{
                        long_url:location.href
                    },
                    type:"POST"
                });
            });
        </script>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women