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

2017年1月20日

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

前回までの記事はこちら

1.　タイムリーなつぶやきで反響アップ
2.　アルファメールプレミアで会社のホームページを作ろう
 1.表の挿入
 2.トピックスの追加
 3.Twitterの埋め込みコードを挿入
 (1) Twitterの管理画面からコードを取得
 (2) 埋め込みコードを貼り付ける
 4.表示を整える

1.タイムリーなつぶやきで反響アップ

数年前からTwitterを宣伝に活用している企業も多いと思います。例えば、不動産会社の場合、空き物件の情報を載せたり、キャンペーンの告知をしたりとタイムリーな宣伝ができます。物件情報を見たユーザから返信が来たり、リツイートされて拡散されたりと大きな反響を呼ぶこともあります。

今回は、Twitterのタイムラインをホームページに埋め込む方法をご紹介します。

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

第1弾、第2弾で作ってきた架空のリフォーム会社「ダイレクトリフォーム」のホームページにTwitterのタイムラインを埋め込むことでより親しみやすいホームページに仕上げていきたいと思います！

1. 表の挿入

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

まずは、表の挿入でコンテンツの枠を作ります。

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

施工実績の下に表が挿入されました。

2.トピックスの追加

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

3.Twitterの埋め込みコードを挿入
(1)Twitterの管理画面からコードを取得

Twitterの管理画面にログイン後、自分のアイコンをクリックして設定画面に入ります。

左メニューから「ウィジェット」のページを表示させます。
ウィジェットの「新規作成」から「リスト」を選択します。

下の画像のような英語のサイトが開きます。

空白の部分に自分のTwitter URLを入力します。

URLを入力すると、Twitterタイムラインのプレビューが表示されます。
今回は、ホームページに埋め込むタイムラインのサイズも決めたいので、「set customization options.」をクリックして詳細を設定します。

サイズの「Height (px)」に「500」、「Width (px)」に「340」と入力し、「Update」のボタンを押します。

希望サイズのタイムラインが表示されたら埋め込みコードをコピーするために「Copy Code」をクリックします。

(2)埋め込みコードを貼り付ける
Twitterの管理画面でコピーした埋め込みコードをCMS編集画面に貼り付けます。

挿入した表の右枠にカーソルを合わせて、上部のツールバーから「＜＞タグ」をクリックします。「HTMLタグ挿入」の画面が表示されます。取得したTwitter埋め込みコードを貼り付けて、挿入ボタンを押しましょう。