【第4のキャリア】300万人が1年無料!楽天モバイル(Rakuten UN-LIMIT)の料金プラン、対応端末、注意点などまとめ

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

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

【必須!!】ドミノ・ピザの割引クーポンまとめ – クーポン取得&利用手順。おトクにピザを注文する方法

キャンペーン

ドミノ・ピザを注文する前におトクなクーポンが配布されていないかチェック!常時30%割引となるクーポン配布中!

【改悪】『dポイント スーパー還元プログラム』でおトクにd払い&iDで支払いする方法 – ドコモユーザー以外もOK!最大+7%還元になるけど条件が…

ポイント

5月10日以降は改悪…「dポイント スーパー還元プログラム」参加しておいて損はなし。要エントリーなのでご注意を

『楽天ひかり』を1年無料で利用する方法 – 楽天モバイルUN-LIMITとのコラボ企画。どちらも1年無料!参加条件と注意点

キャンペーン

家の固定回線「楽天ひかり」と携帯回線「楽天モバイルUN-LIMIT」が両方1年無料で使えるおトクなキャンペーン。注意点あり

dファッションのクーポン&キャンペーンまとめ – 1,000円オフクーポンやdポイント〇倍キャンペーンでおトクに買い物する方法

ショッピング

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

【最大3万円還元!!】ソフトバンクのiPhone 11 / 11 Pro / 11 Pro Maxを購入して高額キャッシュバックをGETする方法

携帯電話

ソフトバンクの「iPhone 11 / 11 Pro / 11 Pro Max」にMNPすると3万円還元!機種変更でも1.5万円還元!


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

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

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


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


同じカテゴリの記事

【9月版】楽天モバイル(UN-LIMIT)の回線に正式対応しているAndroidスマホをおトクに購入する方法

携帯電話

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

【一括0円】機種変更もOK!ドコモタブレット『dtab d-01H』を一括0円でゲットする方法

携帯電話

機種変更も一括0円!端末購入サポートOKな人はけっこういいぞー

【ソフトバンクオンラインショップ限定】「のりかえPayPayキャンペーン」で最大2万円相当のPayPayボーナスをゲットする方法

携帯電話

ソフトバンクオンラインショップと電話お申込み限定の激熱キャンペーン!のりかえで購入すると最大2万円相当のPayPayボーナスをプレゼント!

【ドコモ】9月5日から超値下げでマジ激安!Galaxy S9、AQUOS R2など2018年夏モデルをおトクに購入する方法&キャンペーンまとめ

携帯電話

ドコモ2018年夏モデルが回線費用割引終了後にやっと初の値下げ!対象はGalaxy S9とAQUOS R2

【機種変更もOK】ドコモの2016年~2017年冬春モデルのAndroidスマホを一括価格でおトクに購入する方法

携帯電話

『V20 PRO』『arrows NX』『Galaxy S7 edge』『Disney Mobile』『Xperia X Compact』がどの契約でも一括15,552円


新着記事

【PS5 予約・抽選販売情報】「PlayStation 5 / Digital Edition」を予約・購入する方法 – 予約開始日、発売日、価格、抽選方法、予約特設ページまとめ

PlayStation

PlayStation 5の発売日、予約開始日、価格発表!PS5通常版は49,980円(税別)、ドライブレスのデジタル版は39,980円(税別)!

Coke ON Payにd払いを追加・登録する方法

スマホアプリ

Coke ONアプリのキャッシュレス決済機能Coke ON Payでd払いが利用できるようになったぞ!

【iPhone】アプリのアイコン&表示名を好きな画像、名称に変更する方法 – 専用アプリ不要でホーム画面上のアイコンを変えられる!

iPhone / iPad

iOS 14からはショートカットを利用することでiPhoneのホーム画面上のアプリのアイコン、名称を自分の好きなものに変更できる!

【予約開始!!】ASUSのゲーミングスマホ「ROG Phone 3」をおトクに購入する方法 – 予約開始日、発売日、価格、スペックまとめ

