ApplePayにも対応!誰でも超おトクなdカード、dカードGOLDの使い方

新着を見る



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

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




新着記事

【初心者向け】ふるさと納税の考え方、自分がいくら寄付できるかを調べる方法&オススメの納税方法

国や地方の制度

まだやってない人向けに「ふるさと納税」をできるだけわかりやすく書いてみた(つもり)

【LINE】タイムラインに大文字で投稿する方法 – 文字がデカいので目立つ。強調したいときにどうぞ

LINE

文字がけっこうデカくなるので目立つ。タイムラインを強調したい時に。

【12/3深夜0時~】伝統の一戦『エル・クラシコ』を無料で見る方法

スポーツ

スポナビライブなら無料でクラシコ(バルセロナ VS レアルマドリード)が視聴できるぞ!


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    ドコモ 2016~2017冬春モデルのスペックまとめ、比較&おトクに購入する方法

    10月19日に発表されたドコモの2016~2017冬春モデルまとめ


    iPhone・iPadのコントロールセンターの『Night Shift』ボタンが押せない、ONにできない時の対処方法

    コントロールセンターのNight Shiftボタンがグレーアウトしていたら…


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

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


    注目の記事をぜんぶ見る

  • 最新記事

    【初心者向け】ふるさと納税の考え方、自分がいくら寄付できるかを調べる方法&オススメの納税方法

    まだやってない人向けに「ふるさと納税」をできるだけわかりやすく書いてみた(つもり)


    【LINE】タイムラインに大文字で投稿する方法 – 文字がデカいので目立つ。強調したいときにどうぞ

    文字がけっこうデカくなるので目立つ。タイムラインを強調したい時に。


    【12/3深夜0時~】伝統の一戦『エル・クラシコ』を無料で見る方法

    スポナビライブなら無料でクラシコ(バルセロナ VS レアルマドリード)が視聴できるぞ!


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

  • 人気記事ランキング

    auでお得に機種変更する方法!157に電話するだけで最大30,000ポイントがもらえる『MNP引き止めポイント』

    auでお得に機種変更する方法!157に電話するだけで最大30,000ポイントがもらえる『MNP引き止めポイント』

    auユーザーは必見!機種変更前に絶対に確認した方がいいauMNP引き止めサービス!お得にiPhone7をGETできるかも!?...


    151に電話するだけで最大20,000dポイントがもらえる『ドコモ特別割引クーポン』 – ドコモでお得に機種変更する方法

    151に電話するだけで最大20,000dポイントがもらえる『ドコモ特別割引クーポン』 – ドコモでお得に機種変更する方法

    ドコモユーザーは必見です!機種変更前に絶対に確認した方がいいドコモ裏サービス!?...


    ランキングを見る

  • 使い方 カテゴリー

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

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


  • サイト運営・コード・htmlの他の記事

    サイト運営・コード・htmlの記事一覧