image10

こんにちは、赤ペソ先生(@spinf60 )です。

今回はライブドアブログに、バイラルメディア風FACEBOOKいいね!ボタンを設置するお話です。

※スマホで読まれている方は、下の方にあるコードが正常に表示されないです。ページ一番下の表示切替をパソコンにすれば見れると思いますが、この記事に関してはパソコンからご覧になることをおすすめします。


SPONSORED LINK


FACEBOOKのいいね!を増やしたい!

ブログにはPV数(閲覧者数)という指標が有ります。

PV数が増えることで自分のブログが検索エンジンや訪問者に評価されているのは実感としてわかるのですが、それとは別の指標も気になります。

それはSNSのフォロワー数。ごく簡単に言うとTwitterやFACEBOOKのファンの数とでもいいましょうか。

このブログ赤ペソ先生の備忘録も一応FACEBOOKページがあります。

備忘録 FACEBOOKページ

このブログの方向性がいまだに決まっていないので大々的に告知してないせいか、FACEBOOKのフォロワー(いいね!)の数、ものすごく少ないです(-_-;)。

ですがこのブログも、開設から1年近く経過し、PV数も月3万を超えるようになってきました。

自分メディアの主催者?としての自覚が出てきた今、FACEBOOKのいいねを増やしたい!と思ったわけです。

そんなわけでライブドアブログにバイラルメディア風のいいね!ボタンを設置してファン獲得するぞ!!


参考にしたブログ

WordPressではプラグインという追加機能で簡単に設置できるらしいのですが、ライブドアブログにはそんな便利なものありません。

と言うことで調べたところ、こちのブログに遭遇しました。

「コピペで導入できるなら最高じゃないですか!!」と、速攻コピペしたんですが、記事を書かれたブロガーさんの設定がそのまま残っていて、いいね!の数もそのままになってたので、変更する必要がありました。


そこで他に参考にできるところが無いか調べたところ、はてなブログでの導入方法がありましたので、こちらの記事と前述のブログを組み合わせて導入したところ、ちゃんと表示されるようになりました!

ちょっと前置きが長くなってしまいまいしたが、ここからライブドアブログに導入する方法です。


ライブドアブログへの導入方法【ほぼコピペでOK】

CSS

CSSは ブログ設定 → カスタマイズ → CSS の入力欄に記述

CSSに関しては変更する部分はありませんので、そのままコピー&ペーストでOK

css

    /* 記事がよかったらいいねPC */
.p-entry__push {
margin-bottom: 20px;
display: table;
table-layout: fix;
width: 100%;
background-color: #2b2b2b;
color: #fff;
}
.p-entry__pushThumb {
display: table-cell;
min-width: 240px;
background-position: center;
background-size:cover;
}
.p-entry__pushLike {
display: table-cell;
padding: 20px;
text-align: center;
vertical-align: middle;
line-height: 1.4;
font-size: 18px;
}
.p-entry__pushButton {
margin-top: 15px;
display: inline-block;
width: 200px;
height: 40px;
line-height: 40px;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.p-entry__pushButtonLike {
line-height: 1;
}
.p-entry__note {
margin-top: 15px;
font-size: 12px;
color: #999;
}
.p-entry__tw-follow {
margin-bottom: 10px;
background: #f4f4f4;
width: 100%;
padding: 15px 0;
}
.p-entry__tw-follow__cont {
text-align: center;
font-size: 15px;
color: #252525;
}
.p-entry__tw-follow__item {
display: inline-block;
vertical-align: middle;
margin: 0 15px;
}


個別ページに表示するためのコード

個別ページの設定は、 ブログ設定 → カスタマイズ → 個別記事ページ にコピペ。

ただし、FACEBOOKページのURL・TwitterのアカウントID等、入力で変更する必要が有ります。

個別ページ

●~●の部分をご自分のものに変更してください。


この記事が気に入ったら
いいね!してね

最新情報をお届けします

Twitterで●名前●をフォローしよう!


貼り付ける場所は、関連記事を表示する部分。

  <$RelatedArticles$>

の後ろに挿入するのがいいかもしれない(わたしは後ろに貼りました)。


ちなみに

  <$ArticleFirstImage$>

の部分で、ブログ個別記事内の最初の画像を取得するようになっています。


FACEBOOKのイイね!ボタンを表示するためのコード

以下のコードは、 ブログ設定 → カスタムJS → body内 にコピペ。

カスタムJS

こちらのコードも変更する部分はないので、そのままコピペでOK。すでに表示するようにしている方は貼り付ける必要ないです。

  


これらを貼り付けて保存すれば、左に記事内の最初の画像が表示された いいね!ボタンが設置されるはず!

いいね


まとめ

これで、いいね!が増えるといいんですけれど……このブログ、アクセスの6割はスマホからで、今回の設定はスマホ表示に反映されないので、ものすごく残念です。

パソコンやタブレットでご覧になられた方。ぜひイイね!してください(笑)

そんなわけできょうの備忘録はここまで。
最後までご覧いただきありがとうございます。
またどこかの備忘録で(^_^)/~


読者登録すると、ブログ更新した時にLINEでお知らせします♪


【オススメ】▶赤ペソ先生が利用しているサービスまとめ


SPONSORED LINK


この記事が気に入ったら
いいね!お願いします♪

最新情報をお届けします

Twitterで赤ペソ先生をフォローしよう!