![Jimdo と Facebook と連携させてみよう](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=jpg/path/s0e84577b02fd7261/image/i7e3aa68f96b04aee/version/1548400307/jimdo-%E3%81%A8-facebook-%E3%81%A8%E9%80%A3%E6%90%BA%E3%81%95%E3%81%9B%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.jpg)
Jimdo には、外部のツールと連携する機能がいくつかありますが、Facebook ページを埋め込み機能もその 1 つです。使い方はとても簡単なのですが、準備しておきたいことや注意点がありますので、一緒に確認してみましょう!
1. Facebookページを準備しよう
Facebook ページを Jimdo へ埋め込むには、まずは「Facebook ページ」を作成する必要があります。まだ作成していないという場合は、まずは Facebook ページを作成しましょう。
「Facebook 個人アカウント」と「Facebook ページ」の違い
Facebook の個人アカウントは、各個人が「本名で」のみ登録できるアカウントです。自分の近況を写真付きで投稿できる他、友達申請をして繋がった友達の書き込みに「いいね」をする、コメントを書き込む等ができます。公開範囲も、自分のみ、友達のみ、全体に公開と 3 段階から選ぶことができ、基本的には、プライベートの人たちとつながりを持つ場所です。
一方、Facebook ページは、企業名、店舗名、商品やサービス名で取得することができ、基本的には全世界に向けて公開します。友達申請をする機能がなく「いいね」を押してくれた人を「ファン」として扱っています。広告が使えるようになったり、インサイトという機能で、アクセス数やファンの属性を調べることができます。
※Facebook ページを作成するには、「個人アカウント」を取得する必要があります。
Jimdoへの埋め込みには、後者の「Facebookページ」が必要ですので、準備しておきましょう。 詳しくは、Facebook公式にガイドがありますので、参考にしてください。
Facebookページの作成(公式)
https://www.facebook.com/business/learn/set-up-facebook-page/
Facebook ページが準備できたら、URL をコピーしておきます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i45f87d1772df91b5/version/1548391639/image.png)
2. Jimdo の Facebook 機能を使ってみよう
Jimdo にログインし、「コンテンツの追加」⇒「その他コンテンツ」をクリックします。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/if99c2ce969272905/version/1548391756/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/ie00c0edf0bd5aadf/version/1548391771/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i0ad1296978fb7d90/version/1548391781/image.png)
「Facebook」をクリックします。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ia41660d724c29fac/version/1548391818/image.png)
以下のような画面が表示されますので、「Facebookページ」のタブをクリックします。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/id6dbfab0a6cd2554/version/1548391851/image.png)
3. Facebook ページの設定をしよう
Facebook ページを埋め込む際に、設定する画面が表示されます。各設定情報は以下の通りです。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i5d93370c6e41d5dd/version/1548391928/image.png)
①Facebook ページの URL | Facebook ページの URL(アドレス)を入力します。 |
②ページカバー | チェックをつけると、Facebook ページのカバー写真が表示されます。 |
③ストリーム | チェックをつけると、Facebook ページに投稿した記事が表示されます。 |
④プロフィール写真 | チェックをつけると、Facebook ページに「いいね」をした人のプロフィール写真が表示されます。 |
①に、準備しておいた Facebook ページの URL を入れましょう。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/ief44aa289aa68820/version/1548392231/image.png)
※①は必須ですが、②~④については、任意の設定となります。
▼ 各設定を使用したときの表示は以下のようになります。
■全てのオプションをオフにした場合
![](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/i40372bb3556e8681/version/1548392424/image.png)
■ページカバーとストリームをオンにした場合
![](https://image.jimcdn.com/app/cms/image/transf/dimension=342x10000:format=png/path/s0e84577b02fd7261/image/i066d9dabba29627a/version/1548392559/image.png)
■ページカバーのみオンにした場合
![](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/i66a0ca01f253ddbd/version/1548392438/image.png)
■全てのオプションをオンにした場合
![](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/id6c24a548ce1558f/version/1548392574/image.png)
このように、いろいろな表示の仕方があります。
「いいね」が少ないうちは、「ページカバー」と「ストリーム」のみをオンにし、いいねが増えてきたら、「プロフィール写真」もオンにする方法がおすすめです。
4. Facebook ページをカッコよく表示させるコツ
Facebook ページの設定自体は難しくないのですが、いざ表示してみると「あれ?何だか見栄えがイマイチ・・・」と思った人もいるかも知れません。Facebook 側の仕様により、埋め込んだときの横幅が、下記のように決められています。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/idb6fe123087d078b/version/1548392673/image.png)
使用しているテンプレートの幅によっては、埋め込んだ Facebook の表示が、ページの途中で終わってしまうため、右側に空白ができてしまいます。これが「何だかイマイチ?!」の原因なのです。
↓Facebook ページを埋め込んだときに、右側に余白ができてしまう・・・。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i339f061194fcec91/version/1548392728/image.png)
そこで、「カラム機能」を使って、エリアを 2 つに分け片方に Facebook ページ、もう片方には「写真付き文章」や「フォトギャラリー」「Google マップ」など別の要素を入れて並べます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i70bc4ab683bc5bfc/version/1548392763/image.png)
カラム機能を使うことで、無駄な余白をなくし、バランスのよい配置を実現できます。
5. Facebook ページの高さを変更したい場合
ここまで、Jimdo の機能のみでできる Facebook ページの埋め込み方法について解説してきましたが、基本の機能では「高さ」を変更することができません。高さを変更する必要がある場合には、Facebookの「Page Plugin」という機能を使用し、作成したコードを Jimdo の「ウィジェット」で貼り付けるという方法になります。以下、解説します。
Facebook の「Page Plugin」へアクセスします。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i4c9cf8ad809fdeaa/version/1548392856/image.png)
スクロールすると、以下の画面が表示されますので、各種設定を行いましょう。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/ibc0cfbb08edcaaf5/version/1548392892/image.png)
①Facebook Page URL | Facebook ページの URL(アドレス)を入力します。 |
②Width |
Facebook ページを埋め込んだときの幅を設定します。 |
③height | Facebook ページを埋め込んだときの高さを設定します。 |
④Adapt to plugin container width | ②Width を空白にし、ここにチェックを入れると、ホームページ側の横幅に合わせた最大値で表示されます。(ただし最大 500 px) |
⑤Show Friend's Faces | チェックをつけると、Facebook ページに「いいね」をした人のプロフィール写真が表示されます。 |
⑥Use small Header | チェックをつけると、カバー写真の高さが狭くなります。 |
⑦Hide Cover Photo | チェックをつけると、カバー写真が非表示になります。 |
⑧Show Page Posts | チェックをつけると、Facebook ページに投稿した記事が表示されます。 |
表示させたい内容に合わせ、設定を行ったら、左下の「Get Code」をクリックします。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i5bcfdd3fb2619872/version/1548393367/image.png)
Jimdo 側へ埋め込むためのコードが表示されますので、Windows の「メモ帳」や Word にコピーしておきましょう。(2 か所)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i65ae64a6027d2199/version/1548393394/image.png)
Jimdo へログインし、Facebook ページを埋め込みたい場所で「コンテンツの追加」⇒「その他コンテンツ」とクリックし「ウィジェット/HTML」を選択します。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i88f1d4045cacd4f2/version/1548393430/image.png)
さきほど、「Page Plugin」のページでコピーしたコードを貼り付けます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i4c6d60eda36ee2d9/version/1548393466/image.png)
Facebookページが表示されました。高さが狭くなっています。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i4804918383da4e56/version/1548393502/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i475115e9a9c264f8/version/1548400982/image.jpg)
Facebook ページを埋め込みたい場合、Jimdo に付属している機能をつかえば簡単に表示することができます。個人アカウントしか持っていないという人は、まずは「Facebook ページ」を作成してから、トライしてみてくださいね!
コメントをお書きください