はてなブログ|サイドバーにTwitterタイムラインを埋め込む方法と記事内埋め込み

はてなブログにTweetを埋め込む方法をご紹介します。

Tweetを埋め込む方法は大きく次の2通りです。

埋め込む方法
  • Twitterのタイムラインをサイドバーに埋め込む
  • 記事内に単発のツイートを埋め込む

それでは、解説していきます。

目次

Twitterのタイムラインをサイドバーに埋め込む方法

完成イメージ

完成形は、上の写真の通りです。

作業の流れをざっくり説明したものがこちら。

手順
  1. 自分のTwitterアカウントのURLを取得
  2. 「Twitter Publish」で埋め込みコードを取得
  3. はてなブログに埋め込みコードを貼り付ける

手順は多いですが、書いてある通りに進めれば必ずできます。

気負わずにいきましょう!

STEP
自分のTwitterアカウントのURLを取得
アカウントトップページのアドレスをコピー

まずはご自身のTwitterアカウントにアクセスし、トップページのURLをコピーします。

ぼくの場合は、以下がこれにあたります。
https://twitter.com/karo_choa

STEP
「Twitter Publish」にアクセス

続いて「Twitter Publish」にアクセスします。

» Twitter Publish

さきほどコピーしたURLを、テキストボックスにはりつけます。

STEP
埋め込み用タイムラインの取得

今回は、左側の「Embedded Timeline」を選択します。

※ Embedded Timeline:埋め込みタイムライン

STEP
タイムラインのカスタマイズ

(デザインのカスタマイズが不要な方は、STEP5に進んでください)

「set customization options」をクリックすると、タイムラインのデザインをカスタムできます。

カスタマイズの内容を日本語訳すると、以下の通り。

  • Height:高さ
  • Width:横幅
  • How would you like this to look?:明るさ
  • What language would you like to display this in?:言語

ちなみに「How would you like this to look?」を「Dark」にすると、ダークモードのような外観になります。

この辺はお好みでいじってみてください。

STEP
コードをコピー
「Copy Code」をクリック

最後に「Copy Code」をクリックします。

「Copied!」

これで、はてなブログにはりつけるためのコードがコピーできました。

STEP
はてなブログにコードをはりつける
「モジュールを追加」を選択

ダッシュボードにアクセスし、次の順番でクリックします。

デザイン → カスタマイズ
→ サイドバー → モジュールを追加

続いて、左側のメニューから「HTML」を選択します。

「HTML」を選択

右側に現れるテキストボックスには、次の要領で記入しましょう。

記入例
  • タイトル:「Twitterタイムライン」「タイムライン」など
  • タイトル下のボックス:「Twitter Publish」でコピーしたコードをはりつけ

ここで、ちょっとだけコードを足します。

コードを追加

デフォルトのままだと、ツイートが縦にズラっと並んでしまうので、表示するTweet数を減らしました。

下記のコードを挿入することで、表示するtweet数を制限できます。

data-tweet-limit="3"

“3”の部分の数字を変えることで、表示するtweet数を変えられます。

おつかれさまでした!

これでサイドバーにTweetが表示されているはずです。

特定の記事にTweetを埋め込む方法

記事内にTweetを埋め込む方法

完成形は、上記写真の通りです。

こちらも、ざっくりした流れを先に示します。

作業の流れ
  • はりつけたいTweetのコードを取得
  • 「HTML編集」モードでコードをはりつけ

タイムラインに埋め込むより、カンタンな作業ではりつけできます。

STEP
コードを取得

気になるツイートの右上にある「3つの点」のマークをクリックします。

その後、「ツイートを埋め込む」をクリックしましょう。

STEP
Tweet Publishからコードを取得
「Copy Code」をクリック

「Tweet Publish」のページが開くので、「Copy Code」をクリックしましょう。

これでツイートの内容がコピーされました。

STEP
はてなブログの記事にはりつけ
「HTML編集」モードではりつけ

まず、記事執筆画面で「HTML編集」モードにします。(これ重要!)

ここで、さきほどコピーしたコードを貼り付ければ記事内にTweetが挿入されます。

おつかれさまでした!これで記事内のtweetの挿入は完了です。

まとめ:Twitter連携することでアクセスアップも狙える!

最後に、本記事の内容をまとめます。

まとめ
  • タイムラインにTwitterアカウントを埋め込む方法
    ① TwitterアカウントのURLを取得
    ② 「Twitter Publish」で埋め込みコードを取む
    ③ はてなブログに埋め込みコードを貼り付ける
  • 記事内にTweetを埋め込む
    ① はりつけたいTweetのコードを取得
    ② 「HTML編集」モードでコードをはりつけ

もし記事の内容でご不明な点がございましたら、コメント欄やお問い合わせフォームよりご連絡ください!

はてなブログの収益化にご興味がある方は、次の記事も合わせてどうぞ。

» はてなブログ収益化のすべて(準備中)

よかったらシェアしてね!
目次
閉じる