VA Social Buzz いいねボタンが表示されない

VA Social Buzz いいねボタンが表示されない

しれーっとブログのサーバー移行とSSL対応をした坂本です。

 

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 のユーザーネーム

を追加して表示させました。

 

ここで坂本絶句

決めてだったいいねボタンが表示されない…

 

検証でエラーを確認してみるも何もなし

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のマイページにいいねする仕様なので

個人のアカウントだったり、設定が間違ってたりすると表示されないから気をつけましょう

 

それでは!

開発カテゴリの最新記事