ワードプレスにソーシャルボタンプラグインSharebar(シェアバー)を設定する

本日は最近良く見かける、ページをスクロールしてもソーシャルボタンがそれに合わせてついて来てくれる、share barというプラグインを実装してみようと思います。
固定型と比べますと、ソーシャルメディアからのアクセス流入数が10%改善された、という報告もあるそうですよ。

目次

1.Sharebarをインストールする

ダッシュボードからプラグイン>新規追加で検索フォームにSharebarと入れて検索します。
最初の方に出てきますので、インストールし有効化します。

2.Sharebarに「はてなブックマーク」ボタンを追加する

はてなブックマーク等、リストに無いボタンを追加する方法をご説明します。

設定>Sharebarへ行き、Available Buttonsから表示させたいボタンにチェックを入れればOKなのですが…微妙なラインナップなので、取り敢えずは入れておきたい はてなブックマーク を追加作成してみます。

別ウィンドウで、はてなブックマークのページを開きます。

sb_01

 1.の、ボタンを設置するページの情報を入力、のURLとタイトル欄は空白にしておきましょう。
 ここを指定してしまうとユーザーが個別の記事をブックマーク出来なくなります。

 2.のボタンのタイプを選択します。

 3.に表示されたソースをコピーして、ワードプレスに戻ります。
 Add New Buttonをクリックします。

sb_02
  
 Name:名前とPosition:表示位置を入力したら
 Enabled?にチェックを入れます。
 Big Button, Small Buttonそれぞれに先ほどコピーしたソースをペーストすればOKです。

sb_03

 一覧に戻ると、ちゃんとはてぶボタンが出来上がっています!
 表示させたいボタンにチェックを入れたら、リストの下にあるUpdateボタンを押します。

sb_04
 はてぶのボタンが出来た♪

もし、チェックを入れていないのに必要の無いボタンが表示されている様でしたら、
ボタンの一覧表に戻って、表示させたく無いボタンの右端のActionsからEditへ行き、
Enabled?のチェックを外せばOKです。

3.Sharebarのカスタマイズ

さて、デフォルトでは各種ボタンの大きさがまちまちなので、ずれていたり枠に収まりきれなかったりで少々調整が必要です。
Sharebar設定画面の右上に表示されているSettingsから設定します。

widthを調整する

このサイトでは 
Sharebar Width を 94 に変更
settingで背景色やボーダー色を変えて付箋風にカスタマイズしてみました。
カラーピッカーが便利ですね!

sb_05

これでもまだ、facebookの表示がずれているので、個別に調整します。
facebookボタンのEditから、それぞれのボタンのソースの中の
overflow:hidden;width:○○px;height:○○px;
の数値を変えて微調整します。

sb_06

4.Sharebarとワードプレス関数 get_the_excerpt の干渉?によるバグの消し方補足

ところで、Sharebar を有効化したことで、思わぬバグが出てしまいました。
サイトのトップページの「最新情報」のテキストの最初の部分に
TweetEmail TweetEmai…
なる文字列が何故か表示される様になってしまったのです。Σ(゚皿゚)

どうやら最新情報欄に使っているワードプレスの関数、get_the_excerpt と干渉している様なので、
get_the_excerptget_the_content で代用して問題を回避したあと、
(詳細はこちら → 2013/4/26勉強会“Sharebar と get_the_excerpt の干渉を回避する”
さらに以下の様にcssを書き足しました。

a:after は疑似要素です。
これに、
content: “”; → タグが書かれていた場合は””(ブランク=空白)
として、タグを表示させない様にしました。
応急処置ですが、これでバグは表示されなくなりました。

使用するプラグインが増えてくると、互いに干渉してバグが出ることがあるんですねぇ。
調べるのは大変ですが、こういった場合の対処法を試行錯誤しながら解決することは大変勉強になります!

カテゴリー: study, プラグイン, 勉強会 | タグ: , , , | 投稿日: | 投稿者:
かおりんご

かおりんご について

マルチメディアスクールWAVE立川校卒業。 タカハシ先生と愉快な仲間達と共に倶楽部りんごを結成、絶賛修行中。 WAVE名物だったライブ授業、りんごでは毎週4時間みっちりやってます! ネットで何でも学べる時代ですが、やはりライブで学ぶことに勝るものはありませんね。 りんご結成時には活動拠点を探して東奔西走。運営、スケジュール管理をやっています。 好きなもの: overflow:hidden、SVG、ライブトレース、流行り物(笑)、ねこ、幕末etc。

ワードプレスにソーシャルボタンプラグインSharebar(シェアバー)を設定する」への2件のフィードバック

  1. ピンバック: ワードプレス ソーシャルボタンの追加について。 | アフィリエイト情報まとめ

  2. ピンバック: プラグインとの衝突(干渉)回避。過去記事をアイキャッチ付きで表示するショートコードの場合 | 極楽ひだまり保育園

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.