X(Twitter)のタイムラインをWordPressに埋め込みする方法
InstagramやX(Twitter)のタイムラインをWordPressを使用したサイトに表示させておく方法をご紹介します。
埋め込み完成図
X(Twitter)の埋め込み方法
X(Twitter)の埋め込みはTwitter Publishを使います。
ここに埋め込みたいアカウントのプロフィールURLを貼り付けます。任意で明るさや縦横の長さを調整できます。
ここでは埋め込みコードに以下の内容を追記しています。
data-chrome="noheader nofooter noborders noscrollbar" data-width="100%" data-height="410"スクロールできます
| data-chrome=”noheader” | ヘッダー非表示 |
| data-chrome=”nofooter” | フッター非表示 |
| data-chrome=”noborders” | ボーダー非表示 |
| data-chrome=”noscrollbar” | スクロールバー非表示 |
| data-width=”100%” | 幅 |
| data-height=”410″ | 高さ |
これにより、タイムラインの投稿以外のヘッダー、フッター、枠線、スクロールバーの表示をしないように設定しています。
しかしあっさりしすぎてそのままでは周辺のコンテンツとの境界がわかりにくいため、外枠をcssの追記により追加します。cssを使用して枠線を追加することでサイトデザインにマッチした枠線を使用することができます。
/* Twitter Timeline */
.twitter-timeline{
border:dashed 1px #333;
padding:.3em;
border-radius:8px;
background:transparent;
}まとめ
これで冒頭のようなタイムラインの埋め込みが完成しました。SNSの情報をホームページに集約させておきたい場合に便利です。
関連記事
あわせて読みたい
BlueskyのタイムラインをWordPressに埋め込みする方法
Blueskyでは現在Xの「Twitter Publish」のような埋め込みするツールが公式にはありません。しかしオープンソースのプロジェクトがあるのでサードパーティではそのような…
Follow / Contact
