以前にInstagramの連携用プラグインとしてご紹介した「InstaShow Lite」ですが、プラグインとしての提供が終了してしまいました。
InstaShow Liteの記事はこちら
プラグイン公開時にインストールしている場合は引き続き使えるようですが、新規でInstagramとWordPressを連携しようとした場合には上記の方法を取れなくなってしまいました。
じゃあどうすればいいの！？
ご安心ください。
今後は「InstaShow」として公式ページで連携用コードを生成⇒サイトにコードを埋め込むことで今まで通りにInstagramを表示できるようになっています。
少々手間が増えてしまいましたが、手順通りに進めていただければ簡単にインスタ連携ができますので是非チャレンジしてみてください。
実際には
このように表示されます。
InstaShowのアカウント登録
InstaShowを利用するにあたって、まずはアカウントの準備が必要となります。登録も利用も無料で行えますので安心してください。
InstaShowの公式ページに行くと、
このように、2つのパターンからライセンス登録を行えますので、左側の$0 and 1 minから「Try it FREE」を選択します。
赤枠の方が無料版になりますので選ぶ際はご注意ください。
するとInstagram Feedのページに遷移します。
サイト左下の「Continue with this template」をクリックすると、
ボタンが「JOIN TO INSTALL」に変わりますのでもう一度クリックします。
そうするとInstaShowの登録画面が表示されますので、こちらからアカウントを作成しましょう。
メールアドレスで登録するか、facebook、もしくはGoogleアカウントを使って作成できますので、どれかを使って作成しましょう。
なお、1ライセンスでInstagramを表示できるのは1サイトまでとなっていますので、サイトが複数ある場合は別途アカウントを準備する必要がありますので併せてご注意ください。
サイト内レイアウトの設定
アカウントの作成が完了したら、次にサイトでのレイアウト（見え方）の設定を行っていきます。
作成後、上図のようにダッシュボードが表示されますのでこちらから各種の設定を行っていきます。
設定に先駆けてこちらのエリアに適当なウィジェット名を記入して今後の管理をしやすくしておくことをオススメします。
アカウントの紐づけ
まずはCONTENTのタブから、どのInstagramアカウントをサイトに表示させるかを設定します。
また、自身のアカウント（@username）だけでなく、ハッシュタグ（#～）やURLでの指定も可能ですので活用してみてください。
レイアウトの設定
次にLAYOUTのタブからサイトに表示させる方法を選択します。デフォルトの状態でも「いい感じ」になっていますが、以下の内容で表示内容や動作を変更できますので必要な箇所を調整していきましょう。
FEED LAYOUT
こちらの項目では画像の表示方法を選択できます。
・Slide（スライドショー形式）
・Grid（グリッド形式）
から選択する事が可能です。
スライダーの場合は矢印の表示やコマ送りの時間、自動送りの設定などをLAYOUTタブのSlider Controlsから設定可能です。
POST TEMPLATE
こちらの項目では画像の表示形式を選択できます。
Tileを選択すると画像だけが表示され、マウスを乗せると投稿文が表示される形に、Classicを選択すると投稿者やいいねやコメント、シェアボタン、投稿文などが全て表示される形になります。
表示されるユーザー名やいいね等の内容はLAYOUTタブのPost Settingsで表示・非表示の選択が可能です。
Columns&Rows
表示する画像数を変更できます。
COLUMNSに入れた数字が横並びに表示される画像数、ROWSに入れた数字が表示される行数になりますので、こちらから見せたい形に調整を行いましょう。
デフォルトでは画像の間に隙間はありませんが、SPACE BETWEEN IMAGESに適当な数字を入れることで隙間を作ることも可能です。
数字はピクセルとなっているので、SPACE～の欄に15と入れると画像の間に15pxの空きを作ることができる、という形です。
また、MOBILE OPTIMIZATIONの欄からブラウザサイズで表示を切り替えることも可能で、デフォルトでは
・1024px（小型PC）
・768px（タブレット）
・375px（スマホ）
で表示を切り替えられるようになっています。
スマホでは表示数を減らす、といった設定も行えますので実際に確認しながら最適な形を試してみてください。
COLORS
マウスオーバー時の色やテキストカラーの変更が可能です。
ただしグラデーションをかけたい、といった少し凝った内容にする場合はこちらではなくcssで対応する事になります。
インスタっぽい見た目に変更する方法は後述しておりますので参考にしてみてください。
MORE
FEED TITLEの項目からタイトル部分を変更可能です。
「〇〇のInstagram」「Memories」など独自の形に変えたい場合はこちらに記入しましょう。
タイトルが必要ない場合は空白にしておくと何も表示されなくなります。
設定を保存する
全ての設定が完了したら、右上の「Save」を押して設定を保存しましょう。これで表示に関する設定は完了です。
埋め込み用コードの生成
設定が完了したら実際にInstagramをWordPressに埋め込む用のコードを取得しましょう。
保存後に表示される画面のAdd to websiteをクリックするとサイトに埋め込む用のコードが表示されます。
場合によっては上図のようにプランの選択をせまる画面が表示されますが、一番右のLiteプランを再度選んでおけば問題ありません。
コードはこのようにポップアップで表示されます。コード部分をクリックすると先ほど作成したinstagram表示用のコードがコピーされます。
サイトへの組み込み方
では、コピーしたコードをサイトに組み込んでみましょう。
方法はとても簡単で、記事（ページ）内のInstagramを表示させたい場所に先ほどコピーしたコードを貼り付けるだけです。
そうすると
このようにレイアウトした形でInstagramが表示されます。
インスタっぽく見た目を整えてみる
以前の記事でもインスタっぽい見た目にしてみようのコーナーを設けましたが、今回もインスタ感を出せるようにしてみましょう。
タイトル部分に関しては前記事を参照していただければと思いますが、マウスオーバーに関してはclass名が変更になっているので新たにcssを追加してあげる必要があります。
.eapps-instagram-feed-posts-item-overlay{
background: -moz-linear-gradient(177deg,#4d4c9db8,#e75f71b8 65%,#ffa66bbd) !important;
background: -webkit-linear-gradient(177deg,#4d4c9db8,#e75f71b8 65%,#ffa66bbd) !important;
background: linear-gradient(177deg,#4d4c9db8,#e75f71b8 65%,#ffa66bbd) !important;
}こんな感じ。
すると
こんな感じでマウスオーバー時にインスタっぽい色合いに変更できますので、上記CSSを参考にサイトに合わせて色味を調整してみてください。
インスタっぽい見た目に整えるcssはこちらの記事で紹介しました
まとめ
という事でInstaShowを使ってInstagramをWordPressに表示する方法でした。
正直InstaShow Liteの方が使いやすく導入もしやすかったように思えますが、無くなってしまったものは仕方がないという事で今後はこちらを使ってサイト内にInstagramを表示していく事になりそうです。
是非試してみてください！
