「いいね」タグアーカイブ

Facebookの「いいね」ボタンと、タイムラインをスマホサイトでレスポンシブにする。CSSでdata-widthの設定

Facebookのタイムラインを埋め込むと横幅が660px固定になる

 
スマホやタブレット向けの可変Webサイト、いわゆるレスポンシブデザインというものがあるが、Facebookのタイムラインが微妙にレスポンシブデザインに対応していない。
 
 
これはCSSでうまく対応できるので、紹介しておこう。

 
 

<div class=”fb-page” data-href=”https://www.facebook.com/あなたのFacebookページ” data-width=”660″ data-height=”800″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”false” data-show-posts=”true”><div class=”fb-xfbml-parse-ignore”><blockquote cite=”https://www.facebook.com/あなたのFacebookページ”><a href=”https://www.facebook.com/あなたのFacebookページ”>Universal Strength</a></blockquote></div></div>

 

これがFacebook公式からコピペした状態だ。

見ても分かる通り、data-widthが660で固定になっているように見える。何やってねんザッカーバーグ。アホか。
と思った人も少なくなかろう。
 
 

実はFacebookは自動でスマホ向けに最適化される

 
実は、「data-width」は660と書いてはいても。実は自動である程度サイズを合わせてくれる。
fb-responsive1
↓↓↓↓スマホ表示↓↓↓↓
fb-responsive2


 
 
 
 
これでも使えなくはない。ただし、スマホで見ると、画面横幅いっぱいいっぱいにFacebookのタイムラインが広がり、スマホ画面のフリックでスクロールしてもタイムラインのスクロールになってしまう。

結果としてWebサイト自体のスクロールがやりにくくなるわけだ。
ザッカーバーグ。アホか。
 
 

「data-width: auto;」は無効化されるので、その対策

 
古いバージョンのFacebookタイムライン表示だと「data-width」を任意の値や、 data-width: auto;にすることで対応できたが、現行(2015年7月時点)のバージョンではこれは自動で無効化されてしまう。
 
これは、下記をスタイルシートにコピペでうまく対応できる。
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 97% !important;
height: 100px !important;
}

 
つまり、「画面の幅の97%までにしろ。」ということで、両端(または右端)に3%の隙間ができるので、ページをスクロールさせられる。
 
もちろん90%でも80%でもいい。
 
 
これをスマホサイトのみに適応させるには、下記のような、メディアアンカー内に記述するといい。

@media screen and (max-width:600px){

}

 
 
メディアアンカーを使わないなら、
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
max-width: 97% !important; /*←最大値を制限に変更*/
height: 100px !important;
}

こちらをCSSにコピペの方がいいかもしれない。

関連記事:
facebookのタイムラインの div に display:none; のCSSを適用する方法を利用して、スマホでは非表示にすることも可能。

この記事も読まれています

Facebookの「いいね!」や「シェア」の言語を変えて「Like」とか「Share」とかにする方法

色々な言語でFacebookのシェアボタンを表示する

 

FBのシェアボタンやいいね!ボタンを設置して、何かの拍子で言語を変更したい時がある。
外国語サイトを運営してる時とか、何かの拍子でかっこつけたい時なんかにどうぞ。

ソースの触る場所

fb-comment

上記写真の矢印の部分、

if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

書き出すと、この写真の中で「en_GB」となってる部分。これが日本語なら「ja_JP」となっている。ここを変えるだけでOK。

 

具体的にどんな言語があるの?

2015年2月時点でFacebookで利用可能な言語の一覧を全部書いておく。

A-Zの順番。

af_ZAアフリカーンス語 南アフリカ共和国
ar_ARアラビア語
az_AZアゼルバイジャン語
be_BYベラルーシ語
bg_BGブルガリア語
bn_INベンガル語 インド西部
bs_BAボスニア語
ca_ESカタルーニャ語
cs_CZチェコ語
cx_PHキューバ語
cy_GBウェールズ語
da_DKデンマーク語
de_DEドイツ語
el_GRギリシャ語
en_GBイギリス英語
en_PIカリブ英語
en_UD上下逆英語
en_USアメリカ英語
eo_EOエスペラント後
es_ESスペイン語
es_LAラテンアメリカスペイン語
et_EEエストニア語
eu_ESバスク語(スペイン北部)
fa_IRペルシャ語
fb_LTネット上のラテン語表記
fi_FIフィンランド語
fo_FOフェロー語  デンマークの一部
fr_CAカナダフランス語
fr_FRフランス語
fy_NLフリジア語 オランダの一部
ga_IEアイルランド語
gl_ESガリシア語 スペイン北西部
gn_PYグアラニー語 パラグアイ
gu_INグジャラート語 インド西部
he_ILヘブライ語
hi_INヒンディー語
hr_HRクロアチア語
hu_HUハンガリー語
hy_AMアルメニア語
id_IDインドネシア語
is_ISアイスランド語
it_ITイタリア語
ja_JP日本語
ja_KS関西弁
jv_IDジャワ語
ka_GE英古語
kk_KZカザフスタン語
km_KHクメール語
kn_INカンナダ語 インド南部
ko_KR韓国語
ku_TRクルド語 トルコ東部
la_VAラテン語
lt_LTリトアニア語
lv_LVラトビア語
mk_MKマケドニア語
ml_INマラヤーラム語 インド南部
mn_MNモンゴル語
mr_INマラーティー語 中央インド
ms_MYマレー語
nb_NOノルウェー語
ne_NPネパール語
nl_NLオランダ語
nn_NO新ノルウェー語
pa_INパンジャーブ語 インド・パキスタン
pl_PLポーランド語
ps_AFパシュトー語 アフガニスタン東部
pt_BRポルトガル語 ブラジル
pt_PTポルトガル語
ro_ROルーマニア語
ru_RUロシア語
si_LKシンハラ語 スリランカ北部
sk_SKスロバキア語
sl_SIスロベニア語
sq_ALアルバニア語
sr_RSセルビア語
sv_SEスウェーデン語
sw_KEスワヒリ語
ta_INタミル語 スリランカ南部
te_INテルグ語 インド南部
tg_TJタジキスタン語
th_THタイ語
tl_PHフィリピン語
tr_TRトルコ語
uk_UAウクライナ語
ur_PKウルドゥー語 パキスタン
uz_UZウズベキスタン語
vi_VNベトナム語
zh_CN北京語
zh_HK中国語 香港
zh_TW中国語 台湾

全90言語。