【激熱】ソフトバンクのAQUOS R3を購入して高額キャッシュバックをGETする方法

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

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

LINE Payでコンビニなどのリアル店舗でQR/バーコード支払いする方法 – 実際の支払いはこうやる!ついにセブンイレブンでも使える

LINE

〇%還元や〇ポイントキャッシュバックなどキャンペーンも多彩なLINE Payのコード支払いを実際にやってみた

Amazon Music Unlimitedを90日間無料で利用する方法 – 通常の30日から90日に延長!非プライム会員も対象

キャンペーン

Amazonの音楽聞き放題サービス「Music Unlimited」が90日間も無料で体験できちゃう!

【6ヵ月無料!!】auでスマホを購入してApple Musicを6ヵ月無料で利用する方法 – iPhone、Androidが対象!適用条件など

Apple Music

auが太っ腹なキャンペーンを開始。iPhoneでもAndroidでも対象機種購入でApple Musicが6ヵ月無料!


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

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

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


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




新着記事

『a-nation 2019』の生配信を視聴する方法

webサービス

エイベックス国内最大級の夏フェス「a-nation 2019」の大阪公演をdTVで生配信!

【毎週月曜日】auマンデイで映画を1,100円でお得に見る方法

映画

auユーザーじゃなくてもOK!auマンデイを利用して映画を安く鑑賞しちゃおう!

【毎月11日&22日】ワイモバイルの「ゾロ目の日特別セール」でスマホを激安でゲットする方法

セール

Yahoo!JAPANワイモバイルオンラインストアで毎月11日と22日にスマホが激安で販売される「ゾロ目の日特別セール」が開催!

【11日&22日】Yahoo!ショッピング、トラベル、ダイニングで『ゾロ目の日』限定クーポンをゲットする方法

キャンペーン

ゾロ目の日はYahooショッピングなどが意外とアツい!ただクーポンは争奪戦なのでお早めに!

Google HomeでAmazon Music(Unlimited含む)の音楽を再生する方法

ガジェット

Google HomeでもAmazon Musicを再生することはできる


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    【Hulu】動画をダウンロードする方法 – オフライン再生に対応!けど制限多くてダウンロードできない動画も多々。。

    Huluでデータ通信量を使いまくっていた人に朗報!オフラインでも再生できるぞー


    【LINE】トークの写真、画像内の文字を読み取ってテキスト化する方法 – 写真の中の文字をメッセージに変換。翻訳もできる!OCRアプリとして使えちゃう

    これは便利!スクリーンショット画像の文字をLINEに読み取ってもらってそのままメッセージとしてトークに送信したり翻訳したりできちゃう!


    【ポケモンGO】アプリを起動しなくても距離をカウントする『いつでも冒険モード』の設定方法 – Pokemon GO Plusとの違い、比較

    ついにアプリ画面を開いていなくてもポケモンGO内の距離がカウントされるモードが登場!ポケモンGOプラスユーザーも設定しておくことをオススメします


    【PayPay】クレジットカードの本人認証(3Dセキュア)を設定する方法&エラーが表示される時の対処方法 – 「青いバッジ」表示で上限が25万円に復活!

    100億円あげちゃうキャンペーン第2弾スタートと同時に「青バッジ」が登場。青バッジが表示されているユーザーは上限25万円に。


    Galaxy Note9(ドコモ版:SC-01L)実機レビュー – 先代のNote8と比較してみた。スペック&機能は文句なし!価格はもうしょうがない…?

    ドコモとauから発売されている国内版のGalaxyNote 9レビュー!ついにSペンがBluetoothに対応した進化したNoteです


    注目の記事をぜんぶ見る

  • 最新記事

    『a-nation 2019』の生配信を視聴する方法

    エイベックス国内最大級の夏フェス「a-nation 2019」の大阪公演をdTVで生配信!


    【毎週月曜日】auマンデイで映画を1,100円でお得に見る方法

    auユーザーじゃなくてもOK!auマンデイを利用して映画を安く鑑賞しちゃおう!


    【毎月11日&22日】ワイモバイルの「ゾロ目の日特別セール」でスマホを激安でゲットする方法

    Yahoo!JAPANワイモバイルオンラインストアで毎月11日と22日にスマホが激安で販売される「ゾロ目の日特別セール」が開催!


    【11日&22日】Yahoo!ショッピング、トラベル、ダイニングで『ゾロ目の日』限定クーポンをゲットする方法

    ゾロ目の日はYahooショッピングなどが意外とアツい!ただクーポンは争奪戦なのでお早めに!


    Google HomeでAmazon Music(Unlimited含む)の音楽を再生する方法

    Google HomeでもAmazon Musicを再生することはできる


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

  • usedoorをフォロー


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

    【7月はランチが20%還元】『ワクワクペイペイ』の内容&参加条件まとめ – PayPayでおトクに買い物する方法 – 8月はコンビニも!

    月替わりで開催されるPayPayのおトクなキャンペーン「ワクワクペイペイ」参加条件や今月対象のお店は?


    【iPhone SEが機種変でも10,800円!!】ソフトバンクのスペシャルフェアでiPhone SEやXperia、HTC U11をおトクに購入する方法 – アウトレット品が登場中

    機種変更も対象に!ひっそりとソフトバンクオンラインショップ限定のアウトレットキャンペーンが開催中!


    【7月31日まで期間延長!】ドコモオンラインショップリニューアルキャンペーンでおトクにiPhoneやAndroid、ケータイなどを購入する方法

    2019年6月にドコモオンラインショップがリニューアル!記念して当選確率が高いキャンペーン開催中!


    【7月版】最大6ヵ月無料!! Yahoo!プレミアムに無料で登録する方法 – さらにYahooショッピングのクーポンも!

    対象者限定で最大6ヵ月無料!対象かどうかはアクセスしてチェックしてみて


    【一括2万円】ソフトバンクのiPhone XRを激安で購入する方法

    ソフトバンクのiPhone XRが激安!MNP(のりかえ)なら一括20,000円!


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

  • あわせて読みたい記事