Negi-note.

ズボラ系40代主婦の暮らし。

【はてなブログ】記事にツイートやタイムラインを埋め込む方法

 当ブログの記事には広告・アフィリエイトが含まれています。

negi
こんにちは!negiです♪ 

この記事は、

はてなブログの記事やサイドバーに

  • X(Twitter)のポストを埋め込む方法
  • タイムラインを埋め込む方法

を自分用の備忘録も兼ねて、記録しておきたいと思います。

初心者の方にもわかりやすく画像付きで手順を書いておりますので、埋め込む方法がわからないという方の参考になれば幸いです。

※2023年9月、ちょっと埋め込む方法が変わったみたいなので、新しいやり方に修正・更新いたしました。

X(Twitter)の埋め込み方。

記事にポスト(ツイート)を埋め込む

まずはブログの記事に

▼このようにポストを埋め込む方法です。

STEP
埋め込みたいポストの「…」をクリック

X(Twitter)の埋め込みたいポストの右上の「…」をクリックします。

STEP
「ポストを埋め込む」をクリック

 ポストを埋め込むをクリックします。

STEP
開いた画面の「コードをコピーする」をクリック

「コードをコピーする」をクリックします。※コピー完了画面が出ずに画面が真っ白になることもありますが、コピーは出来ているので気にせず次に進みます。

STEP
コードを貼り付ける

ブログ記事のポストを埋め込みたい場所に「HTML編集」にしてからコードを貼り付けます。

以上です。

埋め込み完了!

埋め込みました!

サイドバーにタイムラインを表示する

続いて、▼このようなタイムラインを表示するやり方です。

STEP
タイムライン埋め込みコード
▼まずはこちらで埋め込みコードを取得します。
https://publish.twitter.com/
STEP
埋め込みたいツイッターのIDを入れます。

STEP
埋め込みタイムラインをクリック。

「埋め込みタイムライン」をクリックします。

STEP
カスタマイズオプションで好みのサイズなどを調整します。

「カスタマイズオプションを設定をする」をクリック。

表示したい大きさ、白か黒、言語を選べます。
サイドバーに入れたい場合は300ぐらいがちょうどいいかも。
お好みのサイズに設定したら「アップデート」をクリックします。

そして、「コードをコピーする」をクリックします。※コピー完了画面が出ずに画面が真っ白になることもありますが、コピーは出来ているので気にせず次に進みます。

STEP
コードを表示したい場所へ貼り付けます。

はてなブログ管理画面の デザイン> カスタマイズ> サイドバーの、「モジュールを追加」をクリックします。

STEP
 HTMLモジュールを選択

お好きなタイトルを入れ、コピーしたコードを貼り付けて適用をクリック。
最後に「変更を保存」します。

以上です。

埋め込み完了!

サイドバーに表示されました!

まとめ

というわけで、

最近いろいろと変化しているX(Twitter)さんですが、こういった埋め込みも急にできなくなっちゃったりするのかな?^^;

変化があったら分かる範囲でなるべく修正していきますね。

最後までお読み下さり、
有難うございましたm(_ _*)m
20230729@negi.

Copyright © 2023 Negi-note. All rights reserved.