CMSで会社のホームページを作ってみよう
－第3弾－FacebookをHPに埋め込む

2016年12月2日

CMSで会社のホームページを作ってみよう第3弾です。第1弾、第2弾で作ったホームページにFacebookのタイムラインを埋め込む方法をご紹介します。

1.　SNSを活用してファンを増やす
2.　アルファメールプレミアで会社のホームページを作ろう
 1.表の挿入
 2.トピックスの追加
 3.お知らせの追加
 4.Facebookのタイムラインを挿入
 （1）facebook for developersからコードを取得
 （2）取得コードをホームページに貼り付ける

1.SNSを活用してファンを増やす

Facebook、Twitter、YouTubeといったSNSの企業アカウントを作成し、販売促進やマーケティングに役立てる企業が多くなりました。SNSは、無料で企業側が情報を発信できるだけでなく、情報が拡散され、大きな反響を呼ぶ利点があります。SNSで発信した情報が面白いとSNSアカウントのファンが増え、ホームページの訪問数やお問い合わせ数が増え、取引に繋がるケースもたくさんあります。

今回は、ホームページにFacebookのタイムラインを埋め込み、最新の情報を発信している様子が分かるホームページにしていきます。以前の記事「会社のホームページを開設する時に気をつけたいこと」でもお伝えした通り、何ヶ月、何年と1文字も変わらないサイトではなく、昨日、今日も更新した記録がある、つまり営業している確証がある企業の方が取引もしやすいですよね。

2.アルファメールプレミアで会社のホームページを作ろう

それでは前回同様、架空のリフォーム会社「ダイレクトリフォーム」のホームページをCMSの機能を使って更に良くしていきます！
前回までのおさらいはこちら⇒（第1弾、第2弾）

基本設定に加え、ファーストビューも充実させたホームページですが、今回はついにFacebookのタイムラインを埋め込みます。

1. 表の挿入

アルファメールプレミアの会員サイトからログイン後、「Webサイト作成」をクリックし、管理画面に入ります。
※初回設定時にWebサイト作成メニューから「通常メニュー」で作成したサイトを編集しています。「簡易メニュー」ではありません。
編集ページ一覧からトップページを選び、「ページの編集」をクリックします。
「リフォーム施工実績」の下に「トピックス」、「お知らせ」、「Facebookのタイムライン」を作っていきます。まずは、表の挿入でコンテンツの枠を作っていきましょう。

ツールバーから「表の挿入」を選択し、列数「2」、行数「1」、「枠線なし」にチェックを入れて、表を挿入します。

2.トピックスの追加

挿入した表の左枠にカーソルを合わせて、「見出し」の「Headline2」を挿入します。
「見出し」を「トピックス」に書き換えて、見出しの下に日付とコメントを書き込みましょう。

3.お知らせの追加

トピックスと同様に「お知らせ」の項目も作りましょう。「Headline2」を挿入して、コメントを書きます。夏休みや年末年始などの長期休業で電話やメールが繋がらない場合は、あらかじめホームページで告知すると親切です。

4.Facebookのタイムラインを挿入

（1）facebook for developersからコードを取得
トピックスの右側の枠にFacebookのタイムラインを挿入します。
そのためには、まずホームページに埋め込むためのコードを取得する必要があります。コードはFacebook提供サイト「facebook for developers」のページプラグインから取得できます。

ページプラグインを開き、「FacebookページのURL」のところにホームページに載せたいFacebookアカウントのURLを入力します。デモ画像が出てくるので、ここでホームページに載せたときに見やすくなるよう編集できます。例えば、友達の顔を非表示にしたり、上部の画像サイズを小さくしたりできます。

編集が終わったら左下にある「コードを取得」をクリックします。「JavascriptSDK」のコードが出てくるので、今回は右側にある「IFrame」のタブをクリックして下に表示されたすべてのコードをコピーします。

（2）取得コードをホームページに貼り付ける

コピーしたコードを編集画面に戻り、貼り付けます。
CMS編集画面の右上にある「HTML編集」をクリックすると、英語や日本語の文字列が表示されます。これが裏側の構造で、HTMLソースやタグと言われるものです。難しく見えますが、今回の作業は貼り付けだけです。他に何と書かれているのかが分からなくても全く問題ありませんのでご安心ください。

トピックスの右枠にFacebookのタイムラインを挿入したいので、まずこの場所を探します。手順通りに行えば、HTML編集の一番下の行に以下の文字列が書かれているはずです。

<TD> Facebook</TD></TR></TBODY></TABLE></P>

もし挿入場所が不安であれば、通常の管理画面で右枠に適当な文字を入れます。例えば「Facebook」などです。そのうえで、「HTML編集」をクリックすると一番下の行に以下の文字列が書かれます。

<TD> Facebook</TD></TR></TBODY></TABLE></p>

この「<TD> Facebook</TD>」にある「 Facebook」の部分に先ほど取得したFacebookのプラグインコードを貼り付けます。「 Facebook」は必要ないので消してください。その際、サイトが崩れてしまうので近くにある「<」や「>」など他の文字を消さないように注意してください。右上の「HTML編集」をもう一度クリックすると通常の編集画面に戻れます。

これで、ホームページにFacebookのタイムラインを挿入することができました。

3回に分けて「CMSで会社のホームページを作ってみよう」をお届けしましたが、チュートリアルはいかがでしたか。今回は、専門用語が並んだHTMLソースも見ましたが、コピーしたコードを貼り付けるだけだったので簡単でしたね。本当にブログ感覚でホームページを充実させることができました。1時間もあればできる作業なので、アルファメールプレミアの14日間無料体験でぜひお試しください。

今後は、「Twitter」と「YouTube」の埋め込み方をご紹介します。

<追記>
記事掲載しました！
－第4弾－YouTube動画をHPに埋め込む
 －第5弾－TwitterをHPに埋め込む