文系にもできた！ココログフリーでfacebookのいいね！ボタンをTwitterの横に表示させて、なおかつ一括管理する方法。

○文系にもできた！ココログフリーでfacebookのいいね！ボタンをTwitterの横に表示させて、なおかつ一括管理する方法。

ココログを利用していて、「Twitterのボタンは付いてるのに、facebookのいいね！ボタンが付いてないのが残念だなぁ」と思うことはありませんか？

わかりやすいがお金か手間がかかる従来の方法

ネットで設置方法を検索してみると、

• 有償オプションで上級テンプレートを利用してフッタを編集する。
  ココログフリーの場合：オプションパックアドバンス1200円／月＋税
  @nifty接続会員の場合：ココログプロ950円／月＋税
• エントリー毎にひとつづつ設置する。

があります。

前者は手間は少ないがお金がかかる、後者はお金はかからないが手間がかかる。いずれも一長一短です。

これらのやり方は、例えばこちらで説明されています：

○ココログで twitter のツイートボタン、facebook のいいね！ボタン、Google+ の+1ボタンを追加する方法: ある SE のつぶやき

○コラム　その②【ココログにフェイスブックの「いいね」機能を付ける方法】: サヤ取りブログ～ロングショートを用いたヘッジ取引～

でもやっぱり、手間が少なくお金もかからないのが理想ですよね。

設置にあたっての条件は：

• お金は使いたくない。
• プログラミングの知識がなく、今後も勉強するつもりがなくてもできる。
• ボタンの表示を一括管理したい。設置は一度だけにして、ページのURLを勝手に取得して勝手にボタンに反映、表示させるようにしたい。

ちなみに、私は根っからの文系で、プログラミングの知識はなく、htmlタグが一応なんとか理解できる程度です。したがって、以下の方針で行くことにしました：

• フッタを編集しない。
• ネットで見つけたプログラムを切り貼りして乗り切る。

ココログフリーにfacebookのいいね！ボタンを設置する方法

結論を言いましょう。下記のコードを、「マイリスト」の「メモ」に記入してサイドバーにレイアウトしましょう。ただし、嫌な言い方ですが、あくまでも自己責任で：

<script type="text/javascript"> var url = encodeURIComponent(location.href); message = '<iframe src="http://www.facebook.com/plugins/like.php?href=' + url + '&width=100&layout=button_count&show_faces=false&action=like&colorscheme=light&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden;width:100px;height:20px;" allowTransparency="true"></iframe>'; function getFirstElementByClass(searchClass, rootElement, tagName) { if (searchClass == null) { return; } if (rootElement == null) { rootElement = document; } if (tagName == null) { tagName = "*"; } var allElements = rootElement.getElementsByTagName(tagName); var returnElement = null; for (i = 0; i < allElements.length; i++) { if (allElements[i].className == searchClass) { returnElement = allElements[i]; break; } } return returnElement; } function addMessage(element, message, valign) { if (element == null || message == null) { return; } if (valign == "top") { element.innerHTML = message + element.innerHTML; } else { element.innerHTML = element.innerHTML + message; } } function onLoadListener(e) { addMessage(getFirstElementByClass("entry-footer-links-twitter", document, "span"), message,"top"); } if (window.addEventListener) { window.addEventListener("load", onLoadListener, false); } else if (window.attachEvent) { window.attachEvent("onload", onLoadListener); } // </script>
　

このページの下のほう、Twitterボタンの横にいいね！ボタン、ちゃんと出てますよね？

上のコードは、JavaScriptとiframeを使って以下のことをおこないます：

1. 現在表示さているページのURLを取得。
2. 取得したURLをiframe内に代入。
3. iframeの表示位置を<span class="entry-footer-links-twitter">...</span>内に指定。

中盤以降のJavaScriptは、ひょっとしたらもっと合理化できるのかもしれませんが、私はほとんど意味すらわかっていません。だって、文系だもの。もちろん、わからなくても設置できます。

ボタンが不要になったら、上のコードを削除することで、全ページのボタンがいっぺんに消えます。

応用編

下記は応用編なので、意味が解った人だけ、必要があればチャレンジしてください。

• iframeの部分にコードを書き加えることで、Google+やmixiなどのボタンも表示させることができます。
• コードの getFirstElementByClass("entry-footer-links-twitter", document, "span") の部分を書き換えることで、表示位置を任意の場所に変更できます。

問題点

現在表示されているページのURLを取得して表示しているので、

• トップページが表示されている際には、トップページのURLが反映され、個別のhtml書類のURLは反映されない。

という問題点があります。

個別ページのURLを取得する方法をご存知の方は、ぜひご教示を。

※参考リンク：

本エントリーは、下記のサイトを参考にしました：

○Facebook: 1. Facebookの「いいね！」ボタンの設置方法 - [YENLAND] Library：ビジネス図書館

○ココログフリーで記事下に「Google AdSense」広告を表示する（詳細編）: Thank Thee!

○＃JavaScript（関数の結果を指定した位置に表示させるには）: 好きなものあれこれ

---

当ブログ内の人気記事

---

検索用語を入力 検索フォームを送信