WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

サイトにFacebookページを埋め込む方法–LikeBoxは廃止。Page Pluginになります–

      2018/02/06

以前LikeBoxを使った以下の記事を書いたのですが2015/6/23日をもってLikeBoxが廃止されるということになったので以下の記事は無視するように。

LikeBoxに変わりPage Plugin を導入する必要があります。でもまあ追加方法はLike Boxとほぼ同じ感じだけど。

スポンサーリンク

 

以下全部ボツです。

Like Boxを使って簡単に埋め込む

FacebookDevelopersの Like Box から簡単に項目を設定しコードを取得し張りつけるだけで組み込むことができます。

Like Box を開くと下記のように設定画面が表示されます。組み込みたいFacebookページのURLを入力して、高さや幅の設定をおこないます。下部にレビューが表示されるのでその他の設定も画面を確認しながら行えます。

 

 

 

コードを取得して張りつける

レイアウトが決まったら「Get Code」ボタンでコードを取得しましょう。

今回はhtml5のコードを張りつけます。iframeも簡単ですがなぜかHeight値が高い場合うまく表示されませんでした。

bodyタグの直下にjavascriptコードを貼り付け、Facebookを埋め込みたい場所に<div>~</div>のコードを張りつけます。

これだけです。

ページを表示させると、Facebookページが組み込まれました。

レスポンシブに対応してみる

cssに下記を追加すればレスポンシブに対応できます(html5)。

.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span{
width: 100% !important;
}
.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
width: 100% !important;
}

ただし画像はレスポンシブ対応されません。widthで指定した値を基準とした表示になるので注意が必要です。

 

 - その他Tips

  • このエントリーをはてなブックマークに追加

  関連記事

thum_other
PhotoShopを使って背景の邪魔な物体を簡単に削除する

PhotoShopの初心者の私です。今回、画像に写っている邪魔な物体を削除するの …

thumbnail_other
Google Analytics で特定のIPアドレスからのアクセスを除外する

Google Analytics でアクセス解析したいとき、管理者からのアクセス …

thumbnail_other
page plugin(facebook埋め込み)をレスポンシブ対応する

2015年6月にfacebookをwebサイトに埋め込むには「like box」 …

thumbnail_other
WindowsからMacに移行した。いろいろ大変だった。

Windowsマシンを使って十数年、この度マシンをMacに移行することになりまし …

thumbnail_other
GoogleMapへのリンクを住所で貼るときに失敗したこと

ホームページ上からGoogleMap上に指定した住所へリンクを貼った時に軽くトラ …

thumbnail_other
ウィンドウのサイズを確認しながらデバッグする方法

レスポンシブのWebサイトを作成するときウィンドウ幅を見ながら画面表示をみたいの …

thumbnail_other
bootstrapのグリッドレイアウトだけ使うのが好き

bootstrap便利です。WEB製作でレスポンシブ対応するときこれを使ってます …

thumbnail_other
ネットショップBASE(ベイス)のAPIを使って商品一覧を表示させてみた

簡単に無料でネットショップが開設できるサービス「BASE」。無料ってのがとても魅 …

thumbnail_other
ブラウザ上の画面を範囲を指定してクリップボードにコピー

ブログを投稿するとき、よく画面のコピーをとることがあります。標準機能の「Alt …

thumbnail_other
ファイルを解凍してくれるサイト

ファイルを解凍するとき通常解凍ソフトを使って解凍します。 しかし最近はいろんな圧 …