「この記事が気に入ったらいいね」で有名なワードプレスのプラグイン「VA Social Buzz」。
国産の「この記事が気に入ったらいいね」というプラグインもあり、両方とも記事下にFacebookやTwitterなどのボタンを配置出来るプラグインです。
これがまたデザインも良く、かなり目立つうえに記事下に自動的に配置してくれるので「爆発的にシェアが増えた」出という方続出らしく、結構前からよく見かけるようになりました。
この「VA Social Buzz」というプラグインは無料版と有料版（アドオン）があるのですが、無料版だと表示位置を変更できません。
なので今回はプラグインのソースを直接いじることなく「VA Social Buzz」の表示位置をカンタンに好きな場所に移動する方法（かなり力技ですが）の紹介です。
実際にプラグインによって吐き出されたものを移動する内容なので実装される方は自己責任でお願いします。
[ ]
自作プラグイン「Simple-FB-Likebox」をリリース致しましたので、ご希望の方は以下からご自由にお使い下さい。
Contents
「VA Social Buzz」とは
上述しましたが、「VA Social Buzz」は以下の画像のように記事下にFacebookなどのシェアボタンを表示する事が出来るプラグインです。
ブログの記事を最後まで読み終えた読者さんが、そのモチベーションを保ったままの状態で目に入ってくるのでシェアされる確率が非常に高く、さらに見た目のデザインも格好良いのでワードプレスのデザインのひとつとしても使える非常に優秀なプラグインです。
また、「記事下に表示させるだけであれば無料で使える」というのも素晴らしいポイントですね☆
「VA Social Buzz」のダウンロード
まだ「VA Social Buzz」をインストールしてないという方は以下を参考にインストールしましょう。
管理画面から[プラグイン] > [新規追加] > [プラグインの検索]に「VA Social Buzz」と入力して検索すると出てくるので「今すぐインストール」をクリックしてインストールしましょう。
※インストールが完了したら「有効化」を忘れないように☆
「VA Social Buzz」の使い方
インストールが完了したら、管理画面の[設定] > [表示設定]の中に「VA Social Buzz」の設定項目が出現してます。
とりあえずすぐ使いたいという方は以下の画像の「Facebookページのユーザーネーム」と「Twitterのユーザーネーム」にそれぞれのユーザーネームを入力すれば使えます。
[Twitterのユーザーネーム]→Twitterの@マーク以降の部分です。
※私の場合FacebookページのURLが「https://www.facebook.com/tips4life.me/」なのでFacebookのユーザーネームは「tips4life.me」、Twitterは「@Tips4Life_me」なので「Tips4Life_me」となります。
有料版（アドオン）もあるけど…
有料版のアドオンを購入するとショートコードを使えるようになったりウィジェットで使えるようになったりと色々と融通がきくようになるのですが、無料版だとどうしても表示位置が記事下に固定されます。
この「記事下に固定」というのがちょっとやっかいで、わかりやすく言うと「記事ボックスの中の1番下」に配置されます。（わかりづらいですねｗ）
※「.entry-content」の中の一番下に配置されます。
なので例えばウィジェットの「投稿本文下」にアドセンスなどの広告を入れてる場合、以下の画像ようにVA Social Buzzのいいねボタンは「記事本文と一体化」しちゃうので「投稿本文下」のウィジェットで表示しているアドセンスはその下に表示されてしまいます。
こんな感じ。
これだと一番CTRが高いと言われている記事下のアドセンスもCTRは少なからず下がるでしょうし、なにより見た目が悪い！（個人的な意見です）
なのでこんな感じにしたいと思います。
魔法のコード「insertBefore」と「insertAfter」
今回使うのは「insertBefore」や「insertAfter」といったjQueryのメソッドです。
この魔法のメソッドは「要素を移動してくれる」という、もはやコーディングの順序なんて関係なくなってしまう「なんでもアリ」な反則メソッドです。
しかもJavaScript系はブラウザ上で処理するのでPHPでサーバーからHTMLとして吐き出された後の処理です。
なので</body>の直上に記述したりonloadで遅延させたりなど、HTMLやCSSの読み込み後に実行させることで「実際にページが読み込まれてから要素を移動させる」ので、もはや向かうところ敵ナシ状態です。
ただ、当然色々な所にやりすぎると負荷がかかって重くなったり思わぬエラーが出たりする可能性もありますのでくれぐれもやり過ぎにはご注意下さい。
実際に位置を変えてみましょう！
ではさっそくVA Social Buzzの表示位置を変えてみましょう。
手順はたったの2つだけなのですぐに出来ますよ☆
2.「コードをコピペ」して要素名を変える。
これだけで好きな位置に表示できます。
それでは詳しいやり方です。
目的の要素の前or後ろのid（もしくはclass）を調べる
今回はVA Social Buzzで生成されたボックスをそのまま移動させるので、目的の場所の前、もしくは後の要素を調べます。
ChromeだとF12で開発者ツールを出せるので簡単ですね☆
上述した画像のように、「アドセンスの下」に移動させたい場合は「投稿本文下」ウィジェットのIDを探せばOKです。
<div id="text-1" class="widget-under-article widget_text">
といった感じの要素があるはずです。
コードをコピペして要素名を変える
今回はID名「text-1」の要素の後ろに移動させたいので、以下のコードをコピペしてください。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('.va-social-buzz').insertAfter('#text-1');
});
</script>
ちなみに要素の「後ろではなく手前」に移動させたい場合は、
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('.va-social-buzz').insertBefore('#text-1');
});
</script>
となります。
はい、これでVA Social Buzzで生成されたいいねボックスを移動出来てるはずです☆
まとめ
今回は人気のプラグイン「VA Social Buzz」の表示位置を変更する方法のご紹介でした。
「プラグイン自体のソースをいじるのはちょっと……。」
と思っている方や、「ちょっと難しいイメージあるし…」とか、「ちょっと面倒…。アップデートとかあったら元に戻っちゃったりするし…」などと思っている方は、今回のように超簡単なjQueryを使っていいねボックスの位置を変更してみるのも良いかと思います☆
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆
RA’s様、こんにちわ！
VA Social Buzzのプラグインを使っていて、
場所をどうしても記事下のCTAよりも下に表示させたくて
こちらの記事にたどり着きました。
「コードをコピペして要素名を変える」とのことですが、ペーストするのはどこにすれば良いのでしょうか？
もしよろしければご教示頂けましたら嬉しいです。
サカイ 様
返信が遅くなり申し訳ありません。
コピペ先の場所ですが、お使いのWordpressテーマによって記述場所は変わります。
基本的にJavaScriptなどのスクリプトコードは「bodyの閉じタグの直前」が好ましいです。
他にも、お使いのテーマによってはフッター部分に挿入できるテンプレートなどもありますので、そこにコピペして頂いても良いかと思います。
例としてSimplicityやCocoonでいうと、「footer-insert.php」などにコピペでOKだと思います。
もしシンプルにFacebookのいいね！ボックスだけを表示させるのであれば、私が作った「Simple-FB-Likebox」というプラグインがありますので一度使ってみて下さい。
※現在このサイトでは「VA Social Buzz」はやめて「Simple-FB-Likebox」を使っています。
【参考記事】Simple-FB-Likebox
RA’s様、ご返信頂きましてありがとうございます！
こちらこそご丁寧にお教え頂きましたにもかかわらず、
ご返信が遅くなってしまい申し訳ございませんでした。
使っているテーマのfooter.phpにあるbodyの閉じタグ直前で直接記述しましたが、
何だか上手くいきませんでしたので、外観＞ウィジェット機能のフッター部分に「テキスト機能」を利用してコピペしてみました。
すると上手く順番を変えることができました！
ありがとうございます。
とても分かりやすくお教え頂きましてありがとうございました(*^▽^*)