[ブロガー必見]ブログ内ツイートボタンをカスタマイズしてTwitterアカウント名をイイ感じに表示してみた

Share on Twitter
珍しく今回はブロガーにも見てもらいたいエントリーになっています。@knk_nです。
ブログを読んでいて、「この記事を書いているのはどんな人だろう」と思うのは当然のことであり、その人がTwitterをやっていればフォローなり何なりしたくなるのもよくわかります。
最近@hebyumetanさんがブログ記事から管理者のTwitterアカウント名を取得するというブックマークレットを作っているそうで、私もひそかに応援をしています。
たしかに記事から管理者がわかるようにしたいなぁ。

人様に頼るな!自分で考えろ!

via: 一瞬オンボロコロナがセリカXXになったw ~Blog記事からツイアカ取得に向けたBookmarkletのお勉強 Vol.3~ – @hebyumetan

おぉ、私も人様に頼らずに自力でやってやろうじゃないか。

ツイートボタンにアカウント名付ければ手っ取り早い

管理者自身がツイートボタンにアカウント名を追加するのが一番手っ取り早い方法でしょう。
公式のツイートボタンも管理者がTwitterアカウントを追加しやすいように作られています。
しかし、ここで少し問題があります。
最近ツイートボタンのデザインが変更されたのは誰もが知ってることですが、同時にTwitterアカウント名の表示がおかしなことに。
例えばこんな感じです。
Tweetbutton customize1 1
「@knk_nさんから」ってなんだよ?
英語だとたしか「via @knk_n」となるのでまだマシですが、末尾に「〜さんから」っていうのは…
うん、カッコワルイネ。
「〜から」という表示はツイートボタンのデザイン変更当初TL上でかなり疑問視されていたのを覚えています。
私は「RT @knk_n: 記事タイトル 記事URL」のように引用リツイート風なスタイルにしたかった。
そんなことを思って少し前にツイートボタンのカスタマイズを行ったのですが、今回WordPressの「WP Social Bookmarking Light」にも同様のカスタマイズを行ったので合わせて方法をご紹介します。

ツイートボタンのカスタマイズ (通常方法)

まずは、公式のツイートボタンをカスタマイズした結果このようになりました。

<a href="http://twitter.com/share" class="twitter-share-button" data-url="記事URL" data-text=" RT @knk_n: 記事タイトル" data-count="vertical" data-lang="en" data-via="" >Tweet</a>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

data-viaの部分が「〜から」になるのでその部分を消して、記事タイトルの前に RT @knk_nというように欲しい部分を追加しました。
記事URL、記事タイトルはお使いのブログサービスでタグが異なるので各自でのカスタマイズが必要になります。
私はWordPressユーザなので、URLを<?php the_permalink(); ?>、記事タイトルを<?php the_title(); ?>にしています。
Twitterアカウント名はご自身のものに置き換えてお使いください。
これでこんな表示スタイルになります。
Tweetbutton customize2
まるで引用リツイートしたみたいですね。
うむ、良いな。良いじゃないか。
スタイルはお好みで変更してください。

まず目を向けて頂きたいのが、「はてぶ」のtwitter連動機能

ツイッターでの呟きにURLが含まれると、自動でそのurlの記事を「はてぶ」するという機能です。

この機能には2種類ありまして、一つはURLが含まれたツイートなら全部「はてぶ」、もう一つが「B!」がurlの前に含まれた呟きを「はてぶ」です。

「B!」の方で利用して、使い分けてる方も結構多いのではないでしょうか。

そーなんです、お気づきですね。この「B!」を含めたタイトルで投稿してしまえば…。

via: 悪用厳禁!「はてぶ」狙いのtwitter向けブログタイトル | nori510.com

余談ですが、最近こんな興味深い記事を読みました。私も以前紹介したTwitterからはてブする方法ですね。
オススメは決してしませんが、はてブ絶対主義の方は記事タイトルの後にB!と付けると、少しの期間だけちょっぴり幸せになれるかもしれませんね。
おや、誰か来たようだ。

ツイートボタンのカスタマイズ (WP Social Bookmarking Light)

同様のカスタマイズをWordPressプラグイン「WP Social Bookmarking Light」でもやってみました。
ソーシャルボタンボックスのツイートボタンはiPhoneやiPadで見たときには表示されないので、ほとんどこっちが使われることになります。
実際ツイートを見ていても圧倒的に多いので、こっちのカスタマイズのほうが私的には重要です。「@knk_nさんから」っていうリプライ多かったよホント。
たぶんこっちは中上級者向けかな。
※ かなりコアな部分をいじるので、事前にファイルのバックアップをとってCyberduckなどサーバアクセスが行える準備をすることをおすすめします。
サーバエラーになるとWordPress側からのファイル編集ができなくなるのでご注意ください。
実際私も数回サーバエラーを起こしてWordPressが動かなくなりました。コワイコワイ
Tweetbutton customize3
WordPressの管理画面の「プラグイン」から「プラグイン編集」を選びます。
「編集するプラグインを選択」から「WP Social Bookmarking Light」を選び、「services.php」を編集します。
ファイルの128行目から144行目にかけてfunction twitter()という部分があるので、この部分を置き換えます。

