あちらこちらのWordPressサイトで見かける「この記事が気に入ったらいいね！しよう」っていうのが気になっていました。
Facebookの「いいね」をするものなんだけど、いい感じなので自分のサイトにも導入してみたいなぁって。
で、調べてみたら「VA Social Buzz」っていうプラグインでした。
この記事が気に入ったらいいね！
これが基本的な形式です。
VA Social Buzzプラグイン
使い方は難しくありません。通常通りプラグインをインストールして、いくつか設定項目を埋めてあげるだけです。
まず、「VA Social Buzz」検索してインストールをします。
WordPressのメニューから『設定』－『表示設定』を開きます。
設定するのは次の３か所
『Facebook ページのユーザーネーム』
自分のFacebookページでのユーザーネームを入力します。
本命サイトと同じタイトル「得意なことからコツコツと」でFacebookページを作りました。
ユーザーネームは「tokui55」なので、これを入力します。
『Facebook のアプリ ID』
これはOGPがらみの設定と思われますが、今回は入力しません。利用しているテーマの「Simplicity2」で設定しています。
『Twitter のユーザーネーム』
自分のアカウントを入力します。
入力しなかった場合は、「Twitterでフォローする」の行が表示されません。
カスタマイズ
良い意味で、WordPressっぽくなくていいと思うのですが、このままでは、シェアボタンの都合が悪いのでカスタマイズをします。
普通に設置すると次のようになります。
Twitterのフォローボタンは不要なので、ユーザーネームの入力を省きました。
シェアボタンが重複してしまっています。下段の4つ並んだシェアボタンは「Simplicity2」の機能を使って表示させています。
「Simplicity2」のボタンを残して「VA Social Buzz」側のシェアボタンは消すことにします。
完成形
こうなるようにカスタマイズしていきます。
「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 */
これで、隙間なく表示されるようになります。（”シェアする”というタイトルは、テーマのカスタマイズで前もって消しておきます。）
スマホでの表示
スマホでの表示状態も確認しておきます。
綺麗に収まりました。
これで完成です。
ブラウザのキャッシュをクリアする必要があります。【Chromeの場合】
右上のメニュー（・が縦に3つ並んだところをクリック）を開いて、「その他のツール」から「閲覧履歴を消去」を選択します。次のポップアップウィンドウが表示されます。
「キャッシュされた画像とファイル」のみにチェックを入れて実行します。クリア後、対象ページを再表示すると反映されます。
このプラグインを導入したのは本命サイトの方です。よろしければ、本命サイトに移ってご確認ください。
※申し訳ありません<(_ _)>
すでに、この「VA Social Buzz」の使用をやめてしまいました。現在は次の画像のようになっています。とある理由があって、Simplicityの機能を使って「いいね！」ボタンを表示しています。
理由は計画していることがうまく行ったら追記します。
【追記】
本命サイトにAMPを導入しましたが、AMPページで「いいねボタン」の表示がおかしくなります。AMP時に非表示にできれば問題はありませんが、僕の技術では不安だったので変更することで対応しました。
Simplicityのものは、AMP時に自動的にボタンが消えます。
コメント