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

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

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

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

本日のINDEX
  1. FC2ブログでは管理画面でつけたものと同じ場所にならない
  2. Twitterのツィートカウンターの廃止
    1. Twitter のツィート数を どうしても残したい場合
  3. FC2ブログに手動でSNSボタンを設置
    1. Twitter
    2. Facebook
    3. はてなブックマーク
    4. Google+1
    5. LINE
    6. ボタンを全部横に並べるCSS
  4. SHARE+BUTTONS で簡単にシェアボタンを
    1. プラグインカテゴリのスペースに何も表示しないで使いたい
  5. 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にしたあと、ちゃんと非表示になっているか確認して、次の行程へ。

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

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

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

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

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

Twitter

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

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

Facebook

Like Button for the WebLike 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

+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>

SHARE+BUTTONS で簡単にシェアボタンを

SHARE+BUTTONS は、簡単にブログにシェアボタンを設置できるブログパーツです。
シンプルなアイコンで、複数のSNSのボタンを設置でき、右か左のサイドに固定表示します。
これね。

*ご注意*
この項の「SHARE+BUTTONS(http://communityflow.net/ja/)」は、現在は残念なことに使用できません。(リンク先が無くなっています)

本家のサイトはこちら。
Share Buttons | AddThis
アカウントを作って使用します。ご興味ある方はどうぞ。

せっかくなので記事は残しますが、読んでも役に立たないので(笑)次の項へこちらからジャンプ↓
・本日の最後のメニュー→ 5. WordPressでのシェアボタン設置

使い方です。まずは SHARE+BUTTONS サイトでコードをゲットします。

「CODE」表示部分の「設置方法」をクリックすると、各ブログサービスを選んでそれぞれの設置方法を見ることができます。

ゲットしたコードをFC2ブログに貼る方法は簡単です。(他のブログサービスのかたは上のリンクから設置方法を)
FC2ブログ管理画面の「プラグインの設定>公式プラグイン追加」で、画面なかほどの「フリーエリア」を見つけて「追加」をクリック。
「フリーエリア」という名前のプラグインの「詳細」をクリックして、

一番下の「フリーエリア内容の変更」のスペースに、先ほどゲットしたコードを貼ります。

プラグインカテゴリのスペースに何も表示しないで使いたい

この設置方法では、シェアボタンの他に「プラグインカテゴリ」のスペースにプラグインとしての表示も出てしまいます。
この「ほんっとに..」では、サイドバーに↓下図のように表示が出てしまいました。

この部分をCSSで display:none にすると、シェアボタン自体も無くなってしまいます。
そこで、height:0; text-indent:-9999px; padding:0 で非表示(あるんだけど、ブラウザウィンドウ上では見えない状態)にしました。

使っているテンプレートによってCSSの指定は異なりますが、例としてこの「ほんっとに..」での指定をご紹介しておきます。
このブログのテンプレはサイドバーにプラグインスペースがあり、このような構造になっています。

<div id="sidemenu">
  <dl class="sidemenu_body">
    <dt class="plg_title">プラグインタイトル</dt>
    <dd class="plg_body">プラグイン内容</dd>
  </dl>
  <dl class="sidemenu_body">
    <dt class="plg_title">プラグインタイトル</dt>
    <dd class="plg_body">プラグイン内容</dd>
  </dl>
  <!--以下、この↑ dl要素が繰り返されます-->
</div>

新規に作った SHARE+BUTTONS の dl要素は、上から10番目にありましたので、以下のCSSで非表示にしました。

div#sidemenu dl.sidemenu_body:nth-child(10) {
   height:0;  /*dl要素の高さを0にします*/
   text-indent:-9999px;  /*それでもテキストは残るので、この指定で画面からはずします*/
   padding:0;}  /*paddingを指定していたので、これも0にします*/

自動で書きだされる要素をセレクタにするには、E:nth-child( ) という擬似クラスを使えば可能です。
この擬似クラスについては【3】id とか classって何?(セレクタの「種類」を知っておこう)をご覧ください。

ちなみに、プラグインを使わずに SHARE+BUTTONS を表示する方法も試してみました。
プラグインとしての記述「<div class="plugin-freearea" &align> &freearea </div>」と、ゲットしたコードさえあれば、シェアボタンが表示されるようなので、テンプレートの HTMLの下部に、この必要なソースを貼付けるだけでも動作しました。まあ邪道っぽいので、実際はこれで使ってませんけどね。
この場合、このままだと &freearea というテキストは表示されてしまうので、テキストカラーを背景色と一緒にするか、text-indent:-9999px などのCSS指定が必要です。

<div class="plugin-freearea" &align style="color:#c1c1f5"> <!--color を背景色と一緒にしています-->
  &freearea
</div>
<!--以下は↓ご自分がゲットしたコードに差し替えて-->
<script src='http://communityflow.net/s.js' type='text/javascript' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
<!--
sb_show(1, '6d8fdd', '10', '1', 'right', 188, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0);
-->
</script>

WordPressでのシェアボタン設置

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

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

テーマ : Twitter
ジャンル : コンピュータ

tag : FC2ブログカスタマイズ

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.