ワードプレスにfacebookページの埋め込みをしよう!レスポンシブ対応で徹底解説!

Tips

ワードプレスにfacebookページの埋め込みをしよう!レスポンシブ対応で徹底解説!

投稿日:

こんにちは、在宅ママブロガーのチカです^^

前回Facebookページを作成したので、早速ワードプレスに埋め込みをしていこうと思います!
備忘録として、また記事を読んで参考になる方がいれば幸いです^^

Facebookページの作成方法と注意点についてこちらでまとめています。

Facebookページの埋め込みとは

ホームページでFacebookページが埋め込まれているのを見かけませんか?

投稿されていると動的で日頃から情報を発信しているイメージを持つことができますよね^^
いいねしている人が多いと、「信頼できるサイト」だと認識されやすく
「いいね」数はステータスの一部となります。

レスポンシブ対応でスマホでもちゃんと見れる

今回紹介する方法はレスポンシブ対応で、スマホから見てもはみ出したり
デザインが崩れていたりすることはありません。
(タグのミスや打ち間違いなどで崩れることはあります)

【Facebookページを埋め込んだパソコン画面はコチラ】
ワードプレスにFacebookページを埋め込む

【Facebookページを埋め込んだスマホ画面はコチラ】
スマホ画面

とっても見やすいですよね!
では早速埋め込み方法を解説していきましょう!

ワードプレスにFacebookページの埋め込み方法を解説

ここからはワードプレスにFacebookページを埋め込む方法です。

まずはページプラグインにアクセスします。

URLページプラグイン
ページプラグイン

スクロールすると、設定する部分があります。
①~⑧まで入力する必要があります。解説していきましょう!
ページプラグイン

  1. FacebookページのURL
  2. タイムラインの表示(空白で非表示)
  3. 横幅の設定(180px~500px)
  4. 高さの設定(70px~)
  5. ヘッダーサイズが少し小さくなる
  6. 幅を自動で調整(チェックのまま)
  7. カバー写真を非表示
  8. 友達の顔を表示する

FacebookページのURL

①に入力するFacebookページのURLは、
Facebookページの名前をクリックすると自分のURLが表示されるのでそちらを入力します。
FacebookページURL

わたしの場合、
『https://www.facebook.com/chika.maama/』ですね。

これを①に入力します^^
②~⑧はプレビューを見ながらお好みで調整してください^^

コードを取得してタグをコピーしてウィジェットに追加

全部の入力が済んだら、コードを取得してタグをコピーして①と②をワードプレスの埋め込みしたい部分に貼り付けていきます。

タグ

タグ

Ctrl+Cでコピーできますよ^^(ショートカットキー)

ワードプレスでは今回サイドバーに埋め込んでいきたいと思います^^

サイドバーのウィジェットに、さきほどコピーしたタグを貼り付けます。

ウィジェット

 

保存して見てみると…

ワードプレスにFacebookページを埋め込む

はいっ!完成です^^

まだロゴもカバー写真も用意してなかったので、寂しいですが^^;
これから準備したいと思います^^

まとめ

いかがでしたでしょうか?

結構簡単な方法でFacebookページを埋め込むことができます^^
「難しそうだから」「やり方がわからなかった」という方でもチャレンジできると思います^^!

わからなかったらチカにご連絡くださいね^^!

それではまた!

-Tips
-

Copyright© , 2019 All Rights Reserved.