【7月31日まで】ドコモのXperia XZ2やGalaxy S9、iPhone、iPad、タブレットが5,400円割引になるクーポンプレゼント中!

最終更新 [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ページよりご連絡ください。

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

【投げ売り】機種変更もOK。ドコモ『9.7インチiPad(第5世代)』を一括0円で購入する方法

携帯電話

第5世代のiPad 32GBモデルが一括0円。ストレージが大きいモデルも投げ売り価格で販売中

【7月16日まで】還元率50%+Amazonギフト券!!ふるさと納税の『日本旅行ギフトカード』がヤバい!「ふるなび」で超おトクにふるさと納税する方法

国や地方の制度

2018年5月にまたまた岐阜県池田町の返礼品でまさかの復活!『早期終了あり』とのことなのでお早めに。

【2ヵ月99円!!】激安!Amazonの読み放題サービス「Kindle Unlimited」に超おトクに登録する方法 – 7月17日まで

キャンペーン

本やコミック、雑誌が読み放題になるAmazonのKindle Unlimitedが激安で利用できる!

【徹底的】Amazonプライムで使えるサービスを使い倒す方法&年会費の元が取れるキャンペーンまとめ

webサービス

これだけのサービスが使えれば年会費は惜しくない!既にプライム会員の人は使えるサービスをフルに使い倒してみて!


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

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

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


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




同じカテゴリの記事

メルカリNOWの使い方 – 即時買取&現金化!

webサービス

これは便利!超簡単にアイテムを現金化できるぞ!不要な服などファッションアイテムはメルカリNOWで買取ってもらおう!

Huluを退会・解約、契約を解除する方法

webサービス

無料期間中に契約を解約すれば料金は発生しないぞ~


新着記事

【Amazon Prime Day(プライムデー)2018】 目玉商品、キャンペーンまとめ一覧・ゲットする方法

ショッピング

NEOGEO miniやBMW、Surface Pro、PlayStation 4 Proなど続々と目玉商品が公開されてきたぞ!

【限定版登場!!】『NEOGEO mini(ネオジオ ミニ)』を予約・購入する方法

ゲーム

AmazonやSNKオンラインショップで予約スタート!発売日は2018年7月24日で、価格は税抜11,500円です。

【限定版登場!!】『ニンテンドークラシックミニ ファミリーコンピュータ』を予約、購入する方法

ゲーム

任天堂公式が2018年の生産再開を発表!さらに『週刊少年ジャンプ50周年記念バージョン』も発売するぞ!

【限定版登場!!】『ニンテンドークラシックミニ スーパーファミコン』を予約・購入する方法

ゲーム

ミニスーファミ入荷・販売情報!ミニスーファミの発売日は10月5日で、価格は7,980円!


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    日本での『Uber』の使い方 – 実際乗ってみた!

    クーポンでのおトクな乗り方、配車方法、注意点、アプリ、タクシーとの比較などUberのことガッツリまとめました


    【機種変更もOK】ドコモの2016年~2017年冬春モデルのAndroidスマホを一括価格でおトクに購入する方法

    『V20 PRO』『arrows NX』『Galaxy S7 edge』『Disney Mobile』『Xperia X Compact』がどの契約でも一括15,552円


    【楽天ポイント】期間限定ポイントのオススメの使い方、楽天市場/サービス以外でも使えるお店や有効期限確認、少額でも使い切る方法

    いつの間にか貯まる『期間限定の楽天ポイント』楽天市場で無理やり使うのではなく街のお店などで効率的に使うのがいいかも!


    注目の記事をぜんぶ見る

  • 最新記事

    【Amazon Prime Day(プライムデー)2018】 目玉商品、キャンペーンまとめ一覧・ゲットする方法

    NEOGEO miniやBMW、Surface Pro、PlayStation 4 Proなど続々と目玉商品が公開されてきたぞ!


    【限定版登場!!】『NEOGEO mini(ネオジオ ミニ)』を予約・購入する方法

    AmazonやSNKオンラインショップで予約スタート!発売日は2018年7月24日で、価格は税抜11,500円です。


    【限定版登場!!】『ニンテンドークラシックミニ ファミリーコンピュータ』を予約、購入する方法

    任天堂公式が2018年の生産再開を発表!さらに『週刊少年ジャンプ50周年記念バージョン』も発売するぞ!


    【限定版登場!!】『ニンテンドークラシックミニ スーパーファミコン』を予約・購入する方法

    ミニスーファミ入荷・販売情報!ミニスーファミの発売日は10月5日で、価格は7,980円!


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

  • usedoorをフォロー


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

    【1,000ポイント+最大2.5%還元!!】Amazonギフト券を超おトクにチャージする方法

    自分が対象かどうかはすぐにチェックできる。Amazonで買い物するなら絶対おトク


    【7月版】機種変更アリ!ドコモから『648円以下』で販売されているiPhone・iPad・Androidスマホ・ガラケーまとめ – 激安でドコモ端末を購入する方法

    現在ドコモで販売されている648円以下(一括0円もあり)の機種を一括価格、実質価格、契約別にまとめました


    【7月16日まで】還元率50%+Amazonギフト券!!ふるさと納税の『日本旅行ギフトカード』がヤバい!「ふるなび」で超おトクにふるさと納税する方法

    2018年5月にまたまた岐阜県池田町の返礼品でまさかの復活!『早期終了あり』とのことなのでお早めに。


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

  • あわせて読みたい記事