ほんっとにはじめてのHTML5とCSS3：（ちょっとメモ）FC2ブログにはてブと Google+1 のボタンをつける

（ちょっとメモ）FC2ブログにはてブと Google+1 のボタンをつける

最終更新日：2019年02月07日　（初回投稿日：2015年11月26日）

「はてなブックマークのボタンもつけて」とリクエストをいただいたので、先日この「ほんっとに..」に はてブとついでに Google+1 のシェアボタンもつけました。

注意：
Google+（個人向け）は 2019年4月2日にサービスを終了します - Google+ヘルプ
そのためGoogle+1 のシェアボタンを設置しても使えなくなります。

FC2ブログの管理画面では Twitter、Facebook、LINEで送るボタンしか設定できないため（2015年11月現在）、それ以外のシェアボタンは手動で設置する必要がありますので、その設置方法をメモっておきます。今さらってかんじですが、各SNSからコードを取ってきて貼る方法です。

FC2ブロガーじゃない方はごめん。
ただ、各SNSのシェアボタンの設置コードの取得はブログサービスは関係ないですし、Twitterのツィート数表示用の代替APIの情報や、 WordPressでのシェアボタン設置のリンクもあります。

本日のINDEX

FC2ブログでは管理画面でつけたものと同じ場所にならない
Twitterのツィートカウンターの廃止
1. Twitter のツィート数をどうしても残したい場合
FC2ブログに手動でSNSボタンを設置
WordPressでのシェアボタン設置

FC2ブログでは管理画面でつけたものと同じ場所にならない

FC2ブログ管理画面で設置したボタンと同じ場所に、手動でのシェアボタンを置けないんですね。
こんなふうに↓ FC2側で設定したシェアボタンと手動でつけたボタンの位置が分かれて、わかりづらくなりました。

FC2ブログで設置するシェアボタンは「拍手ボタンと同じ位置」しか選択肢はありません。その「拍手ボタン」は自動で書きだされるので、テンプレート上でその位置を確定するのはムリでした。

そこで、FC2側でのシェアボタンの設定を全部OFFにして、シェアボタンをすべて手動で同じ位置に並べることにしました。これでスッキリします。

FC2ブログ管理画面の「設定＞環境設定＞ブログの設定＞記事の設定」で、「有効にする」のチェックを全部はずし OFFにしました。

で、手動でシェアボタンを設置。このように全部ひと固まりに並びました。

ここまでは良かったのですが、続く↓（笑）

Twitterのツィートカウンターの廃止

11月21日に見ると Twitter のカウンターが無くなっていました。
やっぱりウワサは本当だったのねw（けっこう「我が道を行く」よね。Twitter。最近急に。）
参考サイト↓
持続的なプラットフォームのための難しい決断 | Twitter Blogs
Twitter ツイートボタン刷新／カウンター廃止は米国時間の11月20日に実施 -INTERNET Watch

Twitter だけカウンターが無いのは、統一感が無くて気持ち悪いので、全部のボタンのカウンターを取ることにしました。（そのうちまた戻すかもだけど、とりあえず今は）

Twitter のツィート数をどうしても残したい場合

「Twitter のツィート数を、どうしても残しておきたい」場合の情報も探してみました。

自分でプログラムを書いている自作ボタンのかた（上級者）向けの情報です。
ツィート数取得のための非公式API「count.json」を使っていたなら代替の「count.jsoon」を、
Twitter公式提供の「widget.js」を使っていた場合は、代替の「widgetoon.js」を使えばツィート数の表示ができるそうです。
parmy683 Blogさんが使い方をまとめてくださっています↓
●Twitterのツイート数取得API「count.json」の代替手段「count.jsoon」を使ってみた - parmy683 Blog
本家count.jsoonの使用方法ページはこちら↓
●count.jsoonのAPI使用方法／widgetoon.jsの使用方法
widgetoon.jsのサンプルページもありました↓
●widgetoon.js 使用サンプルコード