Androidスマホ

ASUSのゲーミングスマートフォン第3弾「ROG Phone 3」が2020年9月26日に発売。価格は119,800円(税別)~


≫ 新着記事をもっと見る

usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    【投げ売り!!】「AQUOS sense3」のキャリア、格安SIM、SIMフリー版の価格比較、キャンペーン、スペックまとめ – おトクに購入する方法

    大ヒットシリーズAQUOSの2019年モデル!相変わらず高コスパ!今作からカメラはデュアルに。中身もけっこうスペックアップ


    【実質0円クラス!!】超激安!楽天モバイル「Galaxy A7」を激安で購入する方法 – 既に1年無料で契約中の人も条件を満たしていればポイント還元の対象!

    楽天モバイル正式対応端末「Galaxy A7」が安い&ポイント大幅還元!実質0円クラスで購入できる。UN-LIMITを既に契約済の人も条件を満たしていれば対象


    【LINE】カスタムスタンプの使い方 – 好きなテキストが入力できる新スタンプ!文字の変更方法と購入方法、注意点など。無料スタンプも登場!

    LINEスタンプに自分の好きなテキストを入力できる「カスタムスタンプ」が新登場!けっこう面白い


    『Twitterデータ』一覧を確認&カスタマイズをオフにする方法 – 自分のプライバシーデータの利用を制限

    年齢や性別が入っててちょっと怖いと話題の『カスタマイズとデータ』 オフにもできるけど…


    注目の記事をぜんぶ見る

  • 最新記事

    【PS5 予約・抽選販売情報】「PlayStation 5 / Digital Edition」を予約・購入する方法 – 予約開始日、発売日、価格、抽選方法、予約特設ページまとめ

    PlayStation 5の発売日、予約開始日、価格発表!PS5通常版は49,980円(税別)、ドライブレスのデジタル版は39,980円(税別)!


    Coke ON Payにd払いを追加・登録する方法

    Coke ONアプリのキャッシュレス決済機能Coke ON Payでd払いが利用できるようになったぞ!


    【iPhone】アプリのアイコン&表示名を好きな画像、名称に変更する方法 – 専用アプリ不要でホーム画面上のアイコンを変えられる!

    iOS 14からはショートカットを利用することでiPhoneのホーム画面上のアプリのアイコン、名称を自分の好きなものに変更できる!


    【予約開始!!】ASUSのゲーミングスマホ「ROG Phone 3」をおトクに購入する方法 – 予約開始日、発売日、価格、スペックまとめ

    ASUSのゲーミングスマートフォン第3弾「ROG Phone 3」が2020年9月26日に発売。価格は119,800円(税別)~


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

  • usedoorをフォロー


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

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

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


    【値上げ…】Amazonプライムで使えるサービスを使い倒す方法&年会費の元が取れるキャンペーンまとめ

    5月17日から4,900円/年に値上げ。でもこれだけのサービスが使えれば年会費は惜しくない!プライム会員の人は使えるサービスをフルに使い倒してみて!


    【9月版】dカード&dカード GOLDのおトクな使い方、徹底まとめ。ドコモユーザー以外にもメリット多数!1億円還元やおトクな入会キャンペーン開催中

    10%還元で噂のdカード GOLDと通常dカードの還元率、メリット、デメリット、比較、疑問を徹底まとめ!自分も実際にGOLD使っています!


    dファッションのクーポン&キャンペーンまとめ – 1,000円オフクーポンやdポイント〇倍キャンペーンでおトクに買い物する方法

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


    『楽天ひかり』を1年無料で利用する方法 – 楽天モバイルUN-LIMITとのコラボ企画。どちらも1年無料!参加条件と注意点

    家の固定回線「楽天ひかり」と携帯回線「楽天モバイルUN-LIMIT」が両方1年無料で使えるおトクなキャンペーン。注意点あり


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

  • あわせて読みたい記事