こんばんは。ユウです。
Twitterのフォローボタンに続いて、facebookページのいいね！ボタンも設置したいと思い、試してみました。
「この記事が気に入ったら いいね！しよう」ボタンを設置してみた
「この記事が気に入ったら いいね！しよう」と書かれたfacebookページのいいね！を催促するボタンもよく見かけます。
こんなやつです。
よろしければ、いいね！をお願いします(^^)
こちらはTwitterのフォローボタンよりはちょっと面倒でしたが、それほど難しくもありませんでした。
記事の下に設置する方法
さっそく設置方法を解説しましょう。
と言いたいところですが、私の技術ではうまく説明する記事が書けそうにないので、詳しい方法は他のブログの記事にお任せすることにします。
ただ、一部ちょっと分かりづらい部分がありましたので、そちらを補足説明するということでご容赦ください。
その程度のレベルの人間でも設置できるほど簡単なことなんだと思っていただければ良いかと思います(^^;)
私が参考にしたのはこちらのブログです。
Twitterのフォローボタンもまとめて設置できます。
【コピペでOK】ライブドアブログに「この記事が気に入ったらいいね！しよう」の設置方法
補足説明
私が上記のページに従って設置した際にちょっと疑問に思った部分について補足説明を記しておきます。
１ まずはこのコード
最初に「まずはこのコード」のところに記載されているコードをコピペするように書かれています。
まずはこのコードをbodyタグ直後に貼り付けて下さい。
ここでいうbodyタグとは、ブログの個別記事ページのbodyタグのことです。
ライブドアブログのマイページにログインして、「ブログ設定」→「ＰＣ」と移動し、「カスタマイズ」というタブを選択します。
そのなかの「個別記事ページ」というタグを選択します。
そこに「body」で始まる行があります。
その次の行が「bodyタグ直後」ですので、そこにコードを貼り付ければＯＫです。
２ ｈｔｍｌコード
続いてｈｔｍｌコードを貼り付けるように書かれています。
こちらはボタンを設置したい場所に貼り付けます。
記事の下に設置するなら、「１ まずはこのコード」のところで表示した「個別記事ページ」の<$RelatedArticles$>という部分の上の行あたりに貼り付けます。
facebookページのURL、ツイッターのidとアカウント名を自分のものに変更するのを忘れないでください。
３ ｃｓｓ
ｃｓｓについては、上記2つと貼り付ける場所が異なります。
ライブドアブログのマイページにログインして、「ブログ設定」→「ＰＣ」と移動し、「カスタマイズ」というタブを選択します。
そこで「ｃｓｓ」というタブを選択します。
その一番下にそのまま貼り付ければＯＫです。
これで記事の下に「この記事が気に入ったら いいね！しよう」というボタンが設置されました。
残念ながらスマホには表示できません
上記の作業で表示できるのはＰＣ版のページのみです。
ライブドアブログではスマホ用のテンプレートがカスタマイズできないので、スマホでこのようなボタンを表示することはできません。
通常のfacebookページ用のボタンを設置するしかありません。