というわけで、前置きが長くなりましたが、
今回FC2ブログにシェアボタンを設置した方法を書いておきます↓

FC2ブログに手動でSNSボタンを設置

5つのシェアボタンの設置方法をメモっておきます。
Twitterはカウント無しのみですが、他のシェアボタンはカウンター有る無しを選べます。

すでにFC2ブログの管理画面でTwitter、Facebook、LINEのボタンを有効にしている場合は、OFFにします。FC2ブログ管理画面の「設定＞環境設定＞ブログの設定＞記事の設定」でOFF。
OFFにしたあと、ちゃんと非表示になっているか確認して、次の行程へ。

設置は単純な行程です。
１）各SNSのサイトで、シェアボタンのコードをゲットして、
２）FC2ブログ管理画面の「テンプレートの設定＞テンプレート管理＞HTMLの編集」で、直接テンプレートのHTMLに追加します。

このブログでは<%topentry_body> の下部に置きました。（<%topentry_body> はFC2ブログのテンプレート変数で、記事本文を表示する部分です。）ご自分がシェアボタンを置きたい位置にコードを追加しましょう。記事の上とかサイドバーでもいいね。

FC2ブログ以外のかたも、お使いのブログテンプレートに合わせてコードを置こう。
WordPressの場合は、プラグインを使ったほうが早いかも。

それでは、各SNSのシェアボタンのコードをゲットして、横に並べましょう。

Twitter
Facebook
はてなブックマーク
Google+1
LINE
ボタンを全部横に並べるCSS

Twitter

Twitterボタンのサイトでコードをゲットします。ログインしなくてもOK。

「ボタン大」をチェックして、ちょっと大きめのボタンにすることも可能。「ボタン大」なら高さ28px、普通のは高さ20pxです。
それ以外はほとんどデフォルトのままでOK。コードをコピーして使います。

Facebook

Like Button for the Web の Like Button Configurator でコードをゲットします。こちらもログインしなくてOK。
（クリックすると自動的に「日本語」ページが開くのですが、セレクタに不具合があるようなので、「English (US)」にしたほうがイイです。言語の切り替えボタンは画面下部にあります。）

URL to Like（記事のURL）は、適当なモノを入れておいて、あとで FC2ブログの変数 <%topentry_link> に書き換えます。これは各記事のURLを自動で書きだすFC2独自の変数です。
他のブログのかたもサービスに合わせて変更してください。

「Layout」で選ぶボタンの種類と「Include Share Button」のチェックの有る無しをまとめました。

「ほんっとに...」のFacebook部分のコードです。「data-layout="button"」にしました。

<div class="sns_s">
<div class="fb-like" data-href="<%topentry_link>" data-width="115" data-layout="button"
 data-action="like" data-show-faces="false" data-share="false"></div>
</div>

Facebookは、上記以外に <body>タグの直後にこちらのソースを追加する必要があります。

<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/ja_JP/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

はてなブックマーク

はてなブックマークボタンの作成・設置について でコードをゲットします。ログインしなくてOK。

ページのアドレス（記事のURL）とページのタイトルは、適当なモノを入れておいて、あとで FC2ブログの変数 <%topentry_link> と <%topentry_title> に書き換えます。
<%topentry_link>は各記事のURLを、<%topentry_title>は記事のタイトルを自動で書きだすFC2独自の変数です。他のブログのかたもサービスに合わせて変更してください。

「ボタンのタイプ」と「ブックマーク数」のプレビューをまとめてみました。

「ほんっとに...」のはてブ部分のコードです。ボタンは「standard-noballoon」にしています。

<div class="sns_s">
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" 
data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard-noballoon" 
data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" 
alt="この記事をはてなブックマークに追加" width="20" height="20" style="border:none;" />
</a>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" 
charset="utf-8" async="async"></script>
</div>

Google+1（2019年4月にサービス終了）

