こんばんは。ユウです。
自分のブログを書く参考にするため、いろいろな人のブログを見る機会が増えています。
そこで「これ、ええやん」と思ったものを自分のブログに取り入れることができないかと日々、試しているところです。
ツイッターのフォローボタンを設置してみた
多くの人のブログでよく見かけるものの一つにツイッターのフォローボタンがあります。
↓こんなやつです。↓
よろしければ、押してフォローしてください(^^)
調べてみると、わりと簡単だったので、さっそく設置してみました。
記事の下に設置する方法
このようなフォローボタンは記事の下に設置されている場合が多いです。
記事を読み終わった人が押してフォローしてくれるのを狙ってのことでしょう。
というわけで、私も同じように記事の下に設置してみたいと思い、さっそく取りかかりました。
手順は次のとおりです。
１ コードを取得する
まずはツイッターの公式サイトからコードを取得します。
ツイッターにログインした状態でこちらをクリックしてください。
簡単にコードが取得できます。
２ コードを埋め込む
取得したコードをブログ記事の下に埋め込めば完了です。
簡単ですね。
ただし、これだけでは記事を書くたびに、いちいちコードを埋め込まなければならないので、面倒です。
そこで、そんなことをしなくても記事を書くだけで常にその記事の下にフォローボタンが表示されるようになる方法をお伝えします。
３ デザインをカスタマイズする
Livedoorブログのマイページから「ブログ設定」→「ＰＣ」と移動し、「カスタマイズ」というタブを選択します。
さらにその下にあるタブの中から「個別記事ページ」を選択します。
<$RelatedArticles$>という部分を探します。
ここが関連記事が表示される部分ですので、その上に先ほど取得したコードを貼り付ければ、記事の下にフォローボタンが表示されます。
上のボタンではフォロワー数が表示されていますが、これだけではフォロワー数は表示されません。
フォロワー数を表示したい場合は、コードの中の「data-show-count=”false“」の「false」を「true」に変更します。
テンプレートによっては記事本文と関連記事との間に他のコンテンツが入る場合もありますので、好みの位置に配置するには調整が必要な場合があります。
よく分からない場合は、変更する前にバックアップを取って試してみると良いです。
これで作業は終了です。
と言いたいところですが、これだけではＰＣで見たときにしかフォローボタンが表示されません。
LivedoorブログはＰＣ版とスマホ版で異なるテンプレートが使われているためです。
そのため、スマホ版での設定も必要になります。
４ スマホ版の設定をする
とは言っても、スマホ版のテンプレートはカスタマイズができないので、パーツを挿入することになります。
Livedoorブログのマイページから「ブログ設定」→「スマートフォン」と移動し、「レイアウト」というタブを選択します。
さらにその下にあるタブの中から「個別記事ページ」を選択します。
表示されるアイテムの中に「Twitterでフォロー」を選択し、追加します。
「記事本文」の下に追加すると良いでしょう。
以上で作業は終了です。
ツイッターのフォローボタンが設置されました。
