【激熱!!】ソフトバンクのiPhone 11 / 11 Pro / 11 Pro Maxを購入して高額キャッシュバックを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ページよりご連絡ください。

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

【現金9.2万円もらえる】ソフトバンクのiPhone 8を購入して高額キャッシュバックをGETする方法

携帯電話

MNPでソフトバンクのiPhone 8買うならここがいいかも!高額キャッシュバックがもらえるぞ!

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

キャンペーン

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

【9/12まで!】ソフトバンクのスペシャルフェアでiPhoneやXperiaをおトクに購入する方法 – アウトレット品が登場中

携帯電話

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

【9/30まで】ダイソンが8%還元キャンペーンを開催! – ダイソン製品をおトクに購入する方法

キャンペーン

ダイソン直販だけではなく、ヤマダ電機やビックカメラ、ヨドバシカメラなど家電量販店も対象です。Amazonも対象ですよ~

「楽天トラベル」のクーポンをゲットする方法

キャンペーン

クーポン祭!楽天トラベルのクーポンを使っておトクに旅行にいこう!


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

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

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


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




同じカテゴリの記事

【激熱】ドコモオンラインショップでiTunesコードを買うと1,000ポイントプレゼント! – お得にiTunesコードを購入する方法

キャンペーン

5,000円のiTunesコードが実質4,000円で買えるぞ!この激熱キャンペーンは8/16までなので購入するのであればお早めに!

【全員に1,000円プレゼントキャンペーン!】ドコモ口座Visaプリペイドに登録して1,000円もらう方法

キャンペーン

定額パックプランに登録するだけで1,000円もらえるぞ!これは熱いキャンペーン!


新着記事

【iOS 13からApp Storeのアップデートタブが消滅!!】App Storeでアップデート(更新)可能なアプリがあるか確認する方法

iPhone / iPad

iOS13からApp Storeのアップデートタブが無くなったのでアップデート確認方法が少しかわりました。この仕様変更微妙だな。。。

【iOS 13 新機能】iPhoneを『ダークモード』にする方法&解除する方法

iPhone / iPad

ついにiOS 13からダークモードが搭載!設定の背景色なども黒色に。目に優しい&電池持ちもアップ!!

【Twitter】ツイートへの特定のリプライ(@返信)を非表示にする方法 – 嫌がらせやスパムを隠すことができる。再表示もOK

Twitter

ツイートへのリプライを隠すことができる機能が登場!嫌がらせやスパム返信を非表示にすれば他のユーザーからも見えなくなる

【iOS 13 新機能】iPhoneとPS4用コントローラ(DUALSHOCK 4)を接続する方法

iPhone / iPad

iPhoneのゲームアプリがPS4用コントローラ「DUALSHOCK 4」で操作できるぞ!

【iPhone 8が一括0円!】ソフトバンクのiPhone 8を一括0円でGETする方法

携帯電話

のりかえならソフトバンクのiPhone 8が一括0円!のりかえで買うならここがおすすめ!


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    LINEで電車や駅での「忘れ物」「落とし物」を問い合わせする方法 – JR東日本ChatBotが優秀!

    電車内や駅で落としてしまった忘れ物をLINEで問い合わせることができるようになった!


    【重い…】iOS 11の動作を軽くする(体感速度を上げる)方法まとめ – 特に旧iPhoneなどにオススメ

    iPhone 6 Plus×iOS 11がやっぱり重く感じる。。そんな時はこの設定をできるところまでやってみて


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

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


    【LINE】自分が操作しているスマホの画面をリアルタイム共有する方法 – スマホやアプリの操作方法等を簡単にシェア!

    LINEを通して両親や友だちなどにスマホやアプリの操作方法などを教える、紹介する時にマジ便利!


    注目の記事をぜんぶ見る

  • 最新記事

    【iOS 13からApp Storeのアップデートタブが消滅!!】App Storeでアップデート(更新)可能なアプリがあるか確認する方法

    iOS13からApp Storeのアップデートタブが無くなったのでアップデート確認方法が少しかわりました。この仕様変更微妙だな。。。


    【iOS 13 新機能】iPhoneを『ダークモード』にする方法&解除する方法

    ついにiOS 13からダークモードが搭載!設定の背景色なども黒色に。目に優しい&電池持ちもアップ!!


    【Twitter】ツイートへの特定のリプライ(@返信)を非表示にする方法 – 嫌がらせやスパムを隠すことができる。再表示もOK

    ツイートへのリプライを隠すことができる機能が登場!嫌がらせやスパム返信を非表示にすれば他のユーザーからも見えなくなる


    【iOS 13 新機能】iPhoneとPS4用コントローラ(DUALSHOCK 4)を接続する方法

    iPhoneのゲームアプリがPS4用コントローラ「DUALSHOCK 4」で操作できるぞ!


    【iPhone 8が一括0円!】ソフトバンクのiPhone 8を一括0円でGETする方法

    のりかえならソフトバンクのiPhone 8が一括0円!のりかえで買うならここがおすすめ!


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

  • usedoorをフォロー


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

    dファッションのクーポンをゲットする方法

    ドコモが運営するd fashionにもクーポン多数!キャンペーンとクーポンを組み合わせるとめちゃくちゃ安くアイテムが買えることも多々!


    【iPhone 8が一括0円!】ソフトバンクのiPhone 8を一括0円でGETする方法

    のりかえならソフトバンクのiPhone 8が一括0円!のりかえで買うならここがおすすめ!


    【6.7万円還元!】ソフトバンクのAndroidを購入して高額キャッシュバックをGETする方法

    ソフトバンクのAndroidにお乗り換えすると高額キャッシュバックがもらえるぞ!


    【9月はスーパーマーケットが10%還元】『ワクワクペイペイ』の内容&参加条件まとめ – PayPayでおトクに買い物する方法 – 10月はスーパーライフ

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


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

  • あわせて読みたい記事