2011年4月23日土曜日

Bloggerで@Anywhereを使えるようにする、の巻

Bloggerに乗り換えて、そろそろ半年を超えてまして。
今のところ、概ね気に入って使っています。
少なくとも自分でサーバを運営していたことを思えば気楽です。(笑)
(そのぶん、マニアックなことはできませんが。)

Bloggerでもたいていやりたいことは出来るんでこれで良いです。
ただ、独特なところもあって。
工夫が必要なこともあります。(汗)
いぜん、自分でサーバを運営していた頃には簡単に導入していた@Anywhereも@Bloggerでは工夫が必要でした。(TдT)
んで@Anywhereってなんぞや?ってことですが。
Twitterの機能なんですけど。
オートリンク、とかポップアップとかそんなのができます。(他にも盛りだくさんあるけど。)
いちばん、便利なのがこの2つですね、オートリンクは便利だよね。
オートリンクとはね、このスーパーブログでももう実装してるんですけどブログの文章を書いている中で「@」マークをつけてTwitterのアカウントを記述すると自動的にTwitterのサイトにリンクを貼ってくれます。
@susamishin
@googlenewsjp
とか普通に書くだけでオートマチックにリンカブルになっちゃいます。
そしてそのリンクにマウスポインタを近づけると。
吹き出しが出ますよ。
こんな感じになって便利で(・∀・)カコイイ!!です。
あと、他にもいろいろ機能があるんだけど、とりあえず使ってません。(笑)

さて、導入方法ですが。
まずアプリケーション登録ってのが必要です。
ここにアクセス。
https://dev.twitter.com/anywhere/apps/new
こんな画面になるはずです。
アプリケーション名:何でも良いですけど真面目な名前にして置いた方が無難。
説明を書いていくのがめんどくさいのでボクの設定画面をそのままお見せします。
こんな感じです。
あとは適当にご自分のサイトに合わせて書き換えてね。
登録が済むとAPIキーが発行されます。
今回重要なのは「黄色」で塗りつぶされた部分の「API Key」です。
この部分の文字列をコピペしておきます。

次にコードをBloggerに埋め込みます。
いつもの感じでBloggerのDashboardにアクセス。
「デザイン」をクリック。
「HTMLの編集」をクリック。
テンプレートを念のためバックアップしてから。
テンプレを編集。
</head>を検索してその直前の行から記入ですね。
@Anywhereで発行されたコードは以下のようなものだったはず。

<script src="http://platform.twitter.com/anywhere.js?id=APIキー&v=1"></script>

このAPIキーってところに先ほどの「黄色」で塗りつぶされた部分の「API Key」が入るわけです。
普通はこいつを記入すればオッケーなんですけど。
Bloggerだとエラーがでます。(毎度おなじみ)
んで書き換えます。

<script src='http://platform.twitter.com/anywhere.js?id=APIキー&amp;v=1'/>

こんな感じっす。
そして続けて機能を盛り込んでいきます。
今回は必要?気に入ってる機能の分だけ盛り込んでます。(オートリンクとポップアップ)

<script type='text/javascript'> 
    $(document).ready(function() {
        $(&quot;a[href^=&#39;http://twitter.com&#39;]&quot;).add(&quot;a[href^=&#39;http://www.twitter.com&#39;]&quot;).attr(&quot;title&quot;, function() {
            return &#39;@&#39; + this.href.substr(this.href.lastIndexOf(&#39;/&#39;) + 1);
        });
    }); 
    twttr.anywhere(function(T) { 
        T.hovercards(); 
        
        T(&quot;a[title^=&#39;@&#39;]&quot;).hovercards({
            username: function(node) {
                return node.title;
            }
        });
    });    
</script>

こんな感じです。
ここはもう元々のコードは書いてません、いきなりBlogger用です。
しかもAPIキーとか関係ないので誰もがこのコードをコピペすりゃいいわけです。
んじゃ、これで終わり?楽じゃん?って思ったヒトは大間違い。
これでもBloggerではダメです、動きません。機能しません。
なんでやねん?と色々調べた結果、GoogleのAPIを通過させる(翻訳させる?)と動作することが判明。
さっそく導入。
この1行が必要ってことです。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>

このライブラリを通過させてやるとお洒落に動作するようです。

説明しながら書くとややこしくなったので「マトメ」で書くと。
テンプレの</head>の上ぐらいの行に…

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=APIキー&amp;v=1'/> 
<script type='text/javascript'> 
    $(document).ready(function() {
        $(&quot;a[href^=&#39;http://twitter.com&#39;]&quot;).add(&quot;a[href^=&#39;http://www.twitter.com&#39;]&quot;).attr(&quot;title&quot;, function() {
            return &#39;@&#39; + this.href.substr(this.href.lastIndexOf(&#39;/&#39;) + 1);
        });
    });
    twttr.anywhere(function(T) { 
        T.hovercards(); 
        
        T(&quot;a[title^=&#39;@&#39;]&quot;).hovercards({
            username: function(node) {
                return node.title;
            }

        });

    });
    
</script>

をコピペしましょう!
んでテンプレ保存。
これであなたのブログでも@Anywhereが動き出しますので。
ブログにどんどん「@」マークつきの文章を書きましょう!
こんな感じに!!

@susamishinは明日は長良川でクリテリウムレースに出場です。
チームメイトは@Solid64bit @kenken_sweats @mechahide23 @p_r_a_n_k @takathuka です。
@manma3と@tanukyotoは白浜クリテリムに出場です!
@team_manmaみんな、事故の無いように暑苦しく走って頑張りましょう!!
こんな感じかな!!

0 件のコメント: