WordPress Button Closeup / Titanas

どうも、リブラブです。

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

「Sharebar」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

リブラブ

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

最新記事 by リブラブ (全て見る)

• ダイソーのiPhone用全面保護ガラスフィルム買ってみた - 2019年2月16日
• iPhone7に久々の機種変更 - 2019年2月5日
• YouTube始めてみました！ - 2018年4月29日