InstagramのソーシャルプラグインをRailsで

FacebookやTwitterのソーシャルプラグインは有名ですが、意外と日本語の情報がないのがInstagramじゃないでしょうか？Instagramのデベロッパーサイトにも書いておらず、Wordpressのプラグイン情報とかばかり。

しかし実は他のプラグイン同様簡単に貼り付けできます。
普通の設置方法と比較する形でRails-slimでの設定方法を記載します。

詳細はこちらに載っています。
https://www.jqueryscript.net/social-media/Instagram-Photos-Without-API-instagramFeed.html

JQuery Instagramのプラグインをダウンロード

https://www.jqueryscript.net/download/Instagram-Photos-Without-API-instagramFeed.zip
を vendor/assets/javascripts/ 配下に展開します。必要なのは jquery.instagramFeed.js です。

config/initializers/assets.rb に以下の行を追加

Rails.application.config.assets.precompile += %w( jquery.instagramFeed.js )

プラグインを貼りたい場所に以下のタグを貼ります

html

<div id="instagram-feed-demo" class="instagram_feed"></div>

Slimなら

slim

  .instagram_feed#instagram-feed-demo

となります。

JSを読み込ませます

html

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="jquery.instagramFeed.js"></script>

Slimなら

slim

= javascript_include_tag "//code.jquery.com/jquery-3.3.1.min.js"
= javascript_include_tag "jquery.instagramFeed.js"

ですが、JQueryは2重に読み込むと不具合を引き起こすので他で使っていないかを確認してcode.jquery.com/jquery-3.3.1.min.jsの行は追加するかを決めてください。

プラグインの動作設定のJQueryを書きます

上記のhtmlファイルに直接貼るなら

html

<script>
$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_profile': true,
    'display_biography': true,
    'items': 8,
    'items_per_row': 4,
    'margin': 0.5
  });
});
</script>

usernameはInstagramのユーザ名です。containerは2.のIDと合わせます。
display_profile:プロフィール表示非表示
display_biography:バイオの表示非表示
items:表示する画像数
items_per_row:1行の表示画像数
margin:表示している画像同士のマージン
独自のStyleを適用することも可能です。
'styling': false
をリストに追加して、cssに

css

.instagram_profile {
  /* CSS styles here */
}

.instagram_profile_image {
  /* CSS styles here */
}

.instagram_username {
  /* CSS styles here */
}

.instagram_biography {
  /* CSS styles here */
}

.instagram_gallery {
  /* CSS styles here */
}

でスタイルを入れます。

Slimなら

slim

  javascript:
    $(window).on('load', function(){ $.instagramFeed({ 'username': 'vegewel', 'container': "#instagram-feed", 'display_profile': true, 'display_biography': true, 'styling': true }); });

と言った書き方

こうして貼ったプラグインはこちらです。