ニフティが提供しているブログサービス "ココログ"。
個人的にこのブログは非常に使い勝手のよいサービスなのだが、フェイスブックの「いいね」機能が付いていないのが唯一の致命点だ。
ソーシャルネットワークの時代だというのにね...
もっとも、これは月額300円くらい支払えば解決できてしまう問題なのだが、やはり少し手間がかかってでも固定費を節約したいという方が多いのではなかろうか?
そこでネットで調べてみたところ、どうやらできるみたいなことが書いてあったので試しにやってみた。
で、結論から言うと、
できました
やってみたけどうまくできなかった方は参考にしてみてほしい。
この通りにやればできる、はず...
頑張って
※これをやってもどうしてもできない方は一番最後にショートカットを載せたので、そちらも合わせて参考にしてみてほしい。
*****
【フェイスブックでの作業】
まず、フェイスブックにログインした状態で以下のサイトにアクセスする↓
https://developers.facebook.com/docs/plugins/like-button/
この中から好きなレイアウトを選択し、左下の「Get Code」をクリックするとマジでわけのわからない暗号のような画面(ソースコード)が表示される。
ここで、ソースをメモ帳やワードなどにコピペする
------------
<div
id="fb-root"></div>
<script>(function(d, s, id) {
var
js, fjs = d.getElementsByTagName(s)[0];
if
(d.getElementById(id)) return;
js
= d.createElement(s); js.id = id;
js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script',
'facebook-jssdk'));</script>
------------
<div class="fb-like" data-href="●●●●●●" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
------------
※上半分はこのまま使用可能。下半分は黒い●●●●●●の部分はあなたのURLをペーストしてほしい。間違えて私のURLを入れてしまうと、あなたのブログに反映されず、私のブログにいいねが付いてしまうので注意のこと!
※上記の例の場合、http://yudy-pon.cocolog-nifty.com/blogの部分が●●●●●●に該当する。
*****
【ココログでの作業】
ココログにログイン → 管理タブをクリック → 記事の編集をクリック。
「いいね」ボタンを付けたい記事をクリックすると編集画面が出るので、記事右上の「HTMLの編集」をクリックする(これから書く記事はそのまま右上にボタンがある)。
すると再び、暗号のような...わけのわからない画面が表示される(HTMLの編集画面)。
この編集ページの1番下など適当な箇所に先ほどのソースをペーストする。
そして確認 → 保存をクリック。
はい、うまくいかない(笑)
私はここで完全にバンカーにハマってしまった
でも大丈夫、たぶんここはみんなハマるところなので...
*****
【どうしたらうまくいくのか?】
で...ここからが本題なのだが、ソースを良く眺めていただくと、すべての記事★(あなたが書いたブログ記事)は、
<p
class="MsoNormal"><span lang="EN-US">★★★★★★</span></p>
のように「>」「<」に挟まれていることがおわかりいただけると思う。
この、「>」と「<」の間(★★★★★★の部分)に先ほどの上半分の
------------
<div
id="fb-root"></div>
<script>(function(d, s, id) {
var
js, fjs = d.getElementsByTagName(s)[0];
if
(d.getElementById(id)) return;
js
= d.createElement(s); js.id = id;
js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script',
'facebook-jssdk'));</script>
------------
ソースをそのままコピペする。
すると、以下のようになる。
------------
<p
class="MsoNormal"><span lang="EN-US">
<div
id="fb-root"></div>
<script>(function(d, s, id) {
var
js, fjs = d.getElementsByTagName(s)[0];
if
(d.getElementById(id)) return;
js
= d.createElement(s); js.id = id;
js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</span></p>
------------
あとは、その下に残り下半分のソースをコピペする。
------------
<div class="fb-like"
data-href="●●●●●●"
data-layout="standard" data-action="like"
data-show-faces="true" data-share="true"></div>
------------
すると、以下のようになる。
------------
<p
class="MsoNormal"><span lang="EN-US">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</span></p>
<div class="fb-like" data-href="●●●●●●" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
------------
これで「確認」→「保存」をクリックすると、うまくいく。
*****
【手動設定の問題点】
上記の方法で進めるとたしかにうまくいく。
めでたしめでたし。
が、しかし。実はまだ1つだけ問題がある...
たとえば私のブログのURLは、"http://yudy-pon.cocolog-nifty.com/blog/" なのだが、これをコピペすると、1つの「いいね」ボタンをクリックすると、すべてのボタンに「いいね」が付いてしまうという問題が生じる。
理由は、ココログの構造が、
ブログトップページ/西暦/月/記事コード
↓
ブログトップページ
∟西暦
∟月
∟記事コードx
∟記事コードy
∟記事コードz
のようになっているためだ。
解決策は、非常に面倒くさいのだが、各ブログに対応するURLを1つずつコピペする必要がある。
たとえば、私が最初に書いた「数年ぶりに...」というタイトルのブログを例にあげて説明すると...
このブログ記事のURLは、http://yudy-pon.cocolog-nifty.com/blog/2013/11/post-b4c1.htmlである。
ゆえに、「"」と「"」に挟まれた●●●●●●の部分には、
http://yudy-pon.cocolog-nifty.com/blog/ではなく、
http://yudy-pon.cocolog-nifty.com/blog/2013/11/post-b4c1.htmlに対応するものを入れてあげる必要がある。
URLがわからなくなってしまったら、右側の機能の中にある「このブログを見る」をクリックし、対応するページのURLをコピペし、あとは「確認」→「保存」→「確認」→「保存」のひたすら繰り返しとなる。
*****
【完成イメージ】
完成イメージは以下のとおりとなる。
------------
<p class="MsoNormal"><span lang="EN-US">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</span></p>
<div class="fb-like" data-href="http://yudy-pon.cocolog-nifty.com/blog/2013/11/post-b4c1.html" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
------------
どうしてもやり方がわからない方は上記をコピペし、後で編集すればよい。
いきなりショートカットで完成イメージを書いてしまうと「なぜうまく行ったのか?」を理解できずに終わってしまうので、あえて最後に書くことにした。
*****
【超簡単に設定する方法】
ということでショートカットの方法。
ココログにログイン → 管理タブをクリック → 記事の編集をクリック。
「いいね」ボタンを付けたい記事をクリックすると編集画面が出るので、記事右上の「HTMLの編集」をクリックする(これから書く記事はそのまま右上にボタンがある)。
HTMLの編集画面が表示されるので、この編集ページの1番下など適当な箇所に以下のソースをペーストする。
------------
<p class="MsoNormal"><span lang="EN-US">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</span></p>
<div class="fb-like" data-href="http://yudy-pon.cocolog-nifty.com/blog/2013/11/post-b4c1.html" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
------------
そして確認 → 保存をクリック。
保存後に編集画面に戻り、記事右上の「HTMLの編集」を表示させる。
「"」と「"」に挟まれた●●●●●●(http://yudy-pon.cocolog-nifty.com/blog/2013/11/post-b4c1.html)の部分にあなたが投稿した記事のURLをコピペして保存をクリック。
以上。
メチャメチャ面倒くさいけど、頑張って!
ありがとうございました。