【PS5 予約・抽選販売情報】「PlayStation 5 / Digital Edition」を予約・購入する方法

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

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

【ドコモ】『端末購入割引』でiPhone・Androidスマホをおトクに購入する方法 – 適用条件と割引による値下げ、現在の対象機種まとめ

携帯電話

ドコモの分離プラン導入後に新たに登場した「端末購入割引」 条件を満たしていれば機種変更でも対象のiPhoneやAndroidがおトクに買える!

【本体1円&5,000ポイント還元&3ヵ月間無料!!】楽天モバイル「Rakuten WiFi Pocket 2B」を実質0円以下で超おトクに購入する方法

キャンペーン

楽天モバイルのWi-Fiルーター第2弾「Rakuten WiFi Pocket 2B」が本体1円&5,000ポイント還元&回線3ヵ月無料!モバイルWi-Fi探していた人には激アツ!

【10月31日まで】Amazon Music Unlimitedが4ヵ月無料で利用できるクーポンをゲットする方法 – 誰でも取得できるTOKYO GAME SHOW 2021特典が激アツ

キャンペーン

AmazonのTOKYO GAME SHOW 2021のページにアクセスするだけで音楽聞き放題サービス「Music Unlimited」が4ヵ月無料となるクーポン配布中!

【増量中!!】楽天モバイルUN-LIMITをSIMのみ契約して最大21,000ポイントをゲットする方法 – SIMのみもiPhoneも対象!ポイント還元の条件など

携帯電話

楽天モバイルUN-LIMITが機種購入なしのSIMのみ契約で誰でも最大21,000ポイントを還元するキャンペーンを開催中!対象端末と条件まとめ。iPhoneでもOK

【9月版】楽天モバイル(UN-LIMIT)でほぼ0円で販売中のAndroidスマホ、Wi-Fiルーターまとめ – 動作保証端末を激安で購入する方法。iPhoneも大幅割引!

携帯電話

楽天モバイルはSIMだけ契約してSIMフリースマホで使えばOK!でもやっぱり正式対応しているスマホが欲しいという人へ


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

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

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


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


同じカテゴリの記事

【ドコモ】ケータイ補償サービスを使って携帯電話(スマホ)を修理する申請方法 – 新しい機種への交換もアリ

携帯電話

スマホを壊す、なくすという心配がある人は加入しておくといいかも。結果的にお安く直せます

ソフトバンクのMNP予約番号をWEBで発行する方法【ドコモ、au、楽天モバイル、格安SIMへ】

携帯電話

ソフトバンクのMNP予約番号(番号ポータビリティ予約番号)はウェブから簡単に発行できるぞ!


新着記事

【紹介コードあり!!】「みんなの銀行」をアプリで口座開設して現金1,000円をゲットする方法

銀行

紹介コードを入力して口座開設すると、紹介する人・紹介された人それぞれに現金1,000円が貰える「お友だち紹介プログラム」キャンペーン開催中!

【iPhone】Safariの新規タブの『プライバシーレポート』を非表示にする方法 -「トラッキング防止機能はプライバシー設定でオフです」などの表示がウザい。。

iPhone / iPad

Safariの新規タブの「プライバシーレポート Safariのサイト越えトラッキング防止機能は"プライバシー"設定でオフになっています」を非表示に

【9月27日まで】Amazonで最大6.5%還元!タイムセール祭り&ポイントアップキャンペーンでおトクにお買い物する方法 – 目玉アイテムまとめ

セール

Amazonタイムセール祭りが9月も開催!期間は9月25日(金)9:00~9月27日(月)23:59。ポイントアップキャンペーンも同時開催!

【iPhone 13 Proの在庫あり!!】ソフトバンクのiPhone 13 / 13 mini / 13 Pro / 13 Pro Maxを購入して高額キャッシュバックをGETする方法

携帯電話

ソフトバンク正規取扱店「スマホ乗り換え.com」でiPhone 13シリーズを購入すると最大2.2万円還元!

【iPhone】Safariの新規タブの『あなたと共有』を非表示にする方法 – iOS 15から新しいタブの真ん中に共有と友だちの名前が表示される…

iPhone / iPad

