Scrolling Social Sharebar スクロールの動きが良い感じのソーシャルメディアボタンを作れる

< 2013-02-28 記事を修正しまし: facebookのボタンについて >

ソーシャルメディアボタン。ブログと連携する効果は大きいです。このイイねとかのボタンを記事のどこに配置するのかも悩みます。

画面のスクロールについてくるタイプが増えています。早速、当サイトもプラグインを導入しました。利用したのはScrolling Social Sharebar です。動きが絶妙で良い感じです。ただ、どうもマイナーな様子。でも使い勝手は良く紹介します。

スクロールと一緒に

スクロールと一緒についてくるので、クリックしてもらいやすく、ボタンの配置場所に悩まなくても良くなります。この種類のプラグインは、Sharebarが有名です。

今回紹介するScrolling Social Sharebar は、Tweet, Like, Google +1 and Shareと同じ作者さんなので、これを使い慣れていると良い感じで使えます。一番良い点は画面の配置位置が自由に設定できます。これが気に入りました。

インストール

管理画面の「プラグイン」ー「新規追加」で、Scrolling Social Sharebarと入力して検索します。後はそのままインストールします。今まで使っていたTweet, Like, Google +1 and ShareやWP Social Bookmarking Lightとは同時に使えます。

screenshot022602

設定

Tweet, Like, Google +1 and Shareと設定画面が同じです。使い慣れていると助かります。表示するページの設定からします。

大きなソーシャルボタンをブログに設置!Tweet, Like, Google +1 and Share | affiliate hack!

Where to Display

  • Dispaly on Post — 投稿(単一)記事
  • Dispaly on Page — 固定記事
  • Dispaly on HomePage — (あれ?どこに表示されるの?)

普通、一番上のDispaly on Post でいいと思います。

Select Icons to display

  • Display Facebook Like
  • Display Twitter 
  • Display Google +1
  • Display Linkedin
  • Display Stumbleupon
  • Display Facebook Share
  • Display Custom Buttons
  • Display Addthis Button

ここでは、標準の Facebook Likeが表示の崩れがあるので、使いません。Twitterはユーザー名を入力するとOKです。

screenshot0226003

はてなブックマークもないので、追加します。

facebook

Like Button – Facebook開発者

このサイトからボタンを作成します。作り方はこちらが、「いいね!」ボタンを設置しよう | Facebook Guide 参考になります。HTML5のコードを作ります。2つ別々にコードが出力されます。下の方のコードを書き換えます。

iframe001

HTML5ではコメント入力画面の表示が上手くできません。iframeのボタンを使います。サイトのURLを動的に渡すために、%%URL%%タグを使います。

変更箇所は、ボタン作成時に入力したサイトURLの部分です。下にコードを示します。

[html]
<iframe src="//www.facebook.com/plugins/like.php?href=%%URL%%&amp;
[/html]

Add your own Custom Buttonsのカラムに貼り付けます。これでfacebookボタンが表示されます。

screenshot0226004

なお、HTML5の場合、「いいね」を押すとコメント枠が開くのですが、下のように表示が崩れて操作できなくなりました。残念ですが使えません。

lile001

はてブ

はてなブックマークもこのはてなブックマークボタンの作成・設置についてから作成し、サイトのURLとタイトルを動的に渡すために、%%URL%%タグ・%%TITLE%%を使います。

[html]
a href="http://b.hatena.ne.jp/entry/%%URL%%" class="hatena-bookmark-button" data-hatena-bookmark-title="%%TITLE%%"
[/html]

こんな風にします。

で、はてブのコードを貼り付けるのですが、2つ目のカスタマイズボタンを入力するカラムがありません。facebookとはてブのコードを[BUTTON]タグでつないで入力します。

[text]
facebook code
[BUTTON]
hatena bookmark code
[/text]

こんな風にします。これでボタンの設定ができました。

その他いろいろ

Margins

表示位置はMargins (Positioning the Bar)で設定します。原点位置がよくわからないですが、いろいろ試して、好みの位置に表示します。ここの設定が自由なのがすごいです。

Choose Animation

スクロールアニメーションを使うか?です。これもこのプラグインの売りなので、基本ONの方向で。

Mobile browsers

モバイル系は表示する?です。モバイルに表示させるとかなり残念な結果になるので、チェックを入れます。モバイルは違うボタンを設置します。

Styling the Bar

外観を下のようにカスタマイズできます。IEはちょっとっアレですと注意がありますが、今に始まったことではないので気にせず、chromeで確認して楽しみます。サンプルコードはここの下にあります。

screenshot0226005

Meta tags & links

Add Facebook Open Graph (og) Meta tags

OGPは使っておいたほうが幸せになれます。

Add Sharebar link (I appreciate if you keep this checked)

ボックスの下にあるリンクを表示するか、の選択です。表示してくれたら、「うれしいなぁ」と作者さんのメッセージです。でも、OFFにできるので好感度アップです。表示してないけど、記事にしましたのでこれで勘弁してください。

以上で設定は完了です。

IE6 / 7

まあアレです。無理です。お察しください。ほんと。しかし、まだまだ使われているのも事実です。IE6 SP3の場合、下の様になります。IE8の互換モードでも同様です。

ScreenClip0226006

ドカンと大きな箱になっています。表示できないのならまだ良いのですが、この箱の下が読めません。かなり問題ありです。なので、古いIEをばっさり切り捨てるサイトになります(その方が幸せという、噂もありますが...)。

IE6 No More – Home このサイトで紹介されている方法で、とりあえずエラーメッセージを表示するという方法があります。どちらにしても、このプラグインを使うとIE6 / 7からは見れらないです。

まとめ

画面のスクロールについてくるアニメーションが絶妙なソーシャルボタンを表示するプラグインを紹介しました。設定項目が多いですが、柔軟なカスタマイズに対応できます。設定のポイントを紹介しました。

注意は古いIE(IE 6/7)では表示が崩れて、コンテンツそのものが読めないことになりました(環境に依存しているので、私だけ?かも)。IE の問題はこのプラグインに限ったものではないですが、Twenty Twelveそれ自体も...IEをメインターゲットに考えられているサイトでは使いづらいかもしれません。


この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

開催スケジュール

20189月のWordPressブログスタートアップ講座の開催スケジュール

9月は、ものくろキャンプ単独開催のスタートアップ講座の開催はなく、立花岳志さん主催のBe・ブログ・ブランディング塾のブログスタートアップ講座が開催となります。

東京は平日と休日の2つの日程での開催です。
+ 201897日(金)10:0018:30
+ 2018915日(土)10:0018:30

名古屋 開催スケジュールはこちら。
+ 201891日(土)10:0018:30

大阪 開催スケジュールはこちら。
+ 201892日(日)10:0018:30

どのスケジュールのお申し込みもこちらのページの下にあります「申し込みする」ボタンからお申し込みできます。

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

広告

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

新着記事

著者プロフィール

ものくろ(大東 信仁)

ブロガー/Web&Blogコーチ/親指シフト orzレイアウト開発者/ものくろキャンプ運営。のべ1,000名のブログサポートに携わる。WordPressが得意。

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告