インスタグラム(Instagram)ウィジェットをHPに設置　WordPress編

どうも。D-Marking Designわたなべです。

忙しくてなかなかこの本家サイトのHPを改造できてなくて、（半年ほど、？汗）

やっと、ブログの部分やら色々と、少し修正・カスタムなどできました。

（まだまだ、構想は多々あるんですが、。ボチボチやってきます。）

さて、

サイドバーにインスタグラム(Instagram)のウィジェットを設置しました。

webサイトって、現実味がかけると思うんで、うちの愛猫フィンくんを

アップしていくコンセプトでインスタグラム始めようと思っていました。

インスタグラムのウィジェットもウチでHP制作する場合はサービスで設置できたりするので、

よろしくお願いします。

インスタグラム(Instagram)ウィジェットをHPに設置Wordpress編

手順１.　まずはインスタグラムのアカウント取得。（iosかandoridoのアプリから作成）

既存のIDを使いたい場合は準備OK!

アカウントを切り替えて使いたい場合は一度ログアウトして、新しくアカウントを作る。

FotogrammeというアプリをDLしてログインすればアカウントを切り替えれるようでした。

WEB公開用、プライベート用など使い分けれます。

手順２.　WordpressにInstagram feedをインストール

2020追記　どうやら名前が変わったようです、。

変更後　▶ Smash Balloon Social Photo Feed

このプラグインは英語ですが、簡単に設定できました。

インスタグラムにログインした状態でプラグインの設定画面で

この青いボタンを押します。

そうすると自動でAccess Tokenてやつと、User ID(s)ってやつが表示されます。

それをコピペして入力。保存

カスタマイズってページで表示件数やサイズを調整したら準備完了！

3.サイドバーにInstagramウィジェット設置

ショートコードですが

[instagram-feed]

こいつを僕は直接テーマに書きますので

echo do_shortcode( ' [instagram-feed]' );

phpで書いてこれで表示されますね！

2015.08追記

[instagram-feed showbutton=false showheader=false]

としました。

4.あとは自分のインスタグラムの一覧のページへリンク

ウィジェットの下にveiw more を足しました。

インスタグラムにアクセスして自分ページをコピペしてリンクします。

僕はターゲットブランクで。

以上になります。

Instagram feed プラグインのメリット

僕的にWordpressプラグインでなくても良かって、

最初はSnapWidgetってやつでやったんです。

iFrameで簡単に設置できて、Wordpressでない場合はおすすめですが、

写真をクリックした際の画面がオフィシャルのInstagramの画面でなくて、

少々、ごちゃっとした広告入りの画面で表示されたので、どうしてもシンプルな画面、それもオフィシャルの画面で開いて欲しくてInstagram feedにたどり着きました。

他にもクリックすると写真だけが開くスタグラメーカーってやつもありました。

こちらもWordpressプラグインではないのでどんなサイトにも設置できます。

以上長くなりましたが、サイドバーに

ネコスタグラムと表した

愛猫用インスタグラムウィジェット設置しました。でした。

Good Web Life!