WordPress facebookプラグインがスマホ表示をおかしくさせる時の対策

LINEで送る
[`evernote` not found]

以前からスマホで見た時表示がおかしいと指摘されてましたが
何人かの人に聞いてもわからないし
対策がわからず
放置プレー状態でした
しかし、、、
ちゃんと英語で書いてあった
見ようとしなかっただけである(汗)
昨日、少し時間ができたので対策しました。

症状と原因 

イイネを押してもらった時
イイネボヤンの横に

x人が「いいね」と言ってます。

が表示された時おかしくなる

facebookプラグインおかしい

対策としてはテキスト表示幅を短くすればいい

対策1 テキスト表示幅を変更

設定の下にあるFacebookにカーソルを合わせると
Like Buttonが標示されるのでクリックする

facebookプラグイン設定

Widthが640になってた値をいろんな値を入れて試してみた
結果270〜285くらいがスマホ標示では最適だった
width_‹_圧倒的なスタイル_—_WordPress

無事、iPhoneの画面に合った標示ができるようになった
iPhone用サイト標示

対策2 テキスト表示をカウント標示に変える

テキストを表示するから幅が関係するのであって
最初から短ければ何も問題ない
テキスト標示でなくイイネを押してもらった数だけを標示することもできる

対策は
Layoutを standardからbutton_count に変更する
※初期値はstandard

Like_Button_‹_圧倒的なスタイル_—_WordPress

標示はシンプルになりました。
「イイネ」カウント標示

シェアボタンの追加

この機会にシェアボタンも追加した
設定は簡単 ShareButtonにチェックを入れるだけ

シェアボタン_‹_圧倒的なスタイル_—_WordPress
どのような標示になるかはこのサイトの上の方を見てください

今回わかったこと

分からないと最初から諦めてたから
原因がわからなかった
何とかしようと思ったことで解決できました。
時間作って少しづつ
納得いってないところを改善していきます。

    該当記事が見当たりません

lirevo の紹介

ものづくりの末端で働いてます。 理不尽なこと無理難題の要求、数々あります。 その要求に答えるため多くのチャレンジをしてます。 そこでの気付きを書いていきます。
カテゴリー: SNS, ブログ タグ: パーマリンク

コメントを残す