「Tumblr」ブログのサイドバーにX(旧Twitter)のタイムラインを出したい【T】
![]() |
SNSのタイムラインをブログに埋め込むメリット
ブログのサイドバーにX(旧Twitter)のタイムラインを配置することは、訪問者に対して「今まさに活動している」という安心感を与えるために非常に有効です。
静的なブログ記事だけでなく、動きのあるSNSの投稿が目に入ることで、読者の興味を惹きつけ、複数のプラットフォームを跨いだファン化を促進できます。
具体的には以下の点に注目して連携を進めてください。
最新のポストが自動で更新されるため、ブログ全体の鮮度を高く保つことができる。
ブログの読者がそのままSNSのアカウントをフォローしやすい導線を作れる。
テキスト中心のブログにSNSの視覚的な要素が加わり、レイアウトに動きが生まれる。
アドバイスとして、タイムラインの表示サイズをサイドバーの幅に合わせて調整することで、デザインを崩さずにスマートに配置することが可能になります。
公式ツールを使って埋め込み用コードを取得したい
「Tumblr」に貼り付けるための専用コードを、X(旧Twitter)が提供する公式サービスから発行する基本的な解決策を確認していきます。
作業をスムーズに進めるため、以下の手順で操作を行ってください。
ブラウザで「Twitter Publish」のサイトにアクセスし、自分のプロフィールURLを入力する。
表示オプションの中から「Embedded Timeline(埋め込みタイムライン)」を選択する。
「set customization options」をクリックし、サイドバーに合うように高さや幅、テーマ(ライト/ダーク)を細かく指定する。
発行された「HTMLコード」をコピーして、いつでも貼り付けられるようにメモ帳などに控えておく。
注意点として、アカウントが「非公開(鍵付き)」に設定されている場合は、外部のサイトにタイムラインを表示させることができないため、あらかじめ公開設定を確認してください。
テーマのHTMLを編集してサイドバーに配置したい
取得したコードを「Tumblr」のシステム内に組み込み、実際にブログ画面へ反映させる高度な手法を試してみましょう。
作品の表現を広げるため、以下の手順でコードの挿入を行ってください。
ダッシュボードの「テーマの編集」画面を開き、左メニューにある「HTMLを編集」をクリックする。
コードの中からサイドバーを定義している箇所(通常は「sidebar」や「aside」という単語が含まれる行)を探す。
先ほどコピーした埋め込みコードを、表示させたい位置に正確に貼り付ける。
画面上部の「更新プレビュー」で表示を確認し、問題がなければ「保存」を押して公開する。
アドバイスとして、HTMLの編集に自信がない場合は、サイドバーに「説明文(Description)」などの自由入力欄があるテーマを選べば、そこにコードを貼るだけで簡単に表示できる場合があります。
タイムラインの連携を最適化した際の効果
ブログとSNSの境界線をなくし、リアルタイムな情報を発信できるようになると、サイトの活気が劇的に向上します。
具体的には以下の結果が得られます。
読者があなたの最新のつぶやきや活動を瞬時に把握でき、親近感を持ってもらいやすくなる。
SNSでのトレンドや話題をブログ経由で広めることができ、情報の拡散力が強まる。
過去の記事を読んでいる最中にも現在の活動が目に入るため、ブログが「生きているメディア」として認識される。
注意点として、あまりに長いタイムラインを表示させるとページの読み込みが遅くなることがあるため、表示するポストの数は3件から5件程度に制限しておくのが、快適な閲覧環境を保つ秘訣です。