function twitter()
    {
        $options = wp_social_bookmarking_light_options();
        $twitter = $options['twitter'];
        $width = $twitter['width'] != '' ? $twitter['width'] : '120';
        $height = $twitter['height'] != '' ? $twitter['height'] : '20';
        return $this->link_raw('<iframe allowtransparency="true" frameborder="0" scrolling="no"'
                                .' src="http://platform.twitter.com/widgets/tweet_button.html'
                                .'?url='.$this->encode_url
                                .'&amp;text= RT @'.$twitter['via'] .' ' .$this->encode_title
                                .($twitter['via'] = '')
                                .'&amp;lang='.$twitter['lang']
                                .'&amp;count='.$twitter['count']
                                .'"'
                                .' style="width:'.$width.'px; height:'.$twitter['height'].'px;">'
                                .'</iframe>');
    }

Tweetbutton customize4
そして、設定の「WP Social Bookmarking Light」からTwitterアカウントなどを入力します。
表示スタイルは通常版と同じです。

ただしブラウザでのみ有効


先ほど@hebyumetanさんとも話していたのですが、@hebyumetanさんが作ろうとされているBookmarkletも私がカスタマイズしたツイートボタンも、ブラウザ上でしか使えません。(当たり前
RSSフィード上にツイートのリンクを貼るという方法もあるにはあるのですが、結局ブラウザを経由しなければいけないんですよね(^_^;)
私もブログ記事のツイートはほとんどReederや夜フクロウのBookmarkletからなので、このあたりはいずれ課題になるかもなぁ。
もっと言うと、ブログ外のツイートボタンとか使われたら今回のカスタマイズ全く意味ないな。

最初に名乗るのが一番簡単

私も最近意識していることですが、記事の最初にTwitterアカウント名で名乗るという方法があります。周りでやっておられる方が多いので追っかけで始めました。
こうすれば読んでいる方にもわかるし、@hebyumetanさんが作ろうとされているBookmarkletでも「記事本文の最初のTwitterアカウント名を取得する」とかでできるかもしれません。
しかし実際問題名乗っている方は全体で見るとそんなに多くないので、難しいのかな。
あっ、また脱線してしまった。

おわりに

記事へのツイートはやっぱり嬉しいものです。
アクセスが多くなるとだんだん拾えなくなっていくものですが、私はまだそのレベルには達していないようで、自分の記事に関するツイートはすべて把握できているつもりですし、コメントの付いているものに対してはできるだけ返信やリツイートをさせてもらってます。

そもそもの目的はなんなんだっけ?自分の気持ちを記事を書かれたブロガーの方に伝えたいんでしょ。だったらやることはほかにあるでしょ。違うの?

via: 一瞬オンボロコロナがセリカXXになったw ~Blog記事からツイアカ取得に向けたBookmarkletのお勉強 Vol.3~ – @hebyumetan

私も読み手として同じ考えです。そして書き手としても、「読んでいただいた方の感想とかコメントをちゃんと見たい」という目的を持っています。
どちらの方法もオススメなのでブロガーの方はやってみたらいいんじゃないかな。

「おわりに」のおわりに

Tweetbutton customize5
先日、当ブログのFacebookページへの「いいね!」が100人を突破しました。
ありがとうございます。(ちょうど100人を見逃してしまったのがちょっぴり残念)
今後はもう少しFacebookページもただ記事の更新を流すだけでなく、もう少しちゃんと使っていきたいと思います。
せっかくTwitterとも連携しているのだから管理者としてのコメントはできるだけFacebookページ側から出していこうかな。
お気づきの方がいらっしゃるかもしれませんが、テーマ自作に合わせてコメントフォームをバッサリとカットしました。スパムコメントばかりでそれほど使われていないと以前から感じていたからです。
今後、記事に関するコメントはTwitter、Facebookが中心になります。オープンが嫌だという方はメニューの「お問い合わせ」ページに問い合わせフォームを設置してあるので、そちらよりご連絡ください。「コメントフォーム復活させろ!」といったご要望も大歓迎です。
もちろんinfoあっとまーくknk-n.comへのメールでも結構ですよ。
よろしくです。

追記 (2012/02/26 0:55)

@toshiya240さんがBloggerバージョンのツイートボタン記事を書いてくださいました。ありがとうございます。

Happy-Go-Lucky: Bloggerで”ブログ内ツイートボタンをカスタマイズしてTwitterアカウント名をイイ感じに表示してみた”