【ほぼ全作品50%還元!!】「DMMブックス スーパーセール」で超おトクに漫画・コミック・小説などを購入する方法(5月19日15時まで)

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

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

【5月16日まで】激安商品も!『エディオン スペシャルセール』でおトクに買い物する方法 – 楽天市場店で不定期開催されるセールにログインする手順(旧:闇市)

セール

エディオン楽天市場店で不定期開催される『スペシャルセール(旧:エディオン闇市)』には価格.com最安値クラスの商品が登場することも!

【5月31日まで】au PAYマーケットで1円以上で使える1,000円オフクーポンを最大6枚ゲットする方法 – スマートパスプレミアム入会特典がアツい!

ショッピング

auスマートパスプレミアム会員になるとau PAYマーケットで1円以上の買い物で使える1,000円オフクーポンが最大6枚もらえる!

『楽天ひかり』を1年無料で利用する方法 – 楽天モバイルUN-LIMITとのコラボ企画。携帯回線は3ヵ月、ひかり回線は1年無料!参加条件と注意点

キャンペーン

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

Dropbox Plus(有料版)を超おトクに契約、購入する方法 – ソースネクストの3年版がコスパよし!

Dropbox

公式は値上げ!あのおトクなDropbox3年版がついに復活!有料版のPlusを契約するならソースネクスト経由でどうぞ!


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

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

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


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


同じカテゴリの記事

Dropbox有料版をおトクに契約する方法 – Dropbox Plus(1年版)が12%オフの10,800円で販売中!

Dropbox

ソースネクストeSHOPにDropbox Plus 1年版が12%OFFで登場!コスパ良し!

【悲報】iOS版のDropboxをアップデートすると英語化されるので注意! – Dropboxを日本語に戻す方法

Dropbox

バージョン38.2にアプデすると英語化されるぞ!日本語化できないみたいなので注意!

【Dropbox】スマホのみで削除したファイルを復元する方法 – iPhone・Android対応

Dropbox

スマホ単体でも削除済ファイルを復活させることができる

Dropbox Plus(有料版)を超おトクに契約、購入する方法 – ソースネクストの3年版がコスパよし!

Dropbox

公式は値上げ!あのおトクなDropbox3年版がついに復活!有料版のPlusを契約するならソースネクスト経由でどうぞ!


新着記事

【日曜日/水曜日限定】激安!ドミノ・ピザのピザ3枚が2,400円! – 「Big Sunday」「Big Wednesday」でおトクにピザをデリバリーする方法

キャンペーン

毎週日曜日と水曜日はMサイズ3枚が2,400円、Rサイズ3枚が3,000円、Lサイズ3枚が3,600円と超激安!

iPhoneからAirTagを鳴らす方法 – 家の中で見つからない、紛失したという時に超便利な小ワザ【持ち物を探す】

iPhone / iPad

AirTagを装着したアイテム(サイフとかカギ、カバンなど)が家の中のどこかにあるのに見つからない… こんな時はiPhoneから音を鳴らしちゃおう

【誰でも何度でも!!】EPARKテイクアウトで20%戻ってくるキャンペーンが開催 – TOYOTA Walletでおトクにお支払いする方法

キャンペーン

EPARKテイクアウトでTOYOTA Wallet残高払いを利用すると20%戻ってくるキャンペーンが開催!誰でも何度でも利用可能!

【Windows10】Internet Explorer11からEdgeが自動起動するのを無効化する方法 – IE11で特定のサイトにアクセスしたらEdgeが起動する時の対処方法

パソコン

Windows10のInternet Explorer11で特定のサイトにアクセスすると別ウインドウでEdgeが起動してそちらで表示される…をオフにする手順

【当サイト限定クーポンあり】『BIGLOBEモバイル』をおトクに契約する方法

MVNO・格安SIM

当サイト限定クーポン特典あり。クーポンコードの入力で最大3,000円相当還元!!


≫ 新着記事をもっと見る

usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

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

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


    【5月31日まで】au PAYマーケットで1円以上で使える1,000円オフクーポンを最大6枚ゲットする方法 – スマートパスプレミアム入会特典がアツい!

    auスマートパスプレミアム会員になるとau PAYマーケットで1円以上の買い物で使える1,000円オフクーポンが最大6枚もらえる!


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

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


    楽天モバイルUN-LIMIT『SIMのみ契約』で5,000ポイントをゲットする方法 – iPhoneも対象!対象製品利用でポイント還元の条件など

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


    注目の記事をぜんぶ見る

  • 最新記事

    【日曜日/水曜日限定】激安!ドミノ・ピザのピザ3枚が2,400円! – 「Big Sunday」「Big Wednesday」でおトクにピザをデリバリーする方法

    毎週日曜日と水曜日はMサイズ3枚が2,400円、Rサイズ3枚が3,000円、Lサイズ3枚が3,600円と超激安!


    iPhoneからAirTagを鳴らす方法 – 家の中で見つからない、紛失したという時に超便利な小ワザ【持ち物を探す】

    AirTagを装着したアイテム(サイフとかカギ、カバンなど)が家の中のどこかにあるのに見つからない… こんな時はiPhoneから音を鳴らしちゃおう


    【誰でも何度でも!!】EPARKテイクアウトで20%戻ってくるキャンペーンが開催 – TOYOTA Walletでおトクにお支払いする方法

    EPARKテイクアウトでTOYOTA Wallet残高払いを利用すると20%戻ってくるキャンペーンが開催!誰でも何度でも利用可能!


    【Windows10】Internet Explorer11からEdgeが自動起動するのを無効化する方法 – IE11で特定のサイトにアクセスしたらEdgeが起動する時の対処方法

    Windows10のInternet Explorer11で特定のサイトにアクセスすると別ウインドウでEdgeが起動してそちらで表示される…をオフにする手順


    【当サイト限定クーポンあり】『BIGLOBEモバイル』をおトクに契約する方法

    当サイト限定クーポン特典あり。クーポンコードの入力で最大3,000円相当還元!!


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

  • usedoorをフォロー


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

    3ヵ月299円と激安!Amazonの読み放題サービス「Kindle Unlimited」に超おトクに登録する方法

    本やコミック、雑誌が読み放題になるAmazonのKindle Unlimitedがまたまた激安で利用できるチャンス!


    【必ず400dポイントもらえる!!】dマガジンをおトクに契約する方法

    dマガジンはWEBから入会すれば400dポイントがもらえる!初回31日無料とあわせて実質2ヵ月無料で利用できる。エントリーはお忘れなく!


    『楽天ひかり』を1年無料で利用する方法 – 楽天モバイルUN-LIMITとのコラボ企画。携帯回線は3ヵ月、ひかり回線は1年無料!参加条件と注意点

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


    【激安!!】Amazon Echoシリーズを激安で購入してMusic Unlimitedを6ヵ月間無料で利用する方法 – 参加できる条件や注意点など

    AmazonのスマートスピーカーEchoシリーズと音楽聞き放題サービスMusic Unlimited 6か月分がセットで激安の2,980円~で販売中!


    【最大20,000dポイント】運試しに。ドキドキキーワードあみだくじでdポイントをゲットする方法 – 毎週火曜日更新。今週のキーワードは?

    超簡単に参加できるクジ。当たればラッキー!dアカウント+ポイントカード持っている人は是非


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

  • あわせて読みたい記事