しれーっとブログのサーバー移行とSSL対応をしたHeyGです。
SSL対応の記事を書こうと思いましたが、対応の時系列的に
「VA Social Buzzのいいねボタン表示されない」問題が先なので書いていこうと思います。
SSL対応もKUSANAGIを使っているおかげで、特になにもしませんでしたが…
VA Social Buzzとは
VA Social Buzzとは、Wordpressでソーシャルのシェアボタンなどを簡単に実装できるプラグインです。
シェア系のプラグインは色々とあるのですが、どれも同じような見た目
VA Social Buzzは、多く利用されるFacebookとTwitterのみを配置し
Facebookのいいねボタンまでつけてくれる(ｽﾊﾞﾗｼｲ
ちょうどいいねボタンどうしようかなと考えていたので迷わずこれにしました。
(いや、自分でスタイル調整しろと…
VA Social Buzz いいねボタンが表示されない
プラグインなので、いつものようにインストールして有効化するだけでした。
設定の項目が、
WordPress管理画面 → 設定 → 表示設定
の下の方にあったので見つけづらかったですが…
とりあえず
- Facebookのユーザーネーム
- Facebook のアプリ ID
- Twitter のユーザーネーム
を追加して表示させました。
ここでHeyG絶句
決めてだったいいねボタンが表示されない…
検証でエラーを確認してみるも何もなし
iframeのURL直接打ち込んでみるも何もなし
なんだなんだよー！！(ここで深夜1時過ぎ…
Facebookの公式で作ったボタンと比較してみる
なにが悪いのか確認するために公式の正常なボタンと
VA Social Buzzで生成されたボタンのiframeのsrcを比較してみた
こちらが公式
https://www.facebook.com/v2.8/plugins/like.php?action=like&app_id=356982541338544&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FiPrOY23SGAp.js%3Fversion%3D42%23cb%3Df1711b86aa0d3f%26domain%3Dheyg.jp%26origin%3Dhttps%253A%252F%252Fheyg.jp%252Ff3f3a3bee75117c%26relation%3Dparent.parent&container_width=208&href=https%3A%2F%2Fheyg.jp%2Fconoha-vps-backup-restore%2F&layout=button_count&locale=ja_JP&sdk=joey&share=false&show_faces=false&size=large
こちらがVA Social Buzz
https://www.facebook.com/v2.8/plugins/like.php?action=like&app_id=356982541338544&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FiPrOY23SGAp.js%3Fversion%3D42%23cb%3Df9f2d9b52ab564%26domain%3Dheyg.jp%26origin%3Dhttps%253A%252F%252Fheyg.jp%252Ff1b3b9857b7b9%26relation%3Dparent.parent&container_width=208&href=https%3A%2F%2Fwww.facebook.com%2Fheyg0811&layout=button_count&locale=ja_JP&sdk=joey&share=false&show_faces=false
このままだと見づらいので
重複箇所を排除する
こちらが公式
href=https%3A%2F%2Fheyg.jp%2Fconoha-vps-backup-restore%2F
こちらがVA Social Buzz
href=https%3A%2F%2Fwww.facebook.com%2Fheyg0811
そもそも思ってたのと違う
なんでFacebookのマイページにいいね送らないといけないんだよ…
そもそもFacebookの個人アカウント自体にいいねって出来るのか？
たしかページ作ってたらいけた気がしたけど…
設定ミスってるのかな…
VA Social Buzz カスタマイズしてみる
あまりプラグインを弄ると更新時に面倒なのでしたくないですが、諦めてカスタマイズしていくことに
ということで問題の箇所を探すと
/DocumentRoot/wp-content/plugins/va-social-buzz/incs/class-module-shortcode.php : 306
に発見
<div class="fb-like" data-href="https://www.facebook.com/{{fb_page}}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
となっているところを
<div class="fb-like" data-href="'. get_permalink() .'" data-size="large" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
に変更
変更内容は以下の通り
- get_permalink()で現在のURLとってきてhrefに入れる
- ボタンサイズ大きくしたかったのでsizeパラメータ追加
ここで問題発生
いいねボタンの下が見切れる… (ここで深夜1:30過ぎ
調べてみると、cssでfb-likeのdivがheight:21pxで固定されているせいだったので
プラグインのstyle.cssの調整(デフォルトで仕様されているのは以下のファイル)
/DocumentRoot/wp-content/plugins/va-social-buzz/assets/assets/css/style.min.css
.fb-likeのheightを28pxに変更
無事記事ごとの評価で表示されました。
でも、これってFacebook側からだとどこに表示されるんだろ、絶対見れないよね。。。
とりあえずいいか。。。
まとめ
VA Social Buzzプラグインのデフォルトのいいねボタンはfacebookのマイページにいいねする仕様なので
個人のアカウントだったり、設定が間違ってたりすると表示されないから気をつけましょう
それでは！
