WordPressでブログをやられている方でInstagramに投稿した画像や動画をブログ個別記事内やサイドバー、フッターなどに表示させたい方多いかと思います。
WordPressで作成したブログ内にInstagramの画像やタイムラインを埋め込む方法はいろいろとありますが、具体的には埋め込みコードを取得して記事内に表示させたり、プラグインを利用してサイドバーやフッターなどに表示させる感じとなります。
- ブログの個別記事内にInstagramの画像や動画を埋め込む
- プラグインを使用してサイドバーやフッターなどにタイムラインを埋め込む
一度設定してしまえば、あとはInstagramを更新するとブログ内に埋め込んだタイムラインや「いいね」の数なども自動的に更新されます。（もちろんレスポンシブにも対応！）
今回、プラグインを使用してブログサイドバーにInstagramタイムラインを表示させる方法をご紹介します。
Instagram関連のプラグインは多数ありますが、見た目が綺麗で設定も簡単、そしてプラグインのアップデートも頻繁に行われている『Smash Balloon Social Photo Feed』を使ってみたいと思います。
目次
【WordPress】ブログのサイドバーやフッターにInstagramのタイムラインを表示させる方法！
Instagramの画像や動画をブログ内に埋め込む方法は大きくこの2通りになります。
- ブログの個別記事内にInstagramの画像や動画を埋め込む
- プラグインを使用してサイドバーやフッターなどにタイムラインを埋め込む
①個別記事内にInstagramの投稿画像を表示させる
まずは最も簡単な方法です。
ブログの個別記事内にInstagram投稿画像を表示させる方法です。
Instagram公式サイトから埋め込みコードを取得させ記事内に埋め込みます。
ブログ記事内にはこんな感じで表示されます。
CSSのカスタマイズにより表示位置やサイズも変更することが出来ます。
Instagram公式の埋め込みコードを利用しているので、見た目もまさしくインスタって感じですね！
ユーザー名やプロフィール、Instagramでもっと見るなどのボタンも設置されています。
もちろん［いいね！］の件数は自動的に更新されます。
WordPressのブログ記事内にInstagramの画像を埋め込む方法で一番簡単なのが、Instagram公式の埋め込みコードを利用して記事内に貼り付けるこの方法だと思います。
ブログ個別記事内に特定の投稿を表示させたい場合に便利となります。
こちらの記事で詳しく紹介しているので参考にしてみて下さい。
②プラグインを使いサイドバーやフッターにInstagramタイムラインを表示させる方法！
記事内にInstagramの個別画像を表示させるのは上記方法が一番簡単となります。
次にプラグインを使用してブログのサイドバーやフッターにInstagramタイムラインを埋め込む方法です。
こんな感じでブログサイドバーに（フッターなどにも）設置させることが出来ます。
Instagram関連のプラグインは多数あるようですが、今回『Smash Balloon Social Photo Feed』というプラグインを使った方法をご紹介します。
一番シンプルで簡単に設置が出来るのでオススメです！
もちろん、Instagramで新たに投稿すると自動的に埋め込んだフィードも更新されるので便利です！
プラグインのインストール&有効化
プラグイン画面から名前検索すれば出てくるかと思います。
あとは通常どおりプラグインをインストール＆有効化させます。
Instagramとの連携作業
プラグインのインストール＆有効化が完了すると、サイドバーに【Instagram Feed】という項目が表示されます。
［Connect an Instagram Account］からアカウント連携作業を行っていきます。
表示設定
まずは最低限の表示設定をやっていきます。
プラグイン設定画面で、［Customize］タブを選択。
項目が多いのですが基本となる設定のみご紹介します。
【General】
［Width of Feed］フィードの幅
［Height of Feed］フィードの高さ
［Background Color］背景色（ブログの背景色によって指定）
［Width of Feed］［Height of Feed］どちらかが100%指定なら片方は空白で問題ありません。
ウィジェットからの使用ではフィード幅100%で問題ないかと思います。
【Layout】
［Number of Photos］写真の表示枚数
［Number of Columns］表示させる列数
［Padding around Images］写真間の余白の幅
［Disable mobile layout］スマホ表示の有無
【表示例】
（Number of Photos:12：Number of Columns:3：Padding around Images:1指定）
【Photos】
［Sort Photos By］Newest（新着順）、Random（ランダム）表示
［Image Resolution］画像の解像度を指定する
【Header】
［Show Feed Header］ヘッダーの有無を指定（ウィジェットの方で指定する場合なしの方が）
［Header Size］ヘッダー有りを指定した場合のヘッダーサイズ指定
［Show Bio Text］プロフィールの表示
［Header Text Color］ヘッダー文字色を指定
【Load More Button】
［Show the “Load More”button］もっと見るボタンの有無
［Button Background color］ボタンの背景色
［Button Text Color］テキスト色
［Button Text］表示させる文字（デフォルトでは”Load More…）
【Follow Button】
［Show the Follow button］フォローボタンの有無
［Button Background Color］ボタン色
［Button Text Color］ボタンテキスト色
［Botton Text］表示させる文字（デフォルトではFollow on Instagram）
以上が基本となる設定項目です。
ほぼデフォルトで変更する必要はありませんが、必要に応じて調整して下さい！
ショートコードを取得しウィジェットに設定
以上、基本的な設定が完了したら【Display Your Feed】タブからショートコードをコピーしてウィジェットから表示させたい場所（サイドバーやフッターなど）に設置すれば完了となります。
ウィジェットからは［テキスト］からショートコードを貼り付ける感じですね！
外観 → ウィジェット → ［テキスト］に貼り付け
まとめ！
以上でWordPressプラグインを使用してサイドバーにInstagramタイムラインを埋め込む方法でした。
Instagramに投稿すると自動的に埋め込んだフィードも更新されるので便利ですね！
もちろん、こんな感じに記事内に埋め込むことも可能ですよ！
[instagram-feed]
コメントを残す