【新生活にはWiMAX】今月の最安はこれだ!WiMAX 2+の料金比較まとめ - 最安でWiMAX 2+を契約する方法

最終更新 [2015年3月20日]





facebookの「いいね!ボックス」ことLikeBoxの作り方、サイトやブログへの設置方法です。

ブログやWEBサイトのサイドバーやら記事の下などによく設置してあるfacebookの↑
『Facebookもチェック。○○人が「いいね!」と言っています。』というやつです。

そのサイトのサイト名やサムネイル、そのサイトに対していいね!している自分の友だちなどが表示されていたりします。

これはfacebookではLikeBoxと呼ばれているもので直訳すると「いいね!ボックス」です。
ソーシャルプラグインといわれるものの1つでfacebook公式で作ることができます。
設置もコードをサイト内に埋め込むだけでとってもカンタンです。

このLikeBoxをusedoorでも作って設置してみたくなったので作り方・設置方法のメモ書きです。


facebookのLikeBoxの作り方・設置方法

usedoorのやつ作ってみた。

usedoorのfacebookページ

これから紹介するやり方でusedoorのfacebookページのLikeBoxを作ってみました。
facebookでも最新情報や気になったことをチラチラと発信していますのでどうぞ「いいね!」してやってくださいm(._.)m

facebookDevelopersからカンタンに作れちゃう!

LikeBoxはfacebookDevelopersのページからカンタンに作成できます。
↓にアクセスします。
https://developers.facebook.com/docs/plugins/like-box-for-pages

↑にアクセスするには「個人のユーザーでログインしている」必要があります。
facebookページのユーザーでログインしているとユーザー変更を求められますぜ。

Facebook Page URL

LikeBoxに使いたいfacebookページのURLを入力します。
usedoorだと「https://www.facebook.com/usedoor」となります。

Width

作成するLikeBoxのヨコ幅を設定します。
指定しない場合、横幅が300ピクセルのLikeBoxを表示します。

自分のサイトの設置したい場所の幅に合わせるのがいいと思います。

Height

作成するLikeBoxのタテ幅を設定します。
指定しない場合、縦幅が270ピクセルのLikeBoxを表示します。

Show Friends’ Faces:友だちの顔を表示するかの設定
Show Posts:このfacebookページの投稿を表示するかの設定

Color Scheme

LikeBoxの全体のカラー設定
といっても白基調の「light」か黒基調の「dark」しか選択できませんが。。

Show Header:LikeBoxの上の「Facebookもチェック」の有無
Show Border:LikeBoxを線で囲むかどうかの設定


全部の設定が終わったら「Get Code」をタップしてコードを取得します。

コードは2つあります。
上のコード:<body>タグの下に書いておくfacebookとのデータのやり取りを行うjavascript
下のコード:Likeboxを呼び出すコード
となります。


サイト・ブログに設置する

あとはサイトやブログに設置するだけでOKです。
サイトのソースを開いて<body>が始まる部分を探します。
<body>タグのすぐ下に↑で表示された1つ目のコードを埋め込みます。


次に設置したい場所に2つ目のコードを埋め込みます。

以上で完了です。

これでLikeBoxがWEBサイトに埋め込むことができます。

facebookのソーシャルプラグインの中でも人気の高いLikeBoxの設置方法は以上です。
サイトやブログを運営されている方は是非とも使ってみてくださいなー。

usedoorのFacebookページも引き続き宜しくお願いしますm(_ _)m

usedoorのfacebookページ


< この記事をシェア >






このfacebookのいいね!が増える? 公式LikeBoxの作り方・設置方法の最終更新日は2015年3月20日です。
記事の内容に変化やご指摘がありましたら問い合わせフォームまたはusedoorのTwitterまたはusedoorのFacebookページよりご連絡ください。

現在開催中の「おトク」なキャンペーン、セール

ドコモで値下げされまくって激安で購入できるスマホまとめ – 価格と割引条件など。おトクに購入する方法

携帯電話

ドコモがSPECIALキャンペーンにiPhoneやAndroidを大量追加!機種変更でも激安で買えるスマホが多数!

【最大20%還元】PayPayモール『100億円相当あげちゃうキャンペーン』の概要や適用条件&注意点などまとめ – おトクに買い物する方法

キャンペーン

PayPayモールで「PayPay残高」または「ヤフーカード」でお支払いすると最大20%還元の激熱セール!「倍!倍!ストア」併用でさらに還元率アップ!

「楽天トラベル」のクーポンをゲットする方法&キャンペーンまとめ

キャンペーン

楽天トラベルのクーポンやキャンペーンを利用しておトクに旅行にいこう!

【最大1.5万円還元】ワイモバイルを通常よりおトクに契約する方法 – 5のつく日&ゾロ目の日がお得

キャンペーン

ワイモバイルを契約するとPayPayを最大9,600円相当還元!代理店経由なら最大15,000円キャッシュバック!

【最大10,000dポイント】毎日運試し。わくわく毎日くじでdポイントをゲットする方法

キャンペーン

4毎日引けるdポイントが当たるくじが登場。最高は10,000dポイントらしいけど…


≫ 開催中のキャンペーンをもっと見る

usedoorの新着記事をチェック!

記事を書くヤル気が出るのでフォローよろしくお願いしますm(._.)m


キーワード:いいね! , ソーシャルプラグイン , 公式 ,




同じカテゴリの記事

楽天モバイル1周年記念超豪華4大キャンペーン! – 格安SIMでキャッシュバックをGETする方法

キャンペーン

楽天モバイルを契約するのであればこのキャンペーン中に申し込んだ方がよさそうです!

