島根大好き・松江大好き♪
出雲の国の認定眼鏡士、メガネ屋「長谷川」です!



本日もメガネとは無縁の内容です^^;



Facebook(フェイスブック)への「Like Box(いいね!ボックス)」の設置における問題が
あったので、備忘録も兼ねてブログを書いてみます。





このところ、
ソーシャルネットワーク(Facebook・Twitter・Google+)やブログなど、


長谷川時計店の各部門を区別し、追加作成しておりました。



すべての部門において、各メディアの作成が完成したので、
それぞれのメディア同士の連携をはかるための作業も行なっていました。


ブログのサイドバーへFacebookの「Like Box」の設置を行ったわけですが、
通常通りに行なっても、バグ(?)で表示が不具合になります。




「Like Box(いいね!ボックス)」のコードは、下記ページで取得可能です。
https://developers.facebook.com/docs/reference/plugins/like-box/


デフォルトでは、以下のように表示されています。
Facebook「Like Box(いいね!ボックス)」の設置コード



メガネ屋「長谷川」のFacebookページは、以下のURLですので
https://www.facebook.com/hasegawa.megane

Facebook Page URLの欄に入力されている「Platform」を
 → 「hasegawa.megane」に修正します。


すると、この通り。
Facebookフェイスブック「Like Box(いいね!ボックス)」の作成


さきほどは、表示されていた、ボックスの下端(下部)が途中で切れているのが分かりますか?


Facebook(フェイスブック)での投稿は非表示にし、
当ブログのレイアウトに合うよう幅も変更します。

修正点は以下2箇所です
●「Show stream」のチェックを外す
●幅は240px


Facebookフェイスブック「Like Box(いいね!ボックス)」作成工程


変わらず、下線や「Facebookソーシャルプラグイン」の文字部分は、
切れて非表示になっています。



気にされないかたは、気にしないのだと思いますが、
どうも、このままで表示するのが気持ち悪くて、解決しないと
気持ちがおさまりません(笑)


ということで、いろいろと調べました。。。


そして、やっと解決策が分かりましたーー!



それでは説明をはじめますね♪


【Facebook「いいね!ボックス」の下端が切れる問題の解消方法】


■ステップ1


デフォルトから、以下修正をほどこした場合
●Facebook Page URL 「hasegawa.megane」
●「Show stream」のチェックを外す
●幅は240px


「GET Code」をクリックして取得できるコードは ↓ コレ
Facebook「Like Box(いいね!ボックス)」コード

※私のブログでは、「IFRAME」を使用します



このコード内の「show_faces=true」を「connections=“任意の数字”」
に変更するのです。


ためしに、以下の通りにしました。
「show_faces=true」 → 「connections=4」


Facebook「Like Box(いいね!ボックス)」の生成完成


はい、どうでしょ~~!

大成功!!!



これで無事に設置できました。。。



しか~し!


4人の方のアイコンだけでは、チョット寂しいので、
8人( 「connections=8」 )にしようとこころみたところ、

またまた、下端部が切れてしまいました。




■ステップ2


「height」の長さを設定していなかったから、足りなかったんだ!
と思い、この値を大きく(たとえば360px)にしましたが、それでもダメ ^^;




取得していたコードをよく見ると、、、




成功したケース(height指定なし、connections=4)の場合も
失敗したケース(height指定あり、connections=8)の場合も

どちらも、「height=290」となっていました。






height値を指定しなくても、「Show stream」チェック あり・なし
など含める要素により、heightの値が自動で決定されているようです。




また、あとからheight値の欄を変更しても、生成されるコード内の
height値には反映されず。。。
(再読み込みしてから、修正したら反映されたような気もします)


height値を「360」にしても、

取得コード内の値は、290のままで、正常に動作してくれません。





取得するコード内の意味は、だいたい把握できましたので、
ここからは、コードを直接いじることにしました!





成功した際( 「connections=4」 )のコードをもとに、

まず、表示するアイコン数を8人分( 「connections=8」 )に修正。




下端部分が切れないように、何度もheight値を変更し、
少しずつ希望に近づけていきます。



そして、最終的に、height=340にした時に、

8人分のアイコンと下端部分の表示がバッチリできました!





なお、「width」・「height」は、コード内に、それぞれ2箇所出現しますので、
修正する場合は、2箇所とも同じ値にします。


「connections」は、1箇所のみです。


fb_blog01x06



↑ ↑ うまく表示されましたねーーー!




ブログ内で使っている画像内のアイコンを、ぼかそうと思いましたが、

そもそもFacebook内では、「友達ではありませんか?」などと、

見ず知らずの方のアイコンも表示されるので問題ないと思い、

そのままにしてあります。









「Facebookフェイスブックの「Like BOX」うまく表示されてなかった!」
「このブログが役にたった~♪」
「このくらいの不具合は、僕はまったく問題ないよ~(*^^*)」


そんな方いらっしゃいましたら、下記リンク、ポチっとして
頂けるとよろこびま~~す(^◇^)

▼ブログランキング登録中…
ポチッ↓とするとランクUP!応援(人∀・)お願いします
 にほんブログ村 ファッションブログ メガネ・サングラスへ




※長谷川時計店はFacebook(フェイスブック)も運営しております。

 メガネFBページ→ https://www.facebook.com/hasegawa.megane

 店舗全般FBページ→ https://www.facebook.com/matsue.dandan.sp

 素早く投稿できるFacebookでは、ブログでは掲載しない情報も投稿いたします
 いいね!をクリックして最新情報をゲットしてください( '∇^*)^☆


※営業日時
 平日:10:00~18:30
 土祝:10:00~18:00
 日曜:定休日
 その他、年末年始・ゴールデンウィーク・お盆には数日休業しております
 上記以外でも、展示会・仕入れ・講習などで、休業させて頂く場合ございます。

 営業日の閉店時間を多少延長する事は可能です。

 購入等のご要望で、時間外にご来店されたい場合など、
 事前にご連絡頂けましたら、できる限り対応させて頂きますので、ご相談下さい。


H-H-H-H-H-H-H-H-H-H-H-H-H-H-H-H-H-H-H

眼鏡・時計・宝飾 長谷川時計店
〒690-0887
島根県松江市殿町67-2
TEL:0852-21-6019  FAX:0852-21-6071

認定眼鏡士:長谷川純一


大きな地図で見る
H-H-H-H-H-H-H-H-H-H-H-H-H-H-H-H-H-H-H