【初心者向け】ワードプレス(wordPress)のサイドバーにインスタグラムを表示させる方法

今回更新がなかなか進まないこのブログも更新がまだマシな(笑)自分のインスタグラムの情報をサイドバーに貼りたいなぁと思って昨日無事に表示させることができたのですが、

そこでどうやってやるのか分からなかったので、表示させる方法をインターネットで調べてみてもこのPC音痴の僕には難しい言葉がずらーり。。

試行錯誤しながらやってみたら意外なほど簡単にできたのでその方法を紹介します。

スポンサーリンク

「instagramフィード」プラグインをインストールしよう

今回僕のやった方法はワードプレスのプラグイン「instagramフィード」というプラグインを使う方法。

プラグインの「新規追加」から「instagram feed」と入れて検索すると上位の方に出てくると思います。

instagramfeed

今すぐインストールからプラグインをインストールしましょう。

プラグインが正常にインストールされて有効化すると、左側のメニューにinstagram Feedが追加されます。

instafeed

赤枠で囲ったところからログインすると黄色く色がついているところに入力するアクセストークンとログインIDが取得できます。

PCからログインしていない場合は、この画面が出るのでユーザーネームとパスワードを入れてログインしましょう。

instalogin

ログイン後もう一度同じところをポチッと押すと、アクセストークンとユーザーIDが表示されるので、黄色の枠内にこれをコピペしましょう。

afterlogin

これでもうインスタを張り付けられる状態になりました。

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

なんかいろいろとできるみたいなんですけど、とりあえずサイドバーに張り付けたいだけの僕が今回使うのは

というコードのみ。

ウィジェットの管理画面からテキストウィジェットを表示させたいところに追加。
そしてそこに上の

というコードを張り付けるだけで表示が可能です。

サイドバーの幅や表示させたい枚数は人それぞれだと思いますが、それもプラグインの管理画面のカスタマイズcustomizeタブから表示されるインスタの設定が出来ます。

insta%e8%a8%ad%e5%ae%9a

自分のサイトに合わせて自分好みにカスタマイズしてみましょう。

注意事項

僕のアカウントは開発者登録済みでしたので、もしかしたら今回紹介した作業以外に開発者登録が必要かもしれません。その辺の知識が乏しくよくわかりません。
アクセストークン等が表示されないという方は開発者登録がしてるか確認してみてください。
開発者登録は全く難しくないので安心してください。
インスタグラムにPCからログインして、自分のページに移動。
一番下にあるAPIというところからアクセスすると次の画面になるので赤枠に移動。

%e9%96%8b%e7%99%ba%e8%80%85%e7%99%bb%e9%8c%b2

遷移先のページで自分のウェブサイトのURLと自分の電話番号、登録目的を入力して登録します。僕のアカウントは登録済みなので画像がなくてすみません。
僕はAPI登録目的には「For make gallery」と入力しておきました。

思ったよりも簡単にできた

ちょっとAPIの辺りのことが不確定な情報で心苦しいのですが、ネットで調べていたら本当にちんぷんかんぷんでしたが、やってみたら思ったよりもかなり簡単にできました。
こんな僕でもできたので、ブログにインスタ載せたいなぁという方は是非試してみてください!

インスタといえば今回の記事とは全然関係ないのですが、先日インスタにアップした長谷川潤さんの絵に、ご本人がいいね!を下さるという嬉しいサプライズがありました!マイペースな投稿ですが、そんな僕のインスタもフォローしてくださるとうれしいです♪

それではまた!

booking
高確率で最安値で泊まれるBooking.com
ここから予約すると1800円のキャッシュバックが受け取れます Booking.com
ブログランキング

ブログランキングバナー復活しました!
クリックすると僕が喜びます。ただそれだけです。。。
にほんブログ村 海外生活ブログ ワーホリ(オーストラリア)へ
にほんブログ村

シェアする

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です