ミニマムに暮らす。手帳のこと、シンプルライフについて

memorandum【シンプルに暮らす】

 

 FC2ブログにInstagramのFeedを貼ってみた / instafeed.js

20170822.jpg
Wordpressサイトで、Instagramのフィードをサイドバーに載せているのをみてやってみたいと思い試行錯誤したメモです。
まだCSSいじれていなくてデザインはイマイチだけど導入することができたのでメモします。
(ちなみにちょっと前に書いていたこのブログのWP化は挫折してるので触れないでください・・・)
Wordpressの場合はプラグインがたくさん用意されているようですが、
FC2ブログの場合はプラグインにはなさそうなので、instafeed.jsというJavaScriptライブラリ(という表現はあってる・・?)を使ってみました。

今回参考にさせていただいたサイトはこちら。
【Feedを取得しよう】Instagram APIでFeedを取得してサイトに表示させる方法 | will STYLE Inc.|神戸にあるウェブ制作会社

ここに書いてある通りにやればできました!

というのもあれなので、メモしますね。

1.Instagram API 開発者サインアップ



まず、InstagramのDeveloper向けサイトに行きます。

2017082204.jpg
Instagramの自アカウントのホームから一番下のAPIをクリックします。
https://www.instagram.com/developer/でもいけるかなと思います。

2017082205.jpg
Register Your Applicationをクリックします。

私は最初の登録だったのでここで開発者サインアップを求められました。
「website」と「Phone number」と「What do you want to build with the API?」という3項目。
3つ目の項目は堂々と日本語で書きました。(多分)大丈夫でしたよ。

2.クライアントIDの取得(Register a New Client)


次に、クライアントIDというものをゲットすべく、Register a New Clientに進みます。
2017082206.jpg


Application Name, Discriptionを入力し、(今回、それぞれmemorandum、memorandum's feedにしました。)
Website URLとValid redirect URIsには自サイトのURLを入れます。(http://mimemorandum.jp)

2017082207.jpg

その後、Securityタブに切り替えて、Disable implicit OAuth:のチェックを外します。

2017082208.jpg

これで、Registerすると、Client Infoが表示されます。
ここに表示されている、CLIENT IDをメモします。


3.Instagram ユーザーIDの取得


これは、以下のサイトで取得できました。
https://smashballoon.com/instagram-feed/find-instagram-user-id/
自分のアカウントのユーザーIDをメモします。

2017082209.jpg

4.アクセストークンの取得


以下のURLにアクセスします。
【クライアントID】はクライアントIDに。【リダイレクトURI】は2で入力したValid Redirect URIsにします。
https://api.instagram.com/oauth/authorize/?client_id=【クライアントID】&redirect_uri=【リダイレクトURI】&response_type=code


すると、認証画面が出るので、Authorizeをクリックします。


リダイレクトされますので、ブラウザのURL欄に出ているアクセストークンをメモします。
2017082210.jpg
(これが終わったら、2.で外したセキュリティタブのDisable implicit OAuth:チェックを戻すといいみたいです)

5.Instafeed.jsをDL、FC2ブログにアップロード



2017082211.jpg
いよいよjsファイルをDLします。
instafeed.jsヘアクセスし、ダウンロードします。
そのままダウンロードすると「instafeed.min.js」というファイル名になっています。
FC2ブログはファイル名の中にドットを許可していないので、ファイル名をinstafeed.jsとかそんな感じにリネームします。
管理画面のファイルアップロードからファイルをアップし、アップロードされたURLをメモします。

6.テンプレートなどにコードを書き込み



最後に表示させたい場所にコードを記入します。



<script type="text/javascript" src="【instafeed.jsをアップロードしたURL】"></script>
<script type="text/javascript">
var feed = new Instafeed({
clientId: '【クライアントID】',
get: 'user',
userId: '【ユーザーID】',
accessToken:'【アクセストークン】',
links: 'true' ,//画像リンクを取得
sortBy:'most-recent' ,//最新から取得:そのほか、least-recent: most-liked:most-commentedなど
limit: 8,// 画像取得件数
resolution:'standard_resolution', //取得画像サイズ thumbnail (default) - 150x150 | low_resolution - 306x306 | standard_resolution - 612x612
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>', // 画像URL:{{image}} リンク:{{link}} キャプションテキスト{{caption}} いいね数:{{likes}} コメント数:{{comments}}
success: function(){
}
});
feed.run();
</script>



そして、表示させたいHTML部分に以下。


<ul id="instafeed"></ul>


そのほかのオプションもいろいろあるようです。
http://instafeedjs.com/#templating

私はこれをプラグインの1つとして設定し、サイドバーに表示してみました。
もうちょっと飾り気のある感じにしてみたいと思いますが、とりあえずできてよかったですー!
というかインスタグラム更新していかなければと思います。


にほんブログ村ランキングに参加しています
にほんブログ村 ライフスタイルブログ シンプルライフ(物)へ にほんブログ村 ライフスタイルブログ ミニマリストへ