【新生活には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ページ


< この記事をシェア >




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

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


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

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




新着記事

ドラレコ買ったら絶対加入!! 無料で入れる補償『ドライブレコーダー買替補償制度』に加入する方法

乗り物

会費などは無料で登録しておくだけで事故時に一律4万円がもらえるドライブレコーダーの「保険」

iPhoneやiPadでゲーム内コインなど『アプリ内課金』をできないようにする方法 – 子供の課金防止にも有効

iPhone / iPad

LINEコインやポケコインなどアプリ内の課金をすべてできなくするiOS端末の設定です

【Windows10】『GUIブート』を無効化してPC起動を高速化する方法

パソコン

windows起動時のグルグルをすっ飛ばして高速起動できるようになるかも!


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    大人気『トランプマスク』を購入する方法 – いろんなトランプさんがいたのでまとめてみた!

    大人気のトランプマスクをがっつりまとめてみました!けっこう種類あることにビックリ


    Pokémon GO Plusを購入する方法 – 販売店舗まとめ

    [3月10日追記]リアル店舗やコンビニに続き、ソフトバンクショップとワイモバイルショップでもポケモンGOの販売が開始


    【ポケモンGO】イーブイの進化後ポケモンを指定する方法 – 全5種類。金銀アップデートの「エーフィー」「ブラッキー」対応

    金銀アプデでイーブイは全5種類の進化ができる!名前変更するだけだけど1回のみなのでご注意を


    本、雑誌、マンガなどが読み放題となる『Kindle Unlimited』を30日間無料で体験する方法

    ついに日本でもリリース。月額980円で読み放題。が、全部が対象じゃないのでご注意を。


    【激安】『24-TWENTY FOUR』が1シーズン1,000円ポッキリで販売中!GooglePlayで激安購入する方法

    1話あたり50円以下!レンタルじゃないのでいつでも視聴可能!


    注目の記事をぜんぶ見る

  • 最新記事

    ドラレコ買ったら絶対加入!! 無料で入れる補償『ドライブレコーダー買替補償制度』に加入する方法

    会費などは無料で登録しておくだけで事故時に一律4万円がもらえるドライブレコーダーの「保険」


    iPhoneやiPadでゲーム内コインなど『アプリ内課金』をできないようにする方法 – 子供の課金防止にも有効

    LINEコインやポケコインなどアプリ内の課金をすべてできなくするiOS端末の設定です


    【Windows10】『GUIブート』を無効化してPC起動を高速化する方法

    windows起動時のグルグルをすっ飛ばして高速起動できるようになるかも!


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

  • 人気記事ランキング

    【抽選販売受付中】「ニンテンドースイッチ」を予約・購入する方法

    【抽選販売受付中】「ニンテンドースイッチ」を予約・購入する方法

    Joshin webで6月21日16:59まで抽選販売の受付中です。ビックカメラ店舗で6月25日(日)に抽選販売!...


    【6/24抽選販売】「PS VR」を予約・購入できるオンラインショップ・店舗まとめ – 「Playstation VR」を購入する方法

    【6/24抽選販売】「PS VR」を予約・購入できるオンラインショップ・店舗まとめ – 「Playstation VR」を購入する方法

    Joshin webで抽選販売の受付してるぞ!6/20(火)16:59までです。ビックカメラ店頭でも6/24(土)に抽選販売するぞ~...


    【2017年版】ソフトバンク『スーパーフライデー』のメールが来ない場合の対処方法 – 学割SUPER FRIDAYも登場

    【2017年版】ソフトバンク『スーパーフライデー』のメールが来ない場合の対処方法 – 学割SUPER FRIDAYも登場

    2017年6月はセブンイレブンの人気商品!8月、10月も開催!ソフトバンクユーザーは激熱です!...


    ランキングを見る

  • 使い方 カテゴリー

    暮らし
    趣味
    節約・稼ぐ
    WEB
    デジタル
  • キーワード

    Amazon Android apple au Chrome iOS iOS 8 iPad iPhone iPhone 6 iPhone 6 Plus iPhone 6s iPhone 6s Plus iPhone 7 iPhoneおトク Kindle MNP PC SIMフリー SoftBank Windows windows 10 アップデート オトク キャッシュバック クーポン スタンプ スマートフォン セキュリティ ソフトバンク タブレット ドコモ ドコモオトク ドコモオンラインショップ レビュー ワイモバイル 削除 動画 料金 新規契約 楽天モバイル 機種変更 注目・ピックアップ 無料 登録
  • usedoorをフォロー


  • あわせて読みたい記事