Instagramをブログに連携して、いい感じにサムネイル表示させたいな
とずっと思いつつ後回しにしていたのですが、先日ようやく達成しました。
インスタをある程度ちゃんと更新している人は、ブログに貼っておくと好きな世界観が伝わります。旅やライフスタイル系ブロガーさんにはおすすめ。
すごく簡単にできたので、やり方をシェアします。
Contents
調べた結果、プラグイン「Social Slider Widget」を使うのがよさそう
![instagram-slider-9トップページ.png Instagram slider 9トップページ](https://www.crocry.com/wp-content/uploads/2020/05/7a7d2b1b795dde9cb5e738601efdf426.png)
まずは結果から見てみましょう。WordPressのブログでこんな感じになりました。
サイトのトップページのサイドバーに、3×4で表示させてみました。もちろん、設定でこの列数は変えられます。
![instagram-slider-11socialslidewidgeet](https://www.crocry.com/wp-content/uploads/2020/05/instagram-slider-11socialslidewidgeet.png)
いろいろ調べたところ、この「Social Slider Widget」というプラグインを使うのがよさそうでした。サムネイル表示だけでなく、
- 1枚ずつ大きく表示されスライド
- ブログ下部に横一列で表示
など、設定でいろいろ変えられます。オプションが豊富なので、自分の理想の表示形式にたぶんできると思います。
「Instagram Slider Widget」を使ってブログに連携させる方法
![instagram-slider-6プラグイン新規追加.png Instagram slider 6プラグイン新規追加](https://www.crocry.com/wp-content/uploads/2020/05/d8e7cbff2a74dc794006579e16143c3b-1.png)
プラグイン導入の手順を解説します。まずは新規プラグインのところで探し、インストールして有効化します。
![instagram-slider-1アカウント連携.png Instagram slider 1アカウント連携](https://www.crocry.com/wp-content/uploads/2020/05/506366a82001c991e3d75c7b1075bc92.png)
設定を開くと、さっそくInstagramアカウントとの連携のフローが出てきます。
![instagram-slider-2アカウント連携.png Instagram slider 2アカウント連携](https://www.crocry.com/wp-content/uploads/2020/05/6ffdf893511f662fe7ee191c5ce7bdf1.png)
連携したいアカウントを選びます。私の場合はただの個人アカウントのため、「PERSONAL ACCOUNT」を選択。
![instagram-slider-7認証.png Instagram slider 7認証](https://www.crocry.com/wp-content/uploads/2020/05/f25a3e134b3b75ecc4bc6c7e1b38ac6d.png)
連携していいですか?というポップが出てくるので、Authorize。
![instagram-slider-8連携完了.png Instagram slider 8連携完了](https://www.crocry.com/wp-content/uploads/2020/05/3332a5de2b0125b233a6f89db449064c.png)
はい、これで連携できました。簡単ですね。
![instagram-slider-3ウィジェット.png Instagram slider 3ウィジェット](https://www.crocry.com/wp-content/uploads/2020/05/157ebdbc96940c74030b0fef56bc014a.png)
連携できたら、次にどこに挿入するかを決めていきます。トップページのどこかに設定したい場合、ここから「ウィジェット」を選びます。
ウィジェットの操作方法は割愛しますが、サイドバーだったりフッターだったり、好きなところにこの「Social Slider Widget」を持ってくることができますね。
「Instagram Slider Widget」の細かい設定方法
![instagram-slider-4設定画面.png Instagram slider 4設定画面](https://www.crocry.com/wp-content/uploads/2020/05/fe964e4dfcc1aa743bc1b24593069db9.png)
設定できる項目がこんなにたくさんあります!英語なので少し戸惑うかもですが、とても簡単です。特定のハッシュタグは除くとか、単語単位でブロックしたりもできるのですが、私は特に必要なかったので、無視。
![instagram-slider-5細かい設定.png Instagram slider 5細かい設定](https://www.crocry.com/wp-content/uploads/2020/05/1d11c9c6f94696da443c542b69119e22.png)
大事なのは「Count of image to show」より下の部分。たとえばこんな感じ。
- Count of image to show: 9(表示する画像の数:9)
- Check for new images every 5 hours(5時間ごとに新しい画像を取得)
- Template: Thumbnails(テンプレート:サムネイル※数種類から表示形式を選べる)
- Number of Culumns: 3(カラムの数:3)
- Order by Date – Descending(日付順)
- Link to Instagram Image (各画像にリンク)
私のブログでは最初この設定にしていたのですが、表示する画像の数が奇数だと、スマホで見たときに2列になるので余ってしまいます。だから12で設定するのがおすすめかな。
簡単にできます!スマホにもサムネイルがちゃんと反映
![instagram-slider-9トップページ.png Instagram slider 9トップページ](https://www.crocry.com/wp-content/uploads/2020/05/7a7d2b1b795dde9cb5e738601efdf426-1.png)
というわけで、こうなりました!理想形ですね。
![instagram-slider-10スマホ.jpg Instagram slider 10スマホ](https://www.crocry.com/wp-content/uploads/2020/05/ea849790e0f09274a321ba9546fa880c.jpg)
スマホでもちゃんと表示されています。2列になってしまいますが、むしろ3列だと細かすぎるかもしれないので、見やすくていいかも。デザイン的にもすっきりしてますね。
ずっと後回しにしていたわりには、とても簡単でした!ぜひやってみてください。
おわり。