Movable Type 5 に Facebookの「いいね!」ボタン (Like Button) を付ける

  • 投稿日:
  • by
  • カテゴリ:

着々とカスタマイズが進む「おそえの日誌2」。

今回は、Movable Type 5 に Facebookの「いいね!」ボタン (Like Button) を付けてみました。

作成に当たっては、ネタフルさんの『【Facebook】ブログに「Like(いいね)」ボタンをつける方法』のページを参考にさせて頂きました。
ありがとうございます。
ネタフルさんもMovableTypeなので、参考サイトとしてはピッタリでした。

まずは、Facebookの「いいねボタン」の説明ページでタグを取得します。
タグは「iframe」の方を取得します。

私は「いいねボタン」を本文の最後に設置するために、テンプレート「ブログ記事のメタデータ」の先頭に挿入しました。
挿入した後は、上記のネタフルさんのサイトに記載されているように、URLのところはブログ記事のパーマリンク用タグに差し替えます。

■「いいねボタン」設置場所
デザイン → ブログテンプレートの管理  → テンプレートモジュール → 「ブログ記事のメタデータ」

しかし、このままだと、余白が無くて本文にピタリと引っ付いてしまうため、スタイルシートを設定します。

私は小粋空間さんのテンプレートを使用しているので、下記の箇所のスタイルシートを編集しました。

■スタイルシート編集の為に変更をしたテンプレートの場所
デザイン → ブログテンプレートの管理 → インデックステンプレート → スタイルシート(styles-site.css)