Read Article



【WordPressプラグイン】ソーシャルボタンをフローティング表示可能な「Sharebar」を導入してみた件

Wordpress Button Closeup
WordPress Button Closeup / Titanas

どうも、リブラブです。

ソーシャルボタンをフローティング表示可能なプラグイン

「Sharebar」

導入も簡単でしたので紹介したいと思います。

ブログの記事の横にソーシャルボタンを表示する方法は色々あります。

例えばjQueryというのを使って、記事の横にボタンを「にょにょっ」と表示させたり出来るようですが、知識が中途半端な僕には、かなり敷居が高い感じ(^^);。

jQueryについては、「OZPAの表4」さん、「りくまろぐ」さんが判り易く記事にされています。

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4

[Я]jQueryを使ってフェードイン/アウトするSNSボックスを作成する : りくまろぐ

そこで、時間をかけずに、初心者でも簡単にソーシャルボタンをフローティング表示できないかと探していたところ、こちらのプラグイン「Sharebar」を発見。

導入方法

まずはWordPressの管理画面から、「プラグイン」➡「新規追加」を選択。

次に「Sharebar」を検索して見つけたら、「いますぐインストール」をクリック。

DropShadow ~ ins2

プラグインが有効になったら、次は設定。

プラグインを有効化すると、すぐにデフォルトのボタンが表示されるようになりますが、新しくボタンを追加する場合は、「Add New Button」をクリック。
緑枠の部分はとりあえず、デフォルトで問題無いと思います。

DropShadow ~ SWordPress

ここでは、デフォルトには無い「はてなブックマーク」ボタンを追加してみます。

「Add New Button」をクリック後、赤枠部分を以下のように入力。

DropShadow ~ Sharebar livlove s ios life WordPress

「はてなブックマーク」ボタンコードは公式サイトより入手します。

はてなブックマークボタンの作成・設置について – はてなブックマーク

入力が終わったら、一番下の「Add button」をクリックで完了です。

使わないサービスボタンを非表示にする

デフォルトでは、利用しないボタンも表示されてしまいます。

単純に、Deleteで削除出来ますが、チョット問題があります。

DropShadow ~ Sharebar livlove s ios life WordPress 3

完全に消してしまうと、全てのボタンが表示されなくなってしまうことがあるので、消去せずに残しておいた方が無難です。

そこで、完全に消去せずに表示だけ非表示にします。

プラグインの設定画面から、表示したいボタンのみチェックを入れ、「Enable」を選択。
「Update」をクリックで表示。

DropShadow ~ Sharebar livlove s ios life WordPress 2

「Disable」で非表示にできます。

DropShadow ~ 2013 07 18 22 13 28

何度もしつこいようですが、Deleteすると完全に消えてしまい、テーマによっては表示させたいボタンも表示されなくなるので注意してください。

フローティング表示などの設定

無事、必要なボタンのみ表示させることが出来たら、最後に見た目の調整をします。

表示の設定は「Sharebar」のプラグイン設定の上部の「Settings」から。

DropShadow ~ WordPress

設定はご自身のサイトで最適な数値を試していただくしかないのですが、赤枠部分のフローティング枠の大きさを設定してあげれば、ボタンが切れて表示されなくなると思います。

DropShadow ~ Sharebar WordPress 2

ちなみに僕のブログでは、このように表示されます。

DropShadow ~ iPhone5

あとがき

どのようなボタンでもコードさえあれば表示可能だと思いますが、はてなブックマークボタンだけは、出来るだけ公式サイトより取得した方が良いです。

理由は公式サイト以外のボタンコードは、稀にブックマーク数がおかしくなる事があるからです。

僕も公式サイト以外のコードを貼っていましたが、表示数がおかしくなってしまったので、公式のモノを使用しています。

とはいえ、非常に簡単に設置できるので、初心者の方にもオススメのプラグインです。

ではでは、今日はこの辺で。

The following two tabs change content below.

リブラブ

管理人:リブラブ(@livlove007) iPhone、iPad、Macユーザーです。 iPhone関連の商品やアプリを使った感想、また普段の生活の中で感じた様々な事を気ままに色々書いてます。 Follow @livlove007

LEAVE A REPLY

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top