サイドバーにTwitterのタイムラインを・記事内にツイートを埋め込む方法【はてなブログ】

はてなブログに、Twitterのタイムラインやツイートを埋め込む方法を説明します。

  • Twitterと連携して読者やフォロワーを増やしたい
  • Twitterタイムラインを埋め込んで動きのあるサイトにしたい

埋め込みの方法は、大きく次の二つに分けられます。

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

実際の操作画面を見ながら手順を進めていきましょう!

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

このような感じで、ブログのサイドバーにTwitterのタイムラインを設置する方法を紹介します。

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

① 自分のTwitterアカウントのURLを取得

自分のアカウントのトップページにアクセスし、アドレスバーをクリックするとURLが表示されます。

これをコピーしておきましょう。

僕の場合は、[https://twitter.com/karo_choa]となります。

MEMO
上の写真では[twitter.com]となっていますが、クリックすることで自分のURLが表示されます!

② 「Twitter Publish」のページにアクセス

「Twitter Publish」にアクセスして、先ほどコピーしたURLを入力します。

» 参考:「Twitter Publish」のページへ

今回はタイムラインを埋め込みたいので、左側の「Embedded Timeline(埋め込みタイムライン)」を選択します。

埋め込みタイムラインをカスタマイズしたい場合は、「set customization option」をクリック。

(デフォルトで構わない、という場合には飛ばしてOKです。)

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

以上の内容が変更できますが、いじるなら明るさを変えるくらいでしょうか?

ちなみに、明るさを「Dark」に変えると流行のダークモード風になります。

カスタマイズが終わったら、「Copy Code」をクリック。

③ はてなブログにコードを貼り付ける

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

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

[</>HTML]を選択し、次のような感じでフォームを埋めたら[適用]ボタンをクリック。

  • タイトル:「Follow!」や、「Twitterタイムライン」など
  • タイトル下のボックス:先ほどコピーしたコード

ツイートが縦にズラっと並んでしまって嫌だったので、表示ツイート数の制限をかけました。

これでサイドバーへのタイムラインの埋め込みは完了です!


記事を埋め込む方法

このように、特定のツイートを記事内に埋め込む方法を解説します。

特定のツイートを記事内に埋め込む方法

ツイートの右上にある[▽マーク] → [ツイートを埋め込む] をクリック。

[Copy Code]をクリックします。

記事の執筆画面で[HTML編集]モードにして、先ほどのコードを貼り付けます。

「編集見たままモード」では反映されないので、注意です。

これで記事内へのツイートの埋め込みは完了です!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です