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 で...』とあるのですが、これはクライアント側で処理するか、サーバー側で処理するのか?という永遠のテーマかと。難しいです。サーバー側の処理だとサーバーのコンディションに依存するんですよね。たぶん。

 

シェア大歓迎

この記事が役に立ったり、参考になったり、読んで嬉しいと感じていただけたら、ぜひ下のボタンからシェアしてください。シェア・ツィートしていただけると、飛び跳ねるほど嬉しく、今後の記事作成の原動力になります。

大歓迎です!ぜひシェアしてください。


広告

この記事を書いた人

ものくろ(Webコーチ)

株式会社あみだす 代表取締役 / 博士課程中退(農学) / ブロガー / Web&Blogコーチ / 親指シフト orzレイアウト開発者 / 講師 / フリーランス / 旅人 / 民事裁判経験者 / 毎月どこかに出張

ブログは月間65万PVを記録(2016年1月)。 これまでに250回を超えるワークショップ開催・のべ1,200名のブログサポートに携わる。

WordPressが得意 / 好きなもの(無刻印キーボード・十割蕎麦・湯葉)/ あまり好みでないもの(ブロッコリー・値切り)

開催している講座に参加する

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告