今回は、Twitterの公式ツールを使って、ブログにタイムラインを埋め込む方法をご紹介します
この機能を使って、お知らせやイベントの情報などをツイートし、掲示板のように利用している方もちらほら見かけます
見て頂いている方々に、より多くの情報を届けられるブログに出来たら嬉しいですね！
・ブログを見ている人にTwitterでホットな情報を届けたい人
・ブログに埋め込んだタイムラインのサイズやデザインを変更したい人
事前準備
まずは、自分のTwitterアカウントのURLを用意します
自分のプロフィールページからコピーするか
こちらをコピーして使って下さい「https://twitter.com/（自分のTwitterの＠を抜いたID名）」
例えば僕の場合だと「https://twitter.com/masashinotweets」だよ
Twitter公式ツール「Twitter Publish」
URLが準備出来たら、Twitterの公式ツール「Twitter Publish」を開いて、タイムラインを埋め込むためのコードを作成します
Twitter Publishの基本的な使い方
表示される画面中央の検索フォームに、先ほど準備したURLを入力し、Enterを押します
画面がスクロールし、下のように表示されます
ここで表示する情報をいくつかカスタマイズできるので、ご紹介します
①埋め込む内容を選択出来ます
ここで選択した表示方法に沿ったコードが③のフォームに表示されます
Embedded Timeline→タイムラインの埋め込み。今回はこちらを選択して下さい
Twitter Buttons→ツイッターボタン。自分のアカウントのフォローボタンやメンションボタンを埋め込むことが出来ます
②埋め込むタイムラインのサイズ・色・表示言語を設定出来ます
詳細は次の見出し
③上記①・②で設定した内容に沿ったコードが表示されます
④埋め込んだ際に表示されるタイムラインがプレビュー表示されます
埋め込むタイムラインのサイズ・色・表示言語の設定方法
上述の基本的な使い方②の設定方法を詳しくご説明していきます
①埋め込むタイムラインの縦幅と横幅を設定できます（ピクセル単位）
参考までに、僕のブログホームに埋め込んであるタイムラインは縦幅「500」横幅「400」です
②埋め込むタイムラインの色を設定できます
Light→白基調
Dark→黒基調
③表示言語を設定できます
④全ての設定を終えたらここをクリックし、設定完了です
埋め込むタイムラインのコードをコピーする
設定を終えたら、下記フォームにコードが入力されているので「Copy Code」をクリックします
下画像が表示されたら、コードのコピー完了です
コピーしたコードをブログに埋め込む方法
コードは任意の場所に貼り付けて下さい
参考までに、僕のようにホームのサイドバーに表示する方法をご紹介します（WordPress使用テーマ：Cocoon）
設定画面の「外観」から「ウィジェット」を選択後、利用できるウィジェット内から「テキスト」を探し、サイドバーのウィジェットエリアにドラッグして下さい
サイドバーにドラッグした「テキスト」をクリックし、内部の「テキスト」を選択します
コピーしておいたコードを任意の場所に貼り付け、保存すると、埋め込みが完了します
応用編：「埋め込む」等、タイムライン以外の余分な情報を消す方法
作成されたコードをそのまま埋め込むと
このように表示されます
このままでも問題はないですが
タイムラインの下にある「埋め込む」とか「Twitterで表示」要らないなあ、、、
と思ったので、消していきます
下のように、コードを追記すると、、
変更前コード
<a class="twitter-timeline" data-width="400" data-height="500" data-theme="light" href="https://twitter.com/masashinotweets?ref_src=twsrc%5Etfw">Tweets by masashinotweets</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
変更後コード
<a class="twitter-timeline" data-width="400" data-height="500" data-theme="light" href="https://twitter.com/masashinotweets?ref_src=twsrc%5Etfw" data-chrome=”nofooter”>Tweets by masashinotweets</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
このように消すことが出来ました
同様に、タイムラインの上に表示されている「@masashinotweetsさんのツイート」というヘッダー部分を消したい場合は
data-chrome=”noheader”
双方とも消したい場合は
data-chrome=”noheader nofooter”
これらを同じ部分に入力して下さい
コメント