X(Twitter)とInstagramのタイムラインをWordPressに埋め込みする方法
InstagramやX(Twitter)のタイムラインをWordPressを使用したサイトに表示させておく方法をご紹介します。
埋め込み完成図
(Twitter)
Tweets by XInstagramの埋め込み方法
Instagramの埋め込みはプラグインを使いました。
驚くほど直感的でWordPressのブロックエディタで挿入し右側のブロック編集で余白や表示させる枚数などを指定していくだけです。
モーダルウィンドウにも対応していてホバー時のアクションもある程度指定できます。
しかも無料です。
使用したプラグインはこれです。
Combine Social Photos | Still BE
WordPress.org 日本語
Combine Social Photos | Still BE
WP ブロックエディタ専用の Instagram 埋込機能を提供します。自分の投稿、他のプロアカウントの投稿、ハッシュタグに関連する投稿を埋め込むことができます。
設定はヘッダー、フッター非表示でスマホは4枚、タブレットとパソコンは9枚表示されるように設定しています。
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の情報をホームページに集約させておきたい場合に便利です。
Follow / Contact
