「この記事が気に入ったらいいね!しよう」WordPressプラグイン【VA Social Buzz】

あちらこちらのWordPressサイトで見かける「この記事が気に入ったらいいね!しよう」っていうのが気になっていました。

Facebookの「いいね」をするものなんだけど、いい感じなので自分のサイトにも導入してみたいなぁって。

で、調べてみたら「VA Social Buzz」っていうプラグインでした。

スポンサーリンク

この記事が気に入ったらいいね!

この記事が気にったらいいね!しよう

これが基本的な形式です。

VA Social Buzzプラグイン

使い方は難しくありません。通常通りプラグインをインストールして、いくつか設定項目を埋めてあげるだけです。

まず、「VA Social Buzz」検索してインストールをします。

WordPressのメニューから『設定』-『表示設定』を開きます。

VA Social Buzz設定

設定するのは次の3か所

『Facebook ページのユーザーネーム』

自分のFacebookページでのユーザーネームを入力します。

本命サイトと同じタイトル「得意なことからコツコツと」でFacebookページを作りました。

得意なことからコツコツと - 「いいね!」35件 - 趣味ブログ「得意なことからコツコツと」のコミュニティです。

ユーザーネームは「tokui55」なので、これを入力します。

『Facebook のアプリ ID』

これはOGPがらみの設定と思われますが、今回は入力しません。利用しているテーマの「Simplicity2」で設定しています。

『Twitter のユーザーネーム』

自分のアカウントを入力します。

入力しなかった場合は、「Twitterでフォローする」の行が表示されません。

カスタマイズ

良い意味で、WordPressっぽくなくていいと思うのですが、このままでは、シェアボタンの都合が悪いのでカスタマイズをします。

普通に設置すると次のようになります。

VA Social Buzz プラグイン

Twitterのフォローボタンは不要なので、ユーザーネームの入力を省きました。

シェアボタンが重複してしまっています。下段の4つ並んだシェアボタンは「Simplicity2」の機能を使って表示させています。

「Simplicity2」のボタンを残して「VA Social Buzz」側のシェアボタンは消すことにします。

完成形

VA _Social Buzz プラグイン cssカスタマイズ

こうなるようにカスタマイズしていきます。

「VA Social Buzz」のシェアボタン削除

メニューの『外観』ー『テーマの編集』を開きます。

スタイルシート 「style.css」に次のコードを追加します。

/* VA Social Buzzの表示設定 */
/* シェア,フォローエリア非表示 */
.va-social-buzz .vasb_share {
  display:none;
}
/* VA Social Buzzの表示設定 END */

これで、不要なボタンが消えます。

でも、このままだと「いいね」エリアとシェアボタンの間隔が大きく開いてしまいます。そこで、間隔を詰めるようなcssを追記します。

先ほどと同様「style.css」の次のコードを追加します。

/* VA Social Buzzとテーマのシェアボタンの間隔を詰める */
.sns-group {
  margin-top:-50px;
}
/* VA Social Buzzとテーマのシェアボタンの間隔を詰める END */

これで、隙間なく表示されるようになります。(”シェアする”というタイトルは、テーマのカスタマイズで前もって消しておきます。)

スマホでの表示

スマホでの表示状態も確認しておきます。

VA _Social Buzz プラグイン スマートフォン

綺麗に収まりました。

これで完成です。

cssカスタマイズが反映されないとき
ブラウザのキャッシュをクリアする必要があります。【Chromeの場合】
右上のメニュー(・が縦に3つ並んだところをクリック)を開いて、「その他のツール」から「閲覧履歴を消去」を選択します。次のポップアップウィンドウが表示されます。Chromeキャッシュクリア
「キャッシュされた画像とファイル」のみにチェックを入れて実行します。クリア後、対象ページを再表示すると反映されます。

このプラグインを導入したのは本命サイトの方です。よろしければ、本命サイトに移ってご確認ください。

※申し訳ありません<(_ _)>

すでに、この「VA Social Buzz」の使用をやめてしまいました。現在は次の画像のようになっています。とある理由があって、Simplicityの機能を使って「いいね!」ボタンを表示しています。

simplicity facebook いいね

理由は計画していることがうまく行ったら追記します。

【追記】

本命サイトにAMPを導入しましたが、AMPページで「いいねボタン」の表示がおかしくなります。AMP時に非表示にできれば問題はありませんが、僕の技術では不安だったので変更することで対応しました。

Simplicityのものは、AMP時に自動的にボタンが消えます。

フォローする

スポンサーリンク