ブログにTwitterのタイムラインを埋め込む方法

2018年4月14日2021年7月17日ブログ

前回紹介した「ブログにTwitterの特定のツイートを埋め込む方法」と同様、WordPressで作成したブログ(ホームページ)だけでなく無料ブログサービスなどでも特定のツイートをを埋め込む事ができます。

ブログやwebサイトにツイートだけではなく『タイムライン』も埋め込むことができます。

ということで今回はブログやWebサイトにTwitterのタイムラインを埋め込む方法をご紹介します。

タイムラインの種類

Twitterのタイムラインにはいくつか種類があります。

Twitterのタイムラインを埋め込む

ではブログやWebサイトにタイムラインを埋め込んでみましょう。

コードを取得する

まずはブログに設置するためのコードを取得します。

表示のカスタマイズ

下にプレビューが表示されますので、プレビューをみながら設定してください。

高さを設定してください。

幅を設定してください。

『Light(白)』か『Dark(濃いグレー)』を設定してください。

ツイート内のリンクの色を選択してください。

表示する言語を選択してください。(『Automatic(自動)』のままでいいと思います。)

設定が完了したら、Updateをクリックして保存してください。プレビューを見てよければコードをコピーしてください。

これでコードは取得できたので、あとはブログのページやサイドバーに貼り付ければ表示されます。

Word Pressのサイドバーに埋め込む方法

Word Pressのサイドバーに埋め込む方法を紹介します。

サイドバーに埋め込む

Word Press管理画面 ［外観］［ウィジェット］

［テキスト］や「カスタムHTML」ウィジェットをサイドバーに追加し、コピーしたコードをウィジェットに貼り付けてください。
貼り付けたら保存すれば完了です。

コードを直接編集する

以下がタイムラインのコードになります。

<a class="twitter-timeline" 
    data-width="横幅" 
    data-height="高さ" 
    data-theme="テーマ(lightかdark)"
    data-link-color="リンク色" 
    href="プロフィールのURL">Tweets by アカウント</a> 
<script async src="https://platform.twitter.com/widgets.js" 
    charset="utf-8"></script>

※見やすくするために改行してあります。

コードを直接編集してサイズやテーマを変える場合は以下の箇所を編集してください。

最後に

以上がブログにTwitterのタイムラインを埋め込む方法です。
タイムラインを埋め込めばTwitterアカウントを持っていない人でもツイートを見ることが出来ます。

こちら(きらり☆彡)のTwitterアカウントは主に更新情報しかツイートしていませんが、プライベートアカウントの方では日常的なことをツイートしています♪

よかったらフォローお願いします。