VA Social Buzz +SWで「いいね!」ボタンを好きな位置に表示してみよう

2016-10-12

いいね!

以前、Facebook ページの「いいね!」ボタンを記事下に表示できる VA Social Buzz というプラグインをご紹介しましたが、設置からわずか数ヶ月で「いいね!」が激増しています。

先日、同プラグインのメジャーアップデートが行われ、合わせて有料アドオン VA Social Buzz +SW が販売開始となりました。

このアドオンを入れることでデザイン調整がとても簡単になったので、その内容と使い方をご紹介します。

VA Social Buzz +SW を使うメリット

VA Social Buzz のアップデートは、外見上とくに変わったところもなく、機能も従来のままです。

しかし内部仕様が大きく変わり、合わせてリリースされたアドオンを購入することで、大幅に機能を拡張できるようになりました。

  • ウィジェット・ショートコードで好きなところにボタンを配置できる
  • 表示したいパーツを選択できる
  • 投稿・固定ページごとに表示/非表示を選択できる

VA Social Buzz は、インストールしてアカウント情報を入れれば自動的に記事下にボタンが表示されます。

誰でも 1 分で「いいね!」ボタンを表示できるその手軽さが特徴ですが、唯一の弱点は自分の好きなところに配置できないというものでした。

アドオン VA Social Buzz +SW でそれをカバーできるようになった、ということですね。

配置を自由に変更したいならアドオンを購入しよう

さっそく当サイトでもこの機能を使って、ボタンの位置を変更しました。

もともとはこのように「いいね!」ボタンとテーマの SNS ボタンが離れていましたが、

以前までの記事下配置

アドオン導入で SNS ボタンをまとめられたので、見やすくなったと思います。

アドオン導入後の記事下配置

「ただ記事下に表示できればいい」「いいねが増えるかちょっと試してみたい」というなら、VA Social Buzz だけで十分でしょう。

でも、自分の好きな場所にボタンを置きたいならアドオンを購入するのがおすすめです。

プラグイン導入ブログが急増しているようですので、まずは無料プラグインを試してみてください。

VA Social Buzz ダウンロード数

VA Social Buzz +SW の導入方法

それでは、アドオンの入手方法と使い方を解説していきます。

アドオンは単体では動きませんので、必ず VA Social Buzz も有効化しておいてくださいね。

アドオン購入

有料アドオンは Gumroad で販売されています。

プラグイン制作者くっくるさんのサイト VisuAlive の購入リンクからどうぞ。

VA Social Buzz 1.1.0 と有料アドオンをリリース

販売ページは英語表記ですが、右側の「購入する」ボタンから手続きすれば OK です(※クレジットカードまたは PayPal のみ)。

VA Social Buzz +SW 購入ページ

購入後、メールが送られてくるのでファイルをダウンロードします。

VA Social Buzz +SW 購入完了メール

インストールと有効化

ダウンロードした ZIP ファイルには、以下の 2 つが同梱されています。

  1. readme.pdf
  2. va-social-buzz-plus-sw.zip

2 つめの「va-social-buzz-plus-sw.zip」を展開して FTP でアップロードするか、このままプラグイン「新規追加」からアップロードすれば OK です。

ZIPのままアップロードするのが簡単
ZIPのままアップロードするのが簡単

プラグインを有効化すると、Shortcake というプラグインのインストールも促されるので、そのままインストールしましょう。

VA Social Buzz +SW 有効化完了

これで導入完了です。

VA Social Buzz +SW の使い方

VA Social Buzz +SW をインストールすると、以下の方法で「いいね!」ボタンを表示できるようになります。

  • 記事下に自動表示(表示だけなら VA Social Buzz だけでも可)
  • ショートコード
  • ウィジェット

記事下に自動表示する場合

VA Social Buzz は、以下の 3 つで構成されています。

VA Social Buzzの構成

※Push7 導入時は「シェアボックス」に入ります

VA Social Buzz だけだと記事下に全ボックスが自動表示されますが、アドオンを入れることで各ボックスの表示/非表示を選択できるようになります。

管理画面の[設定]-[表示設定]からお好みで指定しましょう。

VA Social Buzz +SW 設定項目

なお、自動表示時は投稿編集画面から個別に表示/非表示を選択できます。

VA Social Buzz +SW 投稿ごとの表示設定

記事を LP 化している場合などは重宝しますね。

記事内にショートコードで表示する場合

ショートコードを使えば、記事内の任意の場所に「いいね!」ボタンを表示することができます。

ショートコードは「メディアを追加」から挿入できますが、自動表示時と同じくボックスの選択が可能です。

Insert Post Element から VA Social Buzz を選択し、

VA Social Buzz +SWショートコード挿入

表示したいボックスを選びます。

VA Social Buzz +SW ショートコード選択

ショートコードは以下のようになっています。

<!-- すべてのボックス -->
[socialbuzz]

<!-- いいね! ボックス -->
[socialbuzz box="like"]

<!-- シェアボックス -->
[socialbuzz box="share"]

<!-- フォローボックス -->
[socialbuzz box="follow"]

記事内で頻繁に使うようなら、このショートコードを AddQuicktag に登録しておくと良いですね。

実際にすべてのボックスを表示してみました。

[socialbuzz]

広告や関連記事をショートコードで表示している場合は、好きな順番で並べ替えられますね。

ショートコードをテンプレートファイルに挿入する場合

記事本文以外の好きな場所にボックスを表示したいときは do_shortcode を使いましょう。

<?php echo do_shortcode('[socialbuzz]'); ?>

もちろん、表示するボックスを選択できるので、フォローボタンのみ非表示にしたり、ボックスの順番を入れ替えるのも簡単です。

記事の上下はもちろん、サイドバーやフッターにもおけますね。

ただ、表示したい場所にウィジェットエリアがあるなら、ウィジェットを使うほうが楽かもしれません。

ウィジェットで表示する場合

[外観]-[ウィジェット]に専用ウィジェットがあるので、これを任意の場所に配置すればボックスが表示されます。

VA Social Buzz +SW ウィジェット

テキストが変えられるので、「この記事が~」ではなく「このサイト~」としてサイドバーに設置するのも良いですね。

まとめ

以上、VA Social Buzz +SW のご紹介でした。

いいね! ボタンやフォローボタンは自力でカスタマイズして設置できますが、プラグインを使ったほうが圧倒的に楽です。

テーマを変えても同じデザインで使えますし、逆に不要になったらプラグインを削除すればすぐに外せます。

まずは無料プラグイン VA Social Buzz を試してみて、配置や表示/非表示を変えたくなったらアドオンを使ってみてください。

それでは、また。

ブログ雑記

Posted by Ellora