【リアルタイム更新】iPhone Xの在庫状況をチェックする方法 - ドコモ・au・ソフトバンク

最終更新 [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ページ


< この記事をシェア >




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

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


このfacebookのいいね!が増える? 公式LikeBoxの作り方・設置方法の最終更新日は2015年3月20日です。
記事の内容に変化やご指摘がありましたら問い合わせフォームまたはusedoorのTwitterまたはusedoorのFacebookページよりご連絡ください。

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




新着記事

【12月はミスド】11月はWowma!で最大18%ポイント還元! – au「三太郎の日」のメールが来ない場合の対処方法

キャンペーン

3のつく日は三太郎の日!11月はauの公式ショッピングモール「Wowma!」でポイント還元...12月がミスドが復活!

ディズニーランド・シー公式のアトラクション待ち時間がスマホで見れない時の対処方法【位置情報設定】

ディズニー

『ご利用の端末の設定は位置情報の利用が許可されていません。』と表示された時は位置情報の設定を。

【無料配布】採寸用ボディースーツ「ZOZOSUIT(ゾゾスーツ)」を無料でGETする方法

ファッション

人体のあらゆる箇所の寸法が瞬時に計測!このスーツ凄いな!

「ヨッシースタンプ」のnanacoカードを予約・GETする方法

ポイントカード

カードのデザインはヨッシースタンプ「100%シリーズ」のデザインです。ヨッシースタンプオリジナル絵皿も付いてるぞ!

Huluを退会・解約、契約を解除する方法

webサービス

無料期間中に契約を解約すれば料金は発生しないぞ~


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    【ドコモ】iPhone 7やXperia XZ、X Compactなど人気機種をおトクに機種変更する方法 – 『冬のおとりかえ割』で誰でも機種代金が最大5,184円割引!

    12/21より「冬のおとりかえ割」の還元方法が変更。月々サポート増額だったのが、その場で機種代金が最大5,184円割引に!


    ドコモ『Xperia XZ Premium(SO-04J)』実機レビュー、使い方 – ちょっと辛口めに!!と思ったけど…

    ドコモ2017年夏モデルXPERIAの上位機種!ハイエンドのPremiumを触りまくってみました


    【Apple Pay】登録できるクレジットカード&キャンペーンまとめ。ID or QUICPay&おトクに使う方法

    [日々更新中]アメックスで合計5,000円以上Apple Payを利用すると1,000円キャッシュバック!セゾンカード・UCカードで5%キャッシュバックキャンペーン!


    【先着・数量限定】iPhone Xが5,400円割引で買えるドコモオンラインショップ『限定割引クーポン』をusedoor読者にプレゼント!

    iPhoneXに使える当サイト限定の割引クーポンをプレゼント!64GBモデル、256GBモデルどちらにも使えます。


    注目の記事をぜんぶ見る

  • 最新記事

    【12月はミスド】11月はWowma!で最大18%ポイント還元! – au「三太郎の日」のメールが来ない場合の対処方法

    3のつく日は三太郎の日!11月はauの公式ショッピングモール「Wowma!」でポイント還元...12月がミスドが復活!


    ディズニーランド・シー公式のアトラクション待ち時間がスマホで見れない時の対処方法【位置情報設定】

    『ご利用の端末の設定は位置情報の利用が許可されていません。』と表示された時は位置情報の設定を。


    【無料配布】採寸用ボディースーツ「ZOZOSUIT(ゾゾスーツ)」を無料でGETする方法

    人体のあらゆる箇所の寸法が瞬時に計測!このスーツ凄いな!


    「ヨッシースタンプ」のnanacoカードを予約・GETする方法

    カードのデザインはヨッシースタンプ「100%シリーズ」のデザインです。ヨッシースタンプオリジナル絵皿も付いてるぞ!


    Huluを退会・解約、契約を解除する方法

    無料期間中に契約を解約すれば料金は発生しないぞ~


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

  • 使い方 カテゴリー

    暮らし
    趣味
    節約・稼ぐ
    WEB
    デジタル
  • キーワード

    Amazon Android apple au Chrome iOS iOS 8 iPad iPhone iPhone 6 iPhone 6 Plus iPhone 6s iPhone 6s Plus iPhone 7 iPhone X iPhoneおトク Kindle MNP PC SIMフリー SoftBank Windows windows 10 オトク キャッシュバック クーポン スタンプ スマートフォン セキュリティ ソフトバンク タブレット ドコモ ドコモオトク ドコモオンラインショップ レビュー ワイモバイル 写真 削除 動画 新規契約 機種変更 注目・ピックアップ 無料 登録 非表示
  • usedoorをフォロー


  • あわせて読みたい記事