iOS 15以降のiPhoneのSafariで新規タブを開くと真ん中に『あなたと共有』と表示されてWEBサイトと友だちの名前が表示されるのを消す手順


≫ 新着記事をもっと見る

usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    『劇場版「鬼滅の刃」無限列車編 Blu-ray/DVD』を予約・購入する方法 – 店舗別グッズ、購入特典、先着特典あり

    『劇場版「鬼滅の刃」無限列車編』のBlu-ray&DVDの発売が決定!予約は3月16日0時より受付開始で発売日は2021年6月16日です。


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

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


    【激安SIM!!】HISモバイルの格安ステッププランが音声付き&1GBで590円!毎月の携帯電話料金をおトクにする方法

    2021年6月28日に提供がスタートしたHISモバイルの「格安ステッププラン」が激安すぎてヤバい!月額料金は音声付きプランで590円~!


    【保存版】ネットフリックスの隠しカテゴリの裏コード&リンクまとめ – NETFLIXで動画をより詳細なジャンルで探す方法

    NETFLIXにはトップページなどには表示されていない、より詳細なカテゴリ、ジャンルページがたくさんある!


    【実質0円以下!!】楽天モバイル(UN-LIMIT)の『Rakuten Hand』を超激安で購入する方法 – 超大幅ポイント還元

    ジャストサイズで高性能な楽天モバイルオリジナル端末「Rakuten Hand」が超大幅ポイント還元で実質0円以下!超激安に!!


    注目の記事をぜんぶ見る

  • 最新記事

    【紹介コードあり!!】「みんなの銀行」をアプリで口座開設して現金1,000円をゲットする方法

    紹介コードを入力して口座開設すると、紹介する人・紹介された人それぞれに現金1,000円が貰える「お友だち紹介プログラム」キャンペーン開催中!


    【iPhone】Safariの新規タブの『プライバシーレポート』を非表示にする方法 -「トラッキング防止機能はプライバシー設定でオフです」などの表示がウザい。。

    Safariの新規タブの「プライバシーレポート Safariのサイト越えトラッキング防止機能は"プライバシー"設定でオフになっています」を非表示に


    【9月27日まで】Amazonで最大6.5%還元!タイムセール祭り&ポイントアップキャンペーンでおトクにお買い物する方法 – 目玉アイテムまとめ

    Amazonタイムセール祭りが9月も開催!期間は9月25日(金)9:00~9月27日(月)23:59。ポイントアップキャンペーンも同時開催!


    【iPhone 13 Proの在庫あり!!】ソフトバンクのiPhone 13 / 13 mini / 13 Pro / 13 Pro Maxを購入して高額キャッシュバックをGETする方法

    ソフトバンク正規取扱店「スマホ乗り換え.com」でiPhone 13シリーズを購入すると最大2.2万円還元!


    【iPhone】Safariの新規タブの『あなたと共有』を非表示にする方法 – iOS 15から新しいタブの真ん中に共有と友だちの名前が表示される…

    iOS 15以降のiPhoneのSafariで新規タブを開くと真ん中に『あなたと共有』と表示されてWEBサイトと友だちの名前が表示されるのを消す手順


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

  • usedoorをフォロー


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

    【9月版】ahamoを通常よりもおトクに契約する方法 – 開催中のキャンペーンまとめ。ドコモSIM経由で10,000dポイント、のりかえで7,000dポイント還元など

    ahamoをのりかえ(MNP)契約で7,000dポイント還元キャンペーン開始!その他、エリア限定や機種購入でdポイント還元、裏技っぽい契約など


    ペイペイジャンボとは?還元条件、対象ショップまとめ – おトクに支払いする方法。9月~11月は秋のペイペイジャンボ(オンライン)

    最大1,000%還元や全額還元などが当たる「ペイペイジャンボ」開催!対象となる条件や特典をまとめました


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

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


    【9月版】『ワクワクペイペイ』キャンペーン内容&参加条件まとめ – 9月は街ペイペイ祭、クーポンや地域限定etc… PayPayでおトクに買い物する方法

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


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

    ソフトバンクのAndroidスマホを購入するとキャッシュバックがもらえるぞ!さらにクーポンでPayPayボーナスももらえる!


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

  • あわせて読みたい記事