OGPに対応しますた。

2014.04.04

以前から気になっていたソーシャルボタンを修正して満足していたのもつかの間。
また別の問題に気がつきました。

facebookのいいねボタンを押すと・・・
あれ?
コメント欄が切れる?

いいねボタンを押した時に表示されるサムネイル、タイトル、サマリーが表示されるコメント欄。
自分のコメントを入れたりしてフェイスブックのタイムラインに表示させる機能の筈なのですが、上手く表示されません。

色々調べてみるとこのコメント欄はiframeを使用しているらしく、
CSSのリセットなどで、このiframeに対して何か指定していると問題が出る場合が多いらしい。
例えば「(親要素に対して)幅は100%ね!」的な。
そこで、CSSを調べてみたが私はiframeに対して設定をしていません。

念のため、以下のコードを追加して様子を見るも・・・・
.fb_like iframe { max-width:none !important;}
変化無し。

じゃあ、どの要素に幅の影響を受けているかを見てみた。

どうやら、2カラム構成の右側のdivの外枠に影響を受けてるっぽい。
ふむ

でもfloatは枠の外へ飛び出しちゃう筈だから・・・divのサイズに影響を受け・・・あれ?
float解除しちゃえばその限りじゃないか。

じゃあclearfix?
まさか(笑)

って事で、クリアフィックス関係の記述を見ていたら、
overflow:hidden
の記述が。

これって・・・要るんだっけ?
はみ出し要素を非常時にしてしまうこのタグ、なんか今回の事件に深く関係があるような。

クリアフィックスについての記述もあれこれ調べたのですが、特にoverflowを推奨している記事も無く、自分でもなんで設定したか憶えてないし。じゃ、いっちゃいますか!
って事で、消してみた。

じゃじゃーん!コメント復活!
orz

で、調べていく過程のなかで、OGPというデータをメタとして持たせると、このサムネイルとかをきちんと調整できるという事が記事に載ってました。
OGPなんて聞いたことありませんでしたが、ソーシャルボタンなどに情報を受け渡すためのデータだと思っておけば大きく間違えはしないと思います。

勉強してない訳じゃ無いけど、積極的に調べている訳でもないからなぁ。
こういう新しい事への対応が遅くなって、なんとなく自分の怠慢かなと落ち込むことしりき。

で、気を取り直してINST-webもOGP対応しました(^^ゞ
特にフェイスブックのいいねボタンでこれまでよりマシな共有になるかな?

2014年4月4日¦ カテゴリ:Coffeeの日記 - お知らせ - ウェブ更新情報 ¦ コメント (0)

facebookのソーシャルボタン、コメント欄が切れる問題

2014.04.01

先日修正したソーシャルボタン。
一見無事に動いている様でしたが、フェイスブックのボタンを押した時に問題があることに気がつきました。

リンクを共有する際にコメントを記入できるように吹き出し(コメント欄)が出るのですが、それがちゃんと表示されない・・・
途中で切れてるんですよね。

サイドバーの所では右側が切れる。
単記事の所では下側が切れる。

なんだこりゃ?という事で色々調べたり、悩んだり。

一般的には「iframe」要素に「max-width:100%」とかが指定してあると親要素の幅による制限を受けるそうで、
.fb_like iframe { max-width:"none !imortant"}
とかやると改善するらしいです。

私の風邪は喉から。
じゃなくて、私の場合はそれでは全く改善されず。

で、よーーーーくみてみると。
確かに親要素の横幅で切れている。
で、その親要素って厳密にどれよ?と見ていきました。

私のウェブサイトは現在2カラム構成。
右と左で分かれているのですが、どうやらその2カラムを分けるdivまで遡ります。

でも、floatやpositionって親要素から浮いている感じになるんじゃ?
あれ?って事でどうやら「overflow」の設定が怪しいことに気がつきました。

でも、overflowなんて、ナビゲーションを並べたりする要素にしか使ってないし・・・

ぴきーーーーーーん!

く、クリアフィックスっすかΣ(゜д゜;)

私のcssにはclearfixが設定されています。
当時色々調べて、それなりの物を設定したつもりなのですが、ここにありました。
overflow:"hidden"が。

これを削除したらあっさり解決。
私の2時間を返して。

クリアーフィックス的にもたぶん問題無いのか?
とりあえず、これで様子を見ます(´・ω・`)

2014年4月1日¦ カテゴリ:コヒ蔵の独り言 ¦ コメント (0)

INST-web、電器屋Walkerは「さくらのレンタルサーバー」を借りて運用しています。

2017年3月
« 8月    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Photo Hito

PHOTOHITOブログパーツ

音楽素材Musmus

電器屋WalkerのBGMはこちらを利用させて頂いております。

RSS FEED

INST-web [ ストブロ ]のRSSフィード