注意：
Google+（個人向け）は 2019年4月2日にサービスを終了します - Google+ヘルプ
そのためGoogle+1 のシェアボタンを設置しても使えなくなります。
実際には、2019年3月7日に「Google+ API」はシャットダウンされるそうです。
以下の記事は残しておきますが、2019年2月時点でGoogle+1 のシェアボタンは利用できなくなっています。（2019年2月7日記）

+1 Button | Google+ Platform for Web | Google Developers でコードをゲットします。ログインしなくてOK。

ボタンの「サイズ」4種類と「+1情報」の表示の3種類（インライン・バルーン・なし）を選ぶだけ。プレビューを見て表示したいモノになったら、コードをコピーするだけです。
タイトルやURLは記述しなくても自動で書き出してくれます。

コードはとてもシンプル。
<head>要素内か、<body>の一番下（</body>の直前）に貼るJabaScriptのコードと、ボタンを置きたい位置に貼るHTMLのコードの2つに分かれています。
JabaScriptコードを貼る位置に注意。（ごそっとまとめてボタンの位置に貼っても、何も起きないからね）

LINE

設置方法｜LINEで送るボタン でコードをゲットします。
ボタンのタイプを選ぶだけで、他は何も触らなくても自動で書き出してくれます。

LINEで送るボタンは、スマホ版のテンプレートのみに設置します。PC版には無しで。

ボタンを全部横に並べるCSS

各ボタンのコードを囲んだ要素に CSSで「display:inline」や「display:inline-block」を指定すれば、ボタンが横に並びます。

この「ほんっとに..」では、各ボタンのコードを div要素で囲みました。
ボタンによって上や右の空きがバラバラなので marginで微調整しています。

<div id="sns">
<style scoped>
div#sns {margin:2em 0;}
div#sns div.sns_s {display:inline-block; margin:3px 5px 0 0;}
</style>
<!--Twitter-->
<div class="sns_s"><!--ここにTwitterのコードを貼ります--></div>
<!--FB-->
<div class="sns_s" style="margin-top:0"><!--ここにFacebookのコードを貼ります--></div>
<!--はてブ-->
<div class="sns_s" style="margin-right:0;"><!--ここに はてブのコードを貼ります--></div>
<!--G_Plus-->
<div class="sns_s"><!--ここにGoogle+1のコードを貼ります--></div>
<!--LINE（LINEはスマホ版のテンプレートのみに書きます）-->
<div class="sns_s" style="margin:3px 0 0 0;"><!--ここにLINEのコードを貼ります--></div>
</div>

各ボタンのコードを li要素で囲んでもイイかも。
li要素を使う場合は「list-style:none」でリストのマーカーが出ないようにして。

<div id="sns">
<style scoped>
div#sns {margin:2em 0;}
div#sns ul  {margin:0; padding:0;}
div#sns ul.sns_s li {display:inline-block; list-style:none; margin:3px 5px 0 0;}
</style>
<ul class="sns_s">
<li><!--ここにTwitterのコード--></li>
<li><!--ここにFacebookのコード--></li>
<li><!--ここに はてブのコード--></li>
<li><!--ここにGoogle+1のコード--></li>
<li><!--ここにLINEのコード--></li>　<!--LINEはスマホ版のテンプレートのみに-->
</ul>
</div>

WordPressでのシェアボタン設置

＊Web Design 覚え書き＊ のほうで、WordPressでのシェアボタン設置方法を書いています。ご興味あるかたはこちらもご覧ください。
プラグイン「Simple Share Buttons Adder」を使った例です。
このプラグインには「はてなブックマーク」は含まれていませんので、はてブだけはアイコンを作って手動ではめ込んでいます。
→プラグイン Simple Share Buttons Adderで記事にシェアボタンを設置し「はてな」は手動で入れてみた

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-02-07（Thu）│
投稿日：2015-11-26（Thu）│
カテゴリ：ちょっとメモ

Pagetop ↑

« next ホーム prev »

コメントの投稿