トーンモバイルをおトクに契約する方法 – 実施中のキャンペーンまとめ

キャンペーン

学割やシニア割、Tポイントプレゼント、機種変更キャンペーンなど様々なキャンペーンが実施中!

【抽選で300名】Prime Musicの曲を聴くだけでBoseのスピーカーが当たる! – AmazonでBluetoothスピーカーをGETする方法

キャンペーン

キャンペーンは6/28まで!プライム会員なら簡単にキャンペーンに参加できます。


新着記事

【LINE】プロフィール画像に「うちで過ごそう」フレームを設定する方法 – 外出自粛を友だちにアイコンで呼びかけよう!

LINE

LINEの友だちに「うちで過ごそう」がついたプロフィール画像(アイコン)で外出自粛を呼びかけることができる

【剣心と一緒に眠れるクッション】映画「るろうに剣心 最終章」のセブンネット限定グッズ付き前売券を予約・購入する方法

映画

セブンネットショッピングで映画「るろうに剣心 最終章 The Final/The Beginning」の前売り券と限定グッズの販売がスタート

iPhone単体で写真をPDFに変換する方法

iPhone / iPad

iPhoneで撮影した、中に保存されている写真はiPhoneだけでPDFに変換することができる

【先着1,000名】ドコモのらくらくスマートフォンme(F-01L)をおトクに購入する方法 – 急速充電対応「ACアダプタ 07」が無料でついてくる!

キャンペーン

ドコモが久々にらくらくスマホの購入キャンペーンを開催。先着1,000名に急速充電対応のACアダプタ 07がついてくるぞー


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    Google Pixel 3a実機レビュー – Pixel 3とのスペックやサイズ、違いを徹底比較!5万円以下で買えるGoogle謹製スマホの実力は?

    48,600円~購入できるGoogle謹製「Pixel 3a」の実機を使ってみた!この価格で素のAndroidが楽しめる嬉しい1台


    LINEモバイルを通常よりおトクに契約する方法 – SNS使い放題でも2ヵ月無料&7,109円分が必ずもらえる!スマホ大還元祭も

    ドコモ、au、ソフトバンク全ての回線が選べるLINEモバイル。キャンペーンを使えばもっとおトクに契約できる!


    【iPhone】100%フル充電できない時の対処方法 – どんなに充電しても80%で充電が止まる… iOS 13「最適化されたバッテリー充電」対応

    最近マジ暑いなぁと思っていたらiPhoneも熱くなってフル充電できなくなっちゃった。。iOS 13からは機能としても登場


    【値下げで安い!!】ドコモのiPhone XRの契約別価格まとめ&おトクに購入する方法 – 機種変更でも大幅割引で販売中

    iPhone XRがドコモオンラインショップでおトクに機種変更できる「SPECIAL割引」の対象に!!


    【4月版】格安SIM(MVNO)料金徹底比較・まとめ&キャンペーン情報! – 最安の格安SIMを調べる方法

    今、契約するなら一番おトクな格安SIMは?キャンペーンを利用してお得に契約しちゃおう!


    注目の記事をぜんぶ見る

  • 最新記事

    【LINE】プロフィール画像に「うちで過ごそう」フレームを設定する方法 – 外出自粛を友だちにアイコンで呼びかけよう!

    LINEの友だちに「うちで過ごそう」がついたプロフィール画像(アイコン)で外出自粛を呼びかけることができる


    【剣心と一緒に眠れるクッション】映画「るろうに剣心 最終章」のセブンネット限定グッズ付き前売券を予約・購入する方法

    セブンネットショッピングで映画「るろうに剣心 最終章 The Final/The Beginning」の前売り券と限定グッズの販売がスタート


    iPhone単体で写真をPDFに変換する方法

    iPhoneで撮影した、中に保存されている写真はiPhoneだけでPDFに変換することができる


    【先着1,000名】ドコモのらくらくスマートフォンme(F-01L)をおトクに購入する方法 – 急速充電対応「ACアダプタ 07」が無料でついてくる!

    ドコモが久々にらくらくスマホの購入キャンペーンを開催。先着1,000名に急速充電対応のACアダプタ 07がついてくるぞー


    最新記事をもっとチェック

  • usedoorをフォロー


  • 現在開催中の"おトク"なセール、キャンペーン、お買い得アイテムまとめ

    【4月版】dカード&dカード GOLDのおトクな使い方、徹底まとめ。ドコモユーザー以外にもメリット多数!1億円還元やおトクな入会キャンペーン開催中

    10%還元で噂のdカード GOLDと通常dカードの還元率、メリット、デメリット、比較、疑問を徹底的にまとめています


    【最大+7%還元】『dポイント スーパー還元プログラム』でおトクにd払い&iDで支払いする方法 – ドコモユーザー以外もOK!

    6月10日から始まる「dポイント スーパー還元プログラム」参加しておいて損はなし。要エントリーなのでご注意を


    【いつでもピザが30%オフ!!】ドミノ・ピザの割引クーポンまとめ – クーポン取得&利用手順。おトクにピザを注文する方法

    ドミノ・ピザを注文する前におトクなクーポンが配布されていないかチェック!常時30%割引となるクーポン配布中!


    【最大3万円還元】ソフトバンクのiPhone XS / XS Maxを購入して高額キャッシュバックをGETする方法

    のりかえならキャッシュバックとクーポンで実質47,760円でiPhone XS 256GBが買えるぞ!


    【キャッシュバック】ソフトバンクのiPhone XRを激安で購入する方法

    ソフトバンクのiPhone XRが激安!通常よりお得に買えるぞ!


    開催中のキャンペーンをぜんぶ見る

  • あわせて読みたい記事