MovableTypeにツイートボタンを設置する

こんばんわ(=゚ω゚)ノ
Movable Typeにツイートボタンを設置しました。
この手の記事はぐぐると結構見つかるんですが、その記事を読みに行ってみると結構古い記事だったり、割と新しめだと思ったらツイートボタンのタグ取得までは書いてあって、どのテンプレートのどこに設置するかが書いてない記事だったり、ツイートボタンを設置するプラグインの記事だったりと、実際の設置まで結構手間取った気がします。
プラグインでの設定でも基本的に変わりないんですけど、プラグインの設定画面の表記が英語なんで、普通の設置方法を選択しました。

どちらを設置しても、一度設置できてしまえば後はよっぽどのことがない限り設置し直すことはないでしょう。
でも、もしかしたら何らかの理由で撤去するなんてことがあるかも知れないし、そのときになってどこへ設置したか覚えてられる自信もないんで、タグ取得から設置までまとめておこうと思います。

公式の ツイートボタン ページに行きます。

Movable Typeに貼り付ける好みのボタンを選択します。
post330-01

ボタンのオプションを設定します。
post330-02

URLを共有は下のボタンを選択して、<$MTEntryPermalink$>を入力します。
ツイート内テキストも下のボタンを選択して、<$MTEntryTitle$>を入力します。
ユーザー欄に自分のTwitter IDを入力します。

右のコードプレビューを見ると下欄にタグが生成されるので、これをコピーして表示させたいテンプレートに貼り付けることになります。
post330-03

このとき、一度テキストエディタを開いて貼り付けてみましょう。
貼り付けたタグの一部に「<」が「&lt;」、「>」が「&gt;」と文字コードに変わってる場合があるので、そのときは修正しておきます。
post330-04

このタグは、設定内容によって若干変化しますが、各設定の内容は以下のようになります。
data-url:URLを共有時のURL
deta-text:ツイート内テキスト
deta-via:ユーザー@
data-related:推奨
data-hashtags:ハッシュタグ
data-size:ボタンの大きさ
data-dnt:カスタマイズされたTwitterからのオプトアウト
data-lang:言語設定

デザイン>テンプレート>モジュールテンプレートで、テンプレートモジュールの作成をクリックして、取得したタグを貼り付けて、任意のテンプレート名(ここではツイートボタンとしています)を入力して保存します。
post330-05

トップページでに表示させる場合は、デザイン>テンプレート>ブログ記事の概要を開き、16行目辺りに<mt:Include module=”ツイートボタン” />を追記します。
post330-06

ブログ記事そのものへ貼り付ける場合は、デザイン>テンプレート>ブログ記事を開き、大体この辺に<mt:Include module=”ツイートボタン” />を追記します。
post330-07

これらを保存して再構築すれば各所にツイートボタンが設置されます。

しかし、若干表示位置が高いのでmt\mt-static\themes\cityscape-portland(使用しているテーマによって選択するフォルダは違います)内にあるscreen.cssをテキストエディタで開いて、末尾に.twitter-share-button { vertical-align: middle; }を追記して保存します。
post330-08

これで設定完了です。
お疲れ様でした(=゚ω゚)ノシ

この記事はいかがでしたか?
良かったらポチッとお願いします!励みになります!!