Cocoon WPZOOM Instagram Widget

WPにインスタグラム投稿を表示したい

インスタウイジェット をworldPress（ワードプレス）に投稿一覧を表示したい！
ということで、試行錯誤してみました。

Instagram（インスタグラム）をはじめて約1年経ちましたQOOPYです。
今更ながら、というか世間の流れにのって（笑）インスタデビューしてました、インスタ使用頻度は更新はたま～にする程度です。
世の中で流行っている「インスタ映え」というものがありますが、写真は綺麗めというのがインスタのセオリーだと思っています。
そこで綺麗めの写真をせっかくなら自分のサイトに表示したい！と思いました。
インスタ投稿表示、どうしたら簡単にできるのか3日間ぐらい試行錯誤しております。
そこでブラグイン使うか使わないか、まずはそこから考えてみました。
結果として、下記の2つを試してみました。

インスタウイジェット 試してみたもの

プラグインなしの場合・・・SnapWidget
SnapWidgetはログイン登録してコードをコピペする方法です。
無料で使用できますが、投稿写真をクリックするとインスタに行かず、SnapWidgetになります。
使い方はコードをコピペして簡単に設置できるのでとても便利かと思います。
ただ気になるのは、外部JavaScriptでコードがiframe（HTML5では非推薦）なのでワタシ的には却下にしました。

プラグイン使用の場合・・・WPZOOM Instagram Widget
WPZOOM Instagram Widgetは日本語表示ではありませんが、テーマのcocoonとの相性が良いという事とウイジェット仕様で簡単設置できます。それにレスポンシブなので文句なしです。
上記のものを試してみて、テーマがcocoonであればこれのプラグインが一番いんじゃないかなあと思います。

また、人気のプラグインSmash Balloon Social Photo Feedはcocoonと相性が悪く表示されないし、設定がややこしいので却下にしました。
同様にサイト表示が重くなるような論外です（笑）

　インスタウイジェット をトップページやサイドバーに

WPZOOM Instagram Widgetはシンプルで軽量なウィジェットです。
トップページ（フロントページ）もしくはサイドバーに表示するプラグインです。
（固定・投稿ページ表示はウイジェット設置で表示が可能だと思います）
インストールをしたら、インスタアカウントと連携します。
その後、worldPress・ダッシュボード・ウイジェットから設置します。

さらにダッシュボード・ウイジェットからInstagramフィードを表示したい場所（ウイジェットエリア）に配置できるようになっています。

要するに、設置がとても簡単ですなんですよね！

インスタグラム投稿を表示させる方法

• WPZOOM Social Feed Widgetをインストール
• まずは有効化にする
• 設定する（ダッシュボードInstagram Widgetが追加されている）
• インスタアカウントと連携する（連携するとアクセストークンがでます）
• 保存する（Profile Pictureなどは任意です）
• 外観からウイジェットへ、Instamgram Widgetブロックがある
• ドラック＆ドロップして任意のウイジェットエリアへ追加
  • Instagram Widgetウイジェットの設定する（ほとんど何もしなくいい）

• 保存・完了してInstagram投稿が表示

設置しているサイトはコチラ

着物リメイクの可能性、変わらなく良いものを着物リメイク雑記帳

着物リメイク雑記帳は着物リメイク作家QOOPYが日々の制作や雑学のWebサイトです。お客様のご要望に応じ可能な限りオーダーメイドも受付て素敵なお品に変身しています。着物リメイクのお悩みも解決、福岡市東区の工房で制作、お気軽にご相談ください。

kimonoremake.net

WPZOOM Social Feed Widgetプラグイン設置を参考したサイト

ブログに連携してインスタ画像を表示「WPZOOM Social Feed Widget」の使い方

ブログをすると宣伝を兼ねてSNSもしますよね。 そこでインスタグラムの写真を サイドバーに埋め込んでパネル表示する プラグイン「WPZOOM Social Feed Widget」の紹介です。 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

Social Feed Widget：Instagramの写真をウィジェットで表示できる | WordPress活用術

WPZOOM Social Feed Widget - インスタグラムの写真を取得し、ウィジェットで表示できるWordPress用プラグインの導入から日本語化・使い方と設定方法を解...

www.hiskip.com

インスタグラムへのボタンをカスタマイズ

分かりやすくするために、インスタグラムへの表示のボタンをインスタ色にカスタマイズしてみました。

カスタマイズコードは下記のようになります。

/* WPZOOM Social Feed Widget Instagram表示*/

.main
a.ig-b-v-24
 {
border-color: #ffffff!important;
color: #ffffff!important;
background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}

コードの解説をします。
もともとプラグインに!importantを使用されていて!importantを上回るにはどうすれば良いのか・・・

解決方法としては、上書きしたい場合は詳細なセクレタを指定すると良いようです。
.main（セクレタ）を追加して !important を超えた !important を設定する方法でした。

またインスタ投稿の写真表示をバランスよくしたいので、そこもカスタマイズしました。

.zoom-instagram-widget__items ol, ul 
{
padding-left: 10px;
}

見た目はやはり大事で、少し左よりにすると、PCもモバイルもバランスよく表示されました。

WPZOOM Instagram Widgetの感想

色々悩みましたが、優先順位にテーマcocoonと相性が良い インスタウイジェット の設置が簡単！ということを絞って決めました。

上記にも書きましたが、使い勝手がよくてもHTML5など非推薦コードを使っている場合はなるべく使用しないようにしています。
今回は、たまたまテーマに相性が良い インスタウイジェット プラグインを見つけることができました。

他のcocoonカスタマイズを見てみる

インスタウイジェット ・Instagram投稿をサイトに表示したいと考えている方、参考になりましたら幸いです。

追記

　インスタウイジェット の２０２２年３月追記です。

投稿ページにWPZOOM Social Feed Widgetプラグインを表示しました。

2022 弥生/最近思うこと

お久しぶりです！約２年ぶりの更新です。２０２０年の１１月から記事を全く書いていませんでした。その間にfacebookもやめてしまい、日常的に更新しているのはTwitterだけになりました。・・・たまに作品紹介でInstagram（インスタ）

kimonoremake.net

WPZOOM Social Feed Widgetプラグインは、ウイジェット専用なので投稿本文に引用ができません。Cocoonであれば本文の前か後のどちらか、ウイジェットエリアから選んで表示することができます。
今回は投稿本分下のウイジェットに入れました。
特定の投稿ページのみ表示したいのでページIDを入れ、IDを入力したページのみインスタを見れるようにしました。

その際に気を付けたいこと。
ウイジェット専用のWPZOOM Social Feed Widgetです。
投稿文に設置するとインスタ表示がおかしくなる場合もあります。
キレイに列に並ばない、表示がおかしい、など。
今回レスポンシブ表示がおかしかったので、CSSでカスタムコード入れてみました。
コードは投稿ページのカスタムCSSにしています。

.zoom-instagram-widget__items 
{padding-left: 2px;}

.article ul li, 
.article ol li 
{margin: 0;}

.article ul, .article ol 
{padding-left: 8px;}

marginとpaddingはお好みで調節してください。
ウイジェットエリアと投稿（articl）エリアだと少し微調整が必要でした。

インスタ一覧を紹介したいとしたい時はとても便利ですね！フォロワーさんも徐々に増えてきました。

以上、worldPress（ワードプレス）に インスタウイジェット の設置してみました。