先日導入したプラグイン『Sharebar』の動きが怪しかったので一部修正してみた


2013-0328-205227

以前に導入したSNSへの共有リンクボタンを自動的に設置、
サイドに表示してくれるプラグイン『ShareBar』を紹介しました。

結構便利でいいなーと思っていたのですが、
一部であんまりよろしくない動きをするところがあって
多少なり、手を加えてあげないといけない部分がありましたので
そこの変更点を紹介しておきます。

スポンサードリンク

 

デフォルトの共有ボタンが動かない…?

はじめはこの『sharethis』というボタンがデフォルトで有効になっていたのですが、
このFacebookボタンで共有をしようとすると404エラーが発生するという
なんじゃそりゃな現象が発生していたので、このボタンは無効化してしまいました。

代わりに『Twitter』『Facebook』を、それぞれ別々に有効化するということにしました。

Facebookボタンが欠けてる!

すると、また別の問題が。
Facebookのボタンのはじっこが欠けてしまうという問題。
使えることは使えるみたいなんですが、見栄えがよろしくない…。
2013-0328-094617

2013-0328-092748

うーん、こんなものデフォルトで欠けないように作ってくれよ…
と思いつつも、設定を変更することでボタン欠けの問題は解消出来ました。

Big Buttonの変更

ボタンの設定変更ですが、下記から行います。

設定→Sharebar→Available Buttons
→「facebook」の行の「Edit」を選択
→Big Button / Small Button

2013-0328-093632

下記がデフォルトの設定です。

<iframe src=”http://www.facebook.com/plugins/like.php?href=[url]&layout=box_count&show_faces=false&width=65&action=like&
colorscheme=light&height=45″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:45px; height:65px;” allowTransparency=”true”></iframe>

この設定のwidth(横サイズ)を修正します。

<iframe src=”http://www.facebook.com/plugins/like.php?href=[url]&layout=box_count&show_faces=false&width=65&action=like&
colorscheme=light&height=45″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:70px; height:65px;” allowTransparency=”true”></iframe>

修正後は、ちゃんと欠ける事なく表示されるようになりました。
2013-0328-094806

Small Buttonの変更

小さいウィンドウではタイトル下に共有ボタンが表示されますが、
こちらもご丁寧にボタンが欠けていましたので同様に修正します。

下記が変更前。

<iframe src=”http://www.facebook.com/plugins/like.php?href=[url]&layout=button_count&show_faces=false&width=85&action=like&
colorscheme=light&height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:85px; height:21px;” allowTransparency=”true”></iframe>

同様にwidthを変更します。

<iframe src=”http://www.facebook.com/plugins/like.php?href=[url]&layout=button_count&show_faces=false&width=120&action=like&
colorscheme=light&height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:110px; height:21px;” allowTransparency=”true”></iframe>

こちらも修正後は正しく表示されるようになりました。
2013-0328-093733

スポンサードリンク

 

この記事が参考になったら、TipstourのFacebookページに『いいね!』をお願いします!

 

よろしければFeedlyもご登録ください!
follow us in feedly