Twitterボタンのパラメータ活用。

今日はTwitterボタンの簡単な設置法についてもう少し丁寧にご説明してみよーと思います。

最近、Twitterの会社情報や素材用ロゴが見つからないという話をよく聞きます。
今回、ご紹介するTweetボタンの設定入口も同じ場所にあって、これらの情報はページ下部のフッターに入っているのですが、ログインした状態ではタイムラインがどんどん延長されて表示することが出来ません。この情報にアクセスするには、アカウントをログアウトするかタイムライン表示から離れることで可能になります。右上の「アカウント＞設定」を選択するのが簡単です。

タイムラインから離脱したフッタ部分にヤツへのリンク「素材」があります。

Twitterのロゴ素材や、フォローボタンと並んで「ツイートボタン」という項があるので、そこを選択します。

ようやく前回の記事で紹介したツイートボタンの設定ページにたどり着きました。

ページ下部右側にツイートボタン設置用のコードが書いてあります。
初期状態では、Twitterで選択している言語、ログインしているアカウントを反映して以下の様なコードとなっています。これからカスタマイズを施してコードを変更していきます。

カスタマイズの項目は4つ。
「ボタン」ではツイートボタンのデザインを決定。
「ツイート内テキスト」「URL」はツイートボタンを押した時に表示される文字列の設定です。通常はボタンが設置されているページの<title>タグとページのURLが引き出されます。とりあえず「あいうえお」と「URLURL」という文字列を入れてみました。
例えば、ボタンは各ページに設置するけど、URLを一意にしたいときや、ひとつのページに複数のボタンを設置してそれぞれに違うタイトル、リンク先を用意する時に使えます。
最後の、「言語選択」はツイートボタンの表示言語を変更する項目です。
あくまで見た目だけの設定なので、気分で選んでよいと思います。

「言語選択」を変更するとページ下部のボタンプレビューが変化します。サイズも表示されるので、設置するときの参考にできます。

こうして出来たのが、以下のコードです。
前述のデフォルトからどんな変化があるか観察してみると楽しいと思います。

このサイトでは、ツイート内テキストとURLをカスタマイズして、MovableTypeのテンプレートに記述しています。これだと、ページ一覧に表示されているボタンでも必ず記事のURLとタイトルを取得してツイート出来ます。
これをベースに工夫して楽しく活用出来るといいですね。

<a href="https://twitter.com/share" class="twitter-share-button" 
data-url="<$mt:EntryPermalink$>" 
data-text="33kg.net｜<$mt:EntryTitle$>" 
data-count="horizontal" data-via="33kg">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>