Facebookのウィジェット(Like Box)を表示を重くしない!ように設置。

この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

Facebookにてブログをアピールすることが重要になりました。いわゆる口コミです。

ブログのFacebook主張所となるのが”Facebookページ”です。ものくろぼっくすもあります。

ものくろぼっくす facebook ページ

Facebookページのイイね ウィジェット(Like Box)をブログに設置したときに、いくつか気をつけた点があるので紹介します。

設置方法

facebookページ Like Box のコードは下のページで作成できます。

Like Box

設置方法の詳しい点はこちらのサイトさんにお世話になりました。こんな分かりやすい記事を書きたいものです。

【Facebook】Like Box を設置して ウェブサイトのファンを増やす : C-through the Mac

Like Box の設置方法を見てみます。 「いいね!」ボタンと同じように、HTMLコードを入手して、ウェブページにコピペする手順になります。 事前に Facebookページを作成し、Applica …

今回設置したときに気にした...

  • HTML5?IFRAME?どれがいいの?
  • サイトの表示速度について
  • el-palno 独特の注意点

3つをメモします。

HTML5?IFRAME?どれがいいの?

スクリーンショット 2013 12 18 15 44 58

最後のURLは単純なリンクなのでちょっと置いておいて、3つ選択肢があります。『一つにしておいてよ、迷うやん』ということになります。

記事に貼る”イイね(Likeボタン)”は HTML5かXFBMLを使った方が拡散力があると言われています。

コメント入力用のポップアップが出てきて、話題になりやすい。

なるほど。ただし、、、

「HTML5」と「XFBML」のどちらも JavaScript の埋め込みが必要となり、bodyタグのすぐ後ろに”コード
”を書き足します。非同期なので、自サイトのレンダリングに悪影響はすくない。

今回は”ボタン”でなく『LikeBox』を設置するので、上は参考情報として押さえておきます。

LikeBoxはどうなのか..調べたのですが..どうもよくわからないんです。どれでもイイらしい...そんな雰囲気でした。

facebook Like Box html5 xfbml iframe 違い – Google 検索

ただ、コードの埋め込みが問題なければ「HTML5」と「XFBML」の方が良さそうです。非同期なためサイトの表示にもいいのかなぁ?まあ..なんだかカッコいいし

使っているel planoテーマは頻繁にアップデートがあります。 なので、あんまりコードを直接 追記したくないんです。テーマアップデートの時に放ったらかしていたら、上書きで消えます。

明日になったら、追記したコードのことなんか”すっきり”忘れる自信もあります。その結果...トラブルの原因になるんです。

そんな後ろ向きな理由で『IFRAME』を選択しました。

サイトの表示速度について

サイトの表示は速い方がイイ。速さは力。インテル はいってる。

ということで調べたら、ありました。分かりやすい説明です。ありがとうございます。

Like Box の顔写真の表示数が速度に大きく影響する

そんな...さみしがり屋なので友達たくさんって自慢したいのですが。その分表示は遅くなるんですね。

重い!Facebook の Like Box の表示を軽くする努力してみよー! : actyway

今回は Like Box の顔写真の表示数を減らす為の方法を探してみました!少しは軽くなったのではないでしょーか??w 基本的にレイアウトは度外視して速度優先な方法だと思います。 ソースコードは I …

表示数はFacebookの仕様変更で上手く調整できなかったのですが..、画像を少なくするアイデアは参考になりました。

できる限りLike Boxを小さくしました。下に試しに貼ってみました。

IFRAMEでの埋め込みです。ぜひこの機会に”イイね”を!笑。

そうそう『「HTML5」と「XFBML」はスクリプトを実行後に結局 iframe で...』とあるのですが、これはクライアント側で処理するか、サーバー側で処理するのか?という永遠のテーマかと。難しいです。サーバー側の処理だとサーバーのコンディションに依存するんですよね。たぶん。

 

講座 開催予定

この記事を書いた人