概要

コーポレートサイト内に特定のTwitterのタイムラインを表示させます。
Twitterのガイドラインに沿って進めていきます。

全体の手順

Twitterのタイムラインを表示させる手順は下記の通りです

1. 埋め込みコードの設定
2. コーポレートサイトに埋め込む

完成イメージ

お問い合わせフォームの下にタイムラインが表示されるようにします。

外部参考サイト

Twitterのガイドライン
https://publish.twitter.com

埋め込みコードの設定

手順はTwitterのガイドラインに則り記述しています。
Twitterの更新により手順が変わることがあります。
本手順は2019年5月28日現在のものです。
https://publish.twitter.comに移動します。

入力窓に、埋め込みたいタイムラインまたはモーメントのリンクを入力します。

入力して進むとコードが表示されるのでコピーします。
イズや文字の色を変更したい場合は「set customization options」をクリックして設定できます。
本コンテンツの場合、set customization optionsでheightを500pxくらいにセットするときれいに表示されますので、設定してみてください。

埋め込みコードが更新されるので、更新された埋め込みコードをコピーしておきます。

コーポレートサイトに埋め込む

<main>内の一番下に表示させます。
まず、今、一番下にあるお問い合わせが最後ではなくなるのでlast-wrapperというクラス名を削除します。
次に<!-- end contact -->の下にタイムライン表示スペース追加します。
index.html

        <!-- contact -->
-       <div class="wrapper last-wrapper" id="contact">
+       <div class="wrapper" id="contact">
        <div class="container">
            <div class="wrapper-title">
                <h3>CONTACT</h3>
                <p>お問い合わせ</p>
            </div>
            <form method="POST" action="./conf.php">
                <div class="form-group">
                    <p>お名前 *</p>
                    <input type="text" name="name">
                    <!-- <p class="error">お名前は必須です。</p> -->
                </div>
                <div class="form-group">
                    <p>Email *</p>
                    <input type="email" name="email">
                    <!-- <p class="error">Emailは必須です。</p> -->
                </div>
                <div class="form-group">
                    <p>お問合せ内容 *</p>
                    <textarea name="text"></textarea>
                    <!-- <p class="error">お問い合わせ内容を入力してください。</p> -->
                </div>
                <button type="submit" class="btn btn-submit">内容を確認する</button>
            </form>
        </div>
    </div>
    <!-- end contact -->
+    <!-- SNS -->
+    <div class="wrapper last-wrapper" id="sns">
+        <div class="container">
+            <div class="wrapper-title">
+               <h3>SOCIAL</h3>
+               <p>ソーシャルメディア</p>
+            </div>
+                 
+            <div class="sns">
+               
+            </div>
+        </div>
+     </div>

クラス名がsnsのdivの中に、先程生成した埋め込みコードを貼り付けます。
index.html

        <!-- end contact -->
        <!-- SNS -->
        <div class="wrapper last-wrapper" id="sns">
            <div class="container">
                <div class="wraper-title">
                    <h3>SOCIAL</h3>
                    <p>ソーシャルメディア</p>
                </div>

                <div class="sns">
+               <a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                </div>
            </div>
        </div>
    </main>

あとはCSSを調整します。
styles.css

/* sns */
#sns {
    background-color: #ebeced;
    padding-bottom: 80px;
}
.sns {
    width: 50%;
    margin: 0 auto;
}

responsive.cssはスマホ用に設定している部分に追加します。
responsive.css

/* スマホ用 */
@media screen and (max-width: 660px) {
~~省略~~
+    /* sns */
+    .sns {
+        width: 80%;
+    }
}

ブラウザで確認します。
完成イメージと同様に表示されていたら、サーバにアップロードして反映して完了です。

コード

https://github.com/bluecode-io/web-basic/tree/basic4-2