Instagram Feed - Version 1.3.8

Version Description

  • Fix: If you have uploaded a photo in portrait or landscape then the plugin will now display the square cropped version of the photo in your feed
Download this release

Release Info

Developer smashballoon
Plugin Icon 128x128 Instagram Feed
Version 1.3.8
Comparing to
See all releases

Code changes from version 1.3.7 to 1.3.8

Files changed (6) hide show
  1. README.txt +6 -3
  2. css/sb-instagram-admin.css +4 -0
  3. css/sb-instagram.css +2 -0
  4. instagram-feed-admin.php +136 -11
  5. instagram-feed.php +12 -7
  6. js/sb-instagram.js +245 -174
README.txt CHANGED
@@ -2,8 +2,8 @@
2
  Contributors: smashballoon
3
  Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
  Requires at least: 3.0
5
- Tested up to: 4.3
6
- Stable tag: 1.3.7
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -186,6 +186,9 @@ For more FAQs related to the Instagram Feed plugin please visit the [FAQ section
186
  7. The Instagram Feed plugin Settings pages
187
 
188
  == Changelog ==
 
 
 
189
  = 1.3.7 =
190
  * Fix: Fixed an issue with double quotes in photo captions (used in the photo alt tags) which caused a formatting issue
191
 
@@ -282,7 +285,7 @@ For more FAQs related to the Instagram Feed plugin please visit the [FAQ section
282
  * New: Added a full list of all available shortcode options to help you if customizing multiple Instagram feeds
283
 
284
  = 1.0.2 =
285
- * Fix: Fixed an issue with the Instagram login URL on the Settings page
286
 
287
  = 1.0.1 =
288
  * Fix: Fixed an issue with the Instagram Feed 'Load More' button opening an empty browser window in Firefox
2
  Contributors: smashballoon
3
  Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
  Requires at least: 3.0
5
+ Tested up to: 4.3.1
6
+ Stable tag: 1.3.8
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
186
  7. The Instagram Feed plugin Settings pages
187
 
188
  == Changelog ==
189
+ = 1.3.8 =
190
+ * Fix: If you have uploaded a photo in portrait or landscape then the plugin will now display the square cropped version of the photo in your feed
191
+
192
  = 1.3.7 =
193
  * Fix: Fixed an issue with double quotes in photo captions (used in the photo alt tags) which caused a formatting issue
194
 
285
  * New: Added a full list of all available shortcode options to help you if customizing multiple Instagram feeds
286
 
287
  = 1.0.2 =
288
+ * Fix: Fixed an issue with the Instagram login URL on the plugin's Settings page
289
 
290
  = 1.0.1 =
291
  * Fix: Fixed an issue with the Instagram Feed 'Load More' button opening an empty browser window in Firefox
css/sb-instagram-admin.css CHANGED
@@ -146,6 +146,10 @@
146
  }
147
 
148
  /* Pro only notices */
 
 
 
 
149
  #sbi_admin .sbi_pro,
150
  #sbi_admin .sbi_pro label{
151
  color: #999 !important;
146
  }
147
 
148
  /* Pro only notices */
149
+ #sbi_admin .sbi_row{
150
+ display: block;
151
+ width: 100%;
152
+ }
153
  #sbi_admin .sbi_pro,
154
  #sbi_admin .sbi_pro label{
155
  color: #999 !important;
css/sb-instagram.css CHANGED
@@ -83,6 +83,8 @@
83
  }
84
  #sb_instagram .sbi_photo{
85
  display: block;
 
 
86
  }
87
  #sb_instagram a,
88
  #sb_instagram a:hover,
83
  }
84
  #sb_instagram .sbi_photo{
85
  display: block;
86
+ text-decoration: none;
87
+ height: 200px;
88
  }
89
  #sb_instagram a,
90
  #sb_instagram a:hover,
instagram-feed-admin.php CHANGED
@@ -206,7 +206,10 @@ function sb_instagram_settings_page() {
206
  <h3><?php _e('Configure'); ?></h3>
207
 
208
  <div id="sbi_config">
209
- <a href="https://instagram.com/oauth/authorize/?client_id=97584dabe06548f99b54d318f8db509d&redirect_uri=https://smashballoon.com/instagram-feed/instagram-token-plugin/?return_uri=<?php echo admin_url('admin.php?page=sb-instagram-feed'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID'); ?></a>
 
 
 
210
  </div>
211
 
212
  <tr valign="top">
@@ -236,13 +239,22 @@ function sb_instagram_settings_page() {
236
  <?php _e("<p>Please be sure to enter your numeric <b>User ID</b> and not your Username. You can find your User ID by clicking the blue Instagram Login button above, or by entering your username into <a href='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>.</p>"); ?>
237
  </div>
238
 
239
- <span class="sbi_pro">
240
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
241
  <label class="sbi_radio_label" for="sb_instagram_type_hashtag">Hashtag:</label>
242
  <input readonly type="text" size="25" />
243
  &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Hashtag</a></span>
244
  <p class="sbi_tooltip"><?php _e("Display posts from a specific hashtag instead of from a user"); ?></p>
245
  </span>
 
 
 
 
 
 
 
 
 
246
  <br />
247
  <span class="sbi_note" style="margin: 10px 0 0 0; display: block;"><?php _e('Separate multiple IDs or hashtags using commas'); ?></span>
248
 
@@ -408,18 +420,15 @@ function sb_instagram_settings_page() {
408
  <p class="sbi_tooltip"><?php _e("By default on mobile devices the layout automatically changes to use fewer columns. Checking this setting disables the mobile layout."); ?></p>
409
  </td>
410
  </tr>
411
-
412
- <tr valign="top" class="sbi_pro">
413
- <th scope="row"><label><?php _e('Hide Photos'); ?></label></th>
414
- <td>
415
- <span class="sbi_note"><a href="https://smashballoon.com/instagram-feed/" target="_blank"><?php _e('Upgrade to Pro to enable this feature.'); ?></a></span>
416
- </td>
417
- </tr>
418
  </tbody>
419
  </table>
420
 
421
  <?php submit_button(); ?>
422
 
 
 
 
 
423
  <hr />
424
  <h3><?php _e("Header"); ?></h3>
425
  <table class="form-table">
@@ -522,6 +531,71 @@ function sb_instagram_settings_page() {
522
  </tbody>
523
  </table>
524
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
525
  <hr />
526
  <h3><?php _e('Misc'); ?></h3>
527
 
@@ -591,8 +665,8 @@ function sb_instagram_settings_page() {
591
  <tr class="sbi_table_header"><td colspan=3><?php _e("Configure Options"); ?></td></tr>
592
  <tr class="sbi_pro">
593
  <td>type</td>
594
- <td><?php _e("Display photos from a User ID (user)<br />Display posts from a Hashtag (hashtag)"); ?></td>
595
- <td><code>[instagram-feed type=user]</code><br /><code>[instagram-feed type=hashtag]</code></td>
596
  </tr>
597
  <tr>
598
  <td>id</td>
@@ -604,6 +678,16 @@ function sb_instagram_settings_page() {
604
  <td><?php _e('Any hashtag. Separate multiple IDs by commas.'); ?></td>
605
  <td><code>[instagram-feed hashtag="#awesome"]</code></td>
606
  </tr>
 
 
 
 
 
 
 
 
 
 
607
 
608
  <tr class="sbi_table_header"><td colspan=3><?php _e("Customize Options"); ?></td></tr>
609
  <tr>
@@ -690,6 +774,35 @@ function sb_instagram_settings_page() {
690
  <td><code>[instagram-feed hovertextcolor=#fff]</code></td>
691
  </tr>
692
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
693
  <tr class="sbi_table_header"><td colspan=3><?php _e("Header Options"); ?></td></tr>
694
  <tr>
695
  <td>showheader</td>
@@ -785,6 +898,18 @@ function sb_instagram_settings_page() {
785
  <td><code>[instagram-feed likessize=14]</code></td>
786
  </tr>
787
 
 
 
 
 
 
 
 
 
 
 
 
 
788
  </tbody>
789
  </table>
790
 
206
  <h3><?php _e('Configure'); ?></h3>
207
 
208
  <div id="sbi_config">
209
+ <!-- <a href="https://instagram.com/oauth/authorize/?client_id=97584dabe06548f99b54d318f8db509d&redirect_uri=https://smashballoon.com/instagram-feed/instagram-token-plugin/?return_uri=<?php echo admin_url('admin.php?page=sb-instagram-feed'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID'); ?></a> -->
210
+ <a href="https://instagram.com/oauth/authorize/?client_id=1654d0c81ad04754a898d89315bec227&redirect_uri=https://smashballoon.com/instagram-feed/instagram-token-plugin/?return_uri=<?php echo admin_url('admin.php?page=sb-instagram-feed'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID'); ?></a>
211
+
212
+
213
  </div>
214
 
215
  <tr valign="top">
239
  <?php _e("<p>Please be sure to enter your numeric <b>User ID</b> and not your Username. You can find your User ID by clicking the blue Instagram Login button above, or by entering your username into <a href='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>.</p>"); ?>
240
  </div>
241
 
242
+ <span class="sbi_pro sbi_row">
243
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
244
  <label class="sbi_radio_label" for="sb_instagram_type_hashtag">Hashtag:</label>
245
  <input readonly type="text" size="25" />
246
  &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Hashtag</a></span>
247
  <p class="sbi_tooltip"><?php _e("Display posts from a specific hashtag instead of from a user"); ?></p>
248
  </span>
249
+
250
+ <span class="sbi_pro sbi_row">
251
+ <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_location" value="location" <?php if($sb_instagram_type == "location") echo "checked"; ?> />
252
+ <label class="sbi_radio_label" for="sb_instagram_type_location">Location:</label>
253
+ <input readonly type="text" size="25" />
254
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Location</a></span>
255
+ <p class="sbi_tooltip"><?php _e("Display posts from an Instagram location ID or location coordinates."); ?></p>
256
+ </span>
257
+
258
  <br />
259
  <span class="sbi_note" style="margin: 10px 0 0 0; display: block;"><?php _e('Separate multiple IDs or hashtags using commas'); ?></span>
260
 
420
  <p class="sbi_tooltip"><?php _e("By default on mobile devices the layout automatically changes to use fewer columns. Checking this setting disables the mobile layout."); ?></p>
421
  </td>
422
  </tr>
 
 
 
 
 
 
 
423
  </tbody>
424
  </table>
425
 
426
  <?php submit_button(); ?>
427
 
428
+ <hr />
429
+ <h3><?php _e("Carousel"); ?></h3>
430
+ <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Carousels</a></p>
431
+
432
  <hr />
433
  <h3><?php _e("Header"); ?></h3>
434
  <table class="form-table">
531
  </tbody>
532
  </table>
533
 
534
+
535
+
536
+
537
+ <hr id="filtering" />
538
+ <h3><?php _e('Post Filtering'); ?></h3>
539
+ <table class="form-table">
540
+ <tbody>
541
+ <tr valign="top" class="sbi_pro">
542
+ <th scope="row"><label><?php _e('Remove photos containing these words or hashtags'); ?></label></th>
543
+ <td>
544
+ <input name="sb_instagram_exclude_words" id="sb_instagram_exclude_words" type="text" style="width: 70%;" value="" />
545
+ <br />
546
+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas'); ?></span>
547
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
548
+ <p class="sbi_tooltip"><?php _e("You can use this setting to remove photos which contain certain words or hashtags in the caption. Separate multiple words or hashtags using commas."); ?></p>
549
+ </td>
550
+ </tr>
551
+
552
+ <tr valign="top" class="sbi_pro">
553
+ <th scope="row"><label><?php _e('Show photos containing these words or hashtags'); ?></label></th>
554
+ <td>
555
+ <input name="sb_instagram_include_words" id="sb_instagram_include_words" type="text" style="width: 70%;" value="" />
556
+ <br />
557
+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas'); ?></span>
558
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
559
+ <p class="sbi_tooltip"><?php _e("You can use this setting to only show photos which contain certain words or hashtags in the caption. For example, adding <code>sheep, cow, dog</code> will show any photos which contain either the word sheep, cow, or dog. Separate multiple words or hashtags using commas."); ?></p>
560
+ </td>
561
+ </tr>
562
+ </tbody>
563
+ </table>
564
+ <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Post Filtering options</a></p>
565
+
566
+
567
+ <hr id="moderation" />
568
+ <h3><?php _e('Moderation'); ?></h3>
569
+ <table class="form-table">
570
+ <tbody>
571
+ <tr valign="top" class="sbi_pro">
572
+ <th scope="row"><label><?php _e('Hide specific photos'); ?></label></th>
573
+ <td>
574
+ <textarea name="sb_instagram_hide_photos" id="sb_instagram_hide_photos" style="width: 70%;" rows="3"></textarea>
575
+ <br />
576
+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate IDs using commas'); ?></span>
577
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
578
+ <p class="sbi_tooltip"><?php _e("You can use this setting to hide specific photos in your feed. Just click the 'Hide Photo' link in the photo pop-up in your feed to get the ID of the photo, then copy and paste it into this text box."); ?></p>
579
+ </td>
580
+ </tr>
581
+
582
+ <tr valign="top" class="sbi_pro">
583
+ <th scope="row"><label><?php _e('Block users'); ?></label></th>
584
+ <td>
585
+ <input name="sb_instagram_block_users" id="sb_instagram_block_users" type="text" style="width: 70%;" value="" />
586
+ <br />
587
+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate usernames using commas'); ?></span>
588
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
589
+ <p class="sbi_tooltip"><?php _e("You can use this setting to block photos from certain users in your feed. Just enter the usernames here which you want to block. Separate multiple usernames using commas."); ?></p>
590
+ </td>
591
+ </tr>
592
+
593
+ </tbody>
594
+ </table>
595
+ <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Moderation options</a></p>
596
+
597
+
598
+
599
  <hr />
600
  <h3><?php _e('Misc'); ?></h3>
601
 
665
  <tr class="sbi_table_header"><td colspan=3><?php _e("Configure Options"); ?></td></tr>
666
  <tr class="sbi_pro">
667
  <td>type</td>
668
+ <td><?php _e("Display photos from a User ID (user)<br />Display posts from a Hashtag (hashtag)<br />Display posts from a Location (location)<br />Display posts from Coordinates (coordinates)"); ?></td>
669
+ <td><code>[instagram-feed type=user]</code><br /><code>[instagram-feed type=hashtag]</code><br/><code>[instagram-feed type=location]</code><br /><code>[instagram-feed type=coordinates]</code></td>
670
  </tr>
671
  <tr>
672
  <td>id</td>
678
  <td><?php _e('Any hashtag. Separate multiple IDs by commas.'); ?></td>
679
  <td><code>[instagram-feed hashtag="#awesome"]</code></td>
680
  </tr>
681
+ <tr class="sbi_pro">
682
+ <td>location</td>
683
+ <td><?php _e('The ID of the location. Separate multiple IDs by commas.'); ?></td>
684
+ <td><code>[instagram-feed location="213456451"]</code></td>
685
+ </tr>
686
+ <tr class="sbi_pro">
687
+ <td>coordinates</td>
688
+ <td><?php _e('The coordinates to display photos from. Separate multiple sets of coordinates by commas.<br />The format is (latitude,longitude,distance).'); ?></td>
689
+ <td><code>[instagram-feed coordinates="(25.76,-80.19,500)"]</code></td>
690
+ </tr>
691
 
692
  <tr class="sbi_table_header"><td colspan=3><?php _e("Customize Options"); ?></td></tr>
693
  <tr>
774
  <td><code>[instagram-feed hovertextcolor=#fff]</code></td>
775
  </tr>
776
 
777
+
778
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Carousel Options"); ?></td></tr>
779
+ <tr class="sbi_pro">
780
+ <td>carousel</td>
781
+ <td><?php _e("Display this feed as a carousel"); ?></td>
782
+ <td><code>[instagram-feed carousel=true]</code></td>
783
+ </tr>
784
+ <tr class="sbi_pro">
785
+ <td>carouselarrows</td>
786
+ <td><?php _e("Display directional arrows on the carousel"); ?></td>
787
+ <td><code>[instagram-feed carouselarrows=true]</code></td>
788
+ </tr>
789
+ <tr class="sbi_pro">
790
+ <td>carouselpag</td>
791
+ <td><?php _e("Display pagination links below the carousel"); ?></td>
792
+ <td><code>[instagram-feed carouselpag=true]</code></td>
793
+ </tr>
794
+ <tr class="sbi_pro">
795
+ <td>carouselautoplay</td>
796
+ <td><?php _e("Make the carousel autoplay"); ?></td>
797
+ <td><code>[instagram-feed carouselautoplay=true]</code></td>
798
+ </tr>
799
+ <tr class="sbi_pro">
800
+ <td>carouseltime</td>
801
+ <td><?php _e("The interval time between slides for autoplay. Time in miliseconds."); ?></td>
802
+ <td><code>[instagram-feed carouseltime=8000]</code></td>
803
+ </tr>
804
+
805
+
806
  <tr class="sbi_table_header"><td colspan=3><?php _e("Header Options"); ?></td></tr>
807
  <tr>
808
  <td>showheader</td>
898
  <td><code>[instagram-feed likessize=14]</code></td>
899
  </tr>
900
 
901
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Post Filtering Options"); ?></td></tr>
902
+ <tr class="sbi_pro">
903
+ <td>excludewords</td>
904
+ <td><?php _e("Remove posts which contain certain words or hashtags in the caption."); ?></td>
905
+ <td><code>[instagram-feed excludewords="bad, words"]</code></td>
906
+ </tr>
907
+ <tr class="sbi_pro">
908
+ <td>includewords</td>
909
+ <td><?php _e("Only display posts which contain certain words or hashtags in the caption."); ?></td>
910
+ <td><code>[instagram-feed includewords="sunshine"]</code></td>
911
+ </tr>
912
+
913
  </tbody>
914
  </table>
915
 
instagram-feed.php CHANGED
@@ -3,12 +3,12 @@
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
  Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
- Version: 1.3.7
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
10
 
11
- Copyright 2014 Smash Balloon LLC (email : hey@smashballoon.com)
12
  This program is free software; you can redistribute it and/or modify
13
  it under the terms of the GNU General Public License as published by
14
  the Free Software Foundation; either version 2 of the License, or
@@ -22,7 +22,7 @@ along with this program; if not, write to the Free Software
22
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
23
  */
24
 
25
- define( 'SBIVER', '1.3.7' );
26
 
27
  //Include admin
28
  include dirname( __FILE__ ) .'/instagram-feed-admin.php';
@@ -209,11 +209,15 @@ function sb_instagram_scripts_enqueue() {
209
 
210
  //Options to pass to JS file
211
  $sb_instagram_settings = get_option('sb_instagram_settings');
 
 
 
 
212
  $data = array(
213
- 'sb_instagram_at' => trim($sb_instagram_settings['sb_instagram_at'])
214
  );
215
 
216
- $sb_instagram_ajax_theme = $sb_instagram_settings[ 'sb_instagram_ajax_theme' ];
217
  ( $sb_instagram_ajax_theme == 'on' || $sb_instagram_ajax_theme == 'true' || $sb_instagram_ajax_theme == true ) ? $sb_instagram_ajax_theme = true : $sb_instagram_ajax_theme = false;
218
 
219
  //Enqueue it to load it onto the page
@@ -227,7 +231,8 @@ function sb_instagram_scripts_enqueue() {
227
  add_action( 'wp_head', 'sb_instagram_custom_css' );
228
  function sb_instagram_custom_css() {
229
  $options = get_option('sb_instagram_settings');
230
- $sb_instagram_custom_css = $options[ 'sb_instagram_custom_css' ];
 
231
 
232
  //Show CSS if an admin (so can see Hide Photos link), if including Custom CSS or if hiding some photos
233
  ( current_user_can( 'manage_options' ) || !empty($sb_instagram_custom_css) ) ? $sbi_show_css = true : $sbi_show_css = false;
@@ -256,7 +261,7 @@ function sb_instagram_custom_css() {
256
  add_action( 'wp_footer', 'sb_instagram_custom_js' );
257
  function sb_instagram_custom_js() {
258
  $options = get_option('sb_instagram_settings');
259
- $sb_instagram_custom_js = $options[ 'sb_instagram_custom_js' ];
260
 
261
  if( !empty($sb_instagram_custom_js) ) echo '<!-- Instagram Feed JS -->';
262
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
  Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
+ Version: 1.3.8
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
10
 
11
+ Copyright 2015 Smash Balloon LLC (email : hey@smashballoon.com)
12
  This program is free software; you can redistribute it and/or modify
13
  it under the terms of the GNU General Public License as published by
14
  the Free Software Foundation; either version 2 of the License, or
22
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
23
  */
24
 
25
+ define( 'SBIVER', '1.3.8' );
26
 
27
  //Include admin
28
  include dirname( __FILE__ ) .'/instagram-feed-admin.php';
209
 
210
  //Options to pass to JS file
211
  $sb_instagram_settings = get_option('sb_instagram_settings');
212
+
213
+ //Access token
214
+ isset($sb_instagram_settings[ 'sb_instagram_at' ]) ? $sb_instagram_at = trim($sb_instagram_settings['sb_instagram_at']) : $sb_instagram_at = '';
215
+
216
  $data = array(
217
+ 'sb_instagram_at' => $sb_instagram_at
218
  );
219
 
220
+ isset($sb_instagram_settings[ 'sb_instagram_ajax_theme' ]) ? $sb_instagram_ajax_theme = trim($sb_instagram_settings['sb_instagram_ajax_theme']) : $sb_instagram_ajax_theme = '';
221
  ( $sb_instagram_ajax_theme == 'on' || $sb_instagram_ajax_theme == 'true' || $sb_instagram_ajax_theme == true ) ? $sb_instagram_ajax_theme = true : $sb_instagram_ajax_theme = false;
222
 
223
  //Enqueue it to load it onto the page
231
  add_action( 'wp_head', 'sb_instagram_custom_css' );
232
  function sb_instagram_custom_css() {
233
  $options = get_option('sb_instagram_settings');
234
+
235
+ isset($options[ 'sb_instagram_custom_css' ]) ? $sb_instagram_custom_css = trim($options['sb_instagram_custom_css']) : $sb_instagram_custom_css = '';
236
 
237
  //Show CSS if an admin (so can see Hide Photos link), if including Custom CSS or if hiding some photos
238
  ( current_user_can( 'manage_options' ) || !empty($sb_instagram_custom_css) ) ? $sbi_show_css = true : $sbi_show_css = false;
261
  add_action( 'wp_footer', 'sb_instagram_custom_js' );
262
  function sb_instagram_custom_js() {
263
  $options = get_option('sb_instagram_settings');
264
+ isset($options[ 'sb_instagram_custom_js' ]) ? $sb_instagram_custom_js = trim($options['sb_instagram_custom_js']) : $sb_instagram_custom_js = '';
265
 
266
  if( !empty($sb_instagram_custom_js) ) echo '<!-- Instagram Feed JS -->';
267
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
js/sb-instagram.js CHANGED
@@ -1,4 +1,5 @@
1
- (function($){
 
2
 
3
  (function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),f.src=u,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);this.options.target.append(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.instagramfeed=e}).call(this);
4
 
@@ -8,201 +9,271 @@
8
  //IE8 also doesn't offer the .bind() method triggered by the 'sortBy' property. Copy and paste the polyfill offered here:
9
  if(!Function.prototype.bind){Function.prototype.bind=function(e){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var t=Array.prototype.slice.call(arguments,1),n=this,r=function(){},i=function(){return n.apply(this instanceof r&&e?this:e,t.concat(Array.prototype.slice.call(arguments)))};r.prototype=this.prototype;i.prototype=new r;return i}}
10
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
 
12
- })(jQuery);
13
-
14
- function sbi_init(){
15
-
16
- jQuery('#sb_instagram.sbi').each(function(){
17
-
18
- var $self = jQuery(this),
19
- $target = $self.find('#sbi_images'),
20
- $loadBtn = $self.find("#sbi_load .sbi_load_btn"),
21
- imgRes = 'standard_resolution',
22
- cols = parseInt( this.getAttribute('data-cols'), 10 ),
23
- num = this.getAttribute('data-num'),
24
- //Convert styles JSON string to an object
25
- feedOptions = JSON.parse( this.getAttribute('data-options') ),
26
- getType = 'user',
27
- sortby = 'none',
28
- user_id = this.getAttribute('data-id'),
29
- num = this.getAttribute('data-num'),
30
- posts_arr = [],
31
- $header = '',
32
- morePosts = []; //Used to determine whether to show the Load More button when displaying posts from more than one id/hashtag. If one of the ids/hashtags has more posts then still show button.
33
-
34
- if( feedOptions.sortby !== '' ) sortby = feedOptions.sortby;
35
-
36
- switch( this.getAttribute('data-res') ) {
37
- case 'auto':
38
- var feedWidth = jQuery('#sb_instagram').innerWidth(),
39
- colWidth = jQuery('#sb_instagram').innerWidth() / cols;
40
-
41
- if( feedWidth < 680 ) colWidth = 300; //Use 306x306 images
42
- if( feedWidth < 480 && feedWidth > 300 ) colWidth = 480; //Use full size images
43
 
44
- if( colWidth < 150 ){
 
45
  imgRes = 'thumbnail';
46
- } else if( colWidth < 306 ){
 
47
  imgRes = 'low_resolution';
48
- } else {
 
49
  imgRes = 'standard_resolution';
50
- }
51
-
52
- break;
53
- case 'thumb':
54
- imgRes = 'thumbnail';
55
- break;
56
- case 'medium':
57
- imgRes = 'low_resolution';
58
- break;
59
- default:
60
- imgRes = 'standard_resolution';
61
- }
62
-
63
- //Split comma separated hashtags into array
64
- var ids_arr = user_id.replace(/ /g,'').split(",");
65
- var looparray = ids_arr;
66
-
67
- //Get page info for first User ID
68
- var headerStyles = '',
69
- sbi_page_url = 'https://api.instagram.com/v1/users/' + ids_arr[0] + '?access_token=' + sb_instagram_js_options.sb_instagram_at;
70
-
71
- if(feedOptions.headercolor.length) headerStyles = 'style="color: #'+feedOptions.headercolor+'"';
72
-
73
- jQuery.ajax({
74
- method: "GET",
75
- url: sbi_page_url,
76
- dataType: "jsonp",
77
- success: function(data) {
78
- $header = '<a href="http://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link">';
79
- $header += '<div class="sbi_header_text">';
80
- $header += '<h3 ' + headerStyles;
81
- if( data.data.bio.length == 0 ) $header += ' class="sbi_no_bio"';
82
- $header += '>@'+data.data.username+'</h3>';
83
- if( data.data.bio.length ) $header += '<p class="sbi_bio" '+headerStyles+'>'+data.data.bio+'</p>';
84
- $header += '</div>';
85
- $header += '<div class="sbi_header_img">';
86
- $header += '<div class="sbi_header_img_hover"><i class="fa fa-instagram"></i></div>';
87
- $header += '<img src="'+data.data.profile_picture+'" alt="'+data.data.full_name+'" width="50" height="50">';
88
- $header += '</div>';
89
- $header += '</a>';
90
- //Add the header
91
- $self.find('.sb_instagram_header').prepend( $header );
92
- //Change the URL of the follow button
93
- if( $self.find('.sbi_follow_btn').length ) $self.find('.sbi_follow_btn a').attr('href', 'http://instagram.com/' + data.data.username )
94
  }
95
- });
96
-
97
- //Loop through User IDs
98
- // looparray.forEach(function(entry) {
99
- jQuery.each( looparray, function( index, entry ) {
100
-
101
- var userFeed = new instagramfeed({
102
- target: $target,
103
- get: getType,
104
- sortBy: sortby,
105
- resolution: imgRes,
106
- limit: parseInt( num, 10 ),
107
- template: '<div class="sbi_item sbi_type_{{model.type}} sbi_new" id="sbi_{{id}}" data-date="{{model.created_time_raw}}"><div class="sbi_photo_wrap"><a class="sbi_photo" href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}" /></a></div></div>',
108
- filter: function(image) {
109
- //Create time for sorting
110
- var date = new Date(image.created_time*1000),
111
- time = date.getTime();
112
- image.created_time_raw = time;
113
-
114
- //Replace double quotes in the captions with the HTML symbol
115
- //Always check to make sure it exists
116
- if(image.caption != null) image.caption.text = image.caption.text.replace(/"/g, "&quot;");
117
-
118
- return true;
119
- },
120
- userId: parseInt( entry, 10 ),
121
- accessToken: sb_instagram_js_options.sb_instagram_at,
122
- after: function() {
123
-
124
- $self.find('.sbi_loader').remove();
125
-
126
- /* Load more button */
127
- if (this.hasNext()) morePosts.push('1');
128
-
129
- if(morePosts.length > 0){
130
- $loadBtn.show();
131
- } else {
132
- $loadBtn.hide();
133
- $self.css('padding-bottom', 0);
134
- }
135
-
136
- // Call Custom JS if it exists
137
- if (typeof sbi_custom_js == 'function') sbi_custom_js();
138
 
139
- //Fade photos on hover
140
- jQuery('#sb_instagram .sbi_photo').each(function(){
141
- jQuery(this).hover(function(){
142
- jQuery(this).fadeTo(200, 0.85);
143
- }, function(){
144
- jQuery(this).stop().fadeTo(500, 1);
145
- });
146
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
147
 
148
- //Only show images once they are fully loaded. Prevents issue in Firefox where alt text is shown initially before images appear.
149
- // jQuery('#sb_instagram .sbi_new img').on('load', function() {
150
- // jQuery(this).removeClass('sbi_hide');
151
- // });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
 
153
 
154
- //Sort posts by date
155
- //only sort the new posts that are loaded in, not the whole feed, otherwise some photos will switch positions due to dates
156
- $self.find('#sbi_images .sbi_item.sbi_new').sort(function (a, b) {
157
- var aComp = jQuery(a).data('date'),
158
- bComp = jQuery(b).data('date');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
159
 
160
- if(sortby == 'none'){
161
- //Order by date
162
- return bComp - aComp;
163
- } else {
164
- //Randomize
165
- return (Math.round(Math.random())-0.5);
166
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
 
168
- }).appendTo( $self.find("#sbi_images") );
 
 
 
 
 
 
 
 
 
169
 
170
- //Remove the new class after 500ms, once the sorting is done
171
- setTimeout(function(){
172
- jQuery('#sbi_images .sbi_item.sbi_new').removeClass('sbi_new');
173
- //Reset the morePosts variable so we can check whether there are more posts every time the Load More button is clicked
174
- morePosts = [];
175
- }, 500);
176
 
 
 
 
 
 
 
 
 
177
 
178
- }, // End 'after' function
179
- error: function(data) {
180
- var sbiErrorMsg = '',
181
- sbiErrorDir = '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
 
183
- if( data.indexOf('access_token') > -1 ){
184
- sbiErrorMsg += '<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';
185
- sbiErrorDir = "<p>There's an issue with the Instagram Access Token that you are using. Please obtain a new Access Token on the plugin's Settings page.";
186
- } else if( data.indexOf('user does not exist') > -1 ){
187
- sbiErrorMsg += '<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';
188
- sbiErrorDir = "<p>Please double check the Instagram User ID that you are using. To find your User ID simply enter your Instagram user name into this <a href='http://www.otzberg.net/iguserid/' target='_blank'>tool</a>.</p>";
189
  }
 
190
 
191
- //Add the error message to the page unless the user is displaying multiple ids or hashtags
192
- if(looparray.length < 2) jQuery('#sb_instagram').empty().append( '<p style="text-align: center;">Unable to show Instagram photos</p><div id="sbi_mod_error">' + sbiErrorMsg + sbiErrorDir + '</div>');
193
- }
194
- });
195
 
196
- $loadBtn.click(function() {
197
- userFeed.next();
198
- });
199
 
200
- userFeed.run();
 
 
 
201
 
202
- }); //End User ID array loop
203
 
204
-
 
205
  });
206
 
207
- }
208
- sbi_init();
1
+ var sbi_js_exists = (typeof sbi_js_exists !== 'undefined') ? true : false;
2
+ if(!sbi_js_exists){
3
 
4
  (function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),f.src=u,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);this.options.target.append(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.instagramfeed=e}).call(this);
5
 
9
  //IE8 also doesn't offer the .bind() method triggered by the 'sortBy' property. Copy and paste the polyfill offered here:
10
  if(!Function.prototype.bind){Function.prototype.bind=function(e){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var t=Array.prototype.slice.call(arguments,1),n=this,r=function(){},i=function(){return n.apply(this instanceof r&&e?this:e,t.concat(Array.prototype.slice.call(arguments)))};r.prototype=this.prototype;i.prototype=new r;return i}}
11
 
12
+ /*! imgLiquid v0.9.944 / 03-05-2013 https://github.com/karacas/imgLiquid */
13
+ var imgLiquid=imgLiquid||{VER:"0.9.944"};imgLiquid.bgs_Available=!1,imgLiquid.bgs_CheckRunned=!1,imgLiquid.injectCss=".sbi_photo img {visibility:hidden}",function(i){function t(){if(!imgLiquid.bgs_CheckRunned){imgLiquid.bgs_CheckRunned=!0;var t=i('<span style="background-size:cover" />');i("body").append(t),!function(){var i=t[0];if(i&&window.getComputedStyle){var e=window.getComputedStyle(i,null);e&&e.backgroundSize&&(imgLiquid.bgs_Available="cover"===e.backgroundSize)}}(),t.remove()}}i.fn.extend({imgLiquid:function(e){this.defaults={fill:!0,verticalAlign:"center",horizontalAlign:"center",useBackgroundSize:!0,useDataHtmlAttr:!0,responsive:!0,delay:0,fadeInTime:0,removeBoxBackground:!0,hardPixels:!0,responsiveCheckTime:500,timecheckvisibility:500,onStart:null,onFinish:null,onItemStart:null,onItemFinish:null,onItemError:null},t();var a=this;return this.options=e,this.settings=i.extend({},this.defaults,this.options),this.settings.onStart&&this.settings.onStart(),this.each(function(t){function e(){-1===u.css("background-image").indexOf(encodeURI(c.attr("src")))&&u.css({"background-image":'url("'+encodeURI(c.attr("src"))+'")'}),u.css({"background-size":g.fill?"cover":"contain","background-position":(g.horizontalAlign+" "+g.verticalAlign).toLowerCase(),"background-repeat":"no-repeat"}),i("a:first",u).css({display:"block",width:"100%",height:"100%"}),i("img",u).css({display:"none"}),g.onItemFinish&&g.onItemFinish(t,u,c),u.addClass("imgLiquid_bgSize"),u.addClass("imgLiquid_ready"),l()}function o(){function e(){c.data("imgLiquid_error")||c.data("imgLiquid_loaded")||c.data("imgLiquid_oldProcessed")||(u.is(":visible")&&c[0].complete&&c[0].width>0&&c[0].height>0?(c.data("imgLiquid_loaded",!0),setTimeout(r,t*g.delay)):setTimeout(e,g.timecheckvisibility))}if(c.data("oldSrc")&&c.data("oldSrc")!==c.attr("src")){var a=c.clone().removeAttr("style");return a.data("imgLiquid_settings",c.data("imgLiquid_settings")),c.parent().prepend(a),c.remove(),c=a,c[0].width=0,void setTimeout(o,10)}return c.data("imgLiquid_oldProcessed")?void r():(c.data("imgLiquid_oldProcessed",!1),c.data("oldSrc",c.attr("src")),i("img:not(:first)",u).css("display","none"),u.css({overflow:"hidden"}),c.fadeTo(0,0).removeAttr("width").removeAttr("height").css({visibility:"visible","max-width":"none","max-height":"none",width:"auto",height:"auto",display:"block"}),c.on("error",n),c[0].onerror=n,e(),void d())}function d(){(g.responsive||c.data("imgLiquid_oldProcessed"))&&c.data("imgLiquid_settings")&&(g=c.data("imgLiquid_settings"),u.actualSize=u.get(0).offsetWidth+u.get(0).offsetHeight/1e4,u.sizeOld&&u.actualSize!==u.sizeOld&&r(),u.sizeOld=u.actualSize,setTimeout(d,g.responsiveCheckTime))}function n(){c.data("imgLiquid_error",!0),u.addClass("imgLiquid_error"),g.onItemError&&g.onItemError(t,u,c),l()}function s(){var i={};if(a.settings.useDataHtmlAttr){var t=u.attr("data-imgLiquid-fill"),e=u.attr("data-imgLiquid-horizontalAlign"),o=u.attr("data-imgLiquid-verticalAlign");("true"===t||"false"===t)&&(i.fill=Boolean("true"===t)),void 0===e||"left"!==e&&"center"!==e&&"right"!==e&&-1===e.indexOf("%")||(i.horizontalAlign=e),void 0===o||"top"!==o&&"bottom"!==o&&"center"!==o&&-1===o.indexOf("%")||(i.verticalAlign=o)}return imgLiquid.isIE&&a.settings.ieFadeInDisabled&&(i.fadeInTime=0),i}function r(){var i,e,a,o,d,n,s,r,m=0,h=0,f=u.width(),v=u.height();void 0===c.data("owidth")&&c.data("owidth",c[0].width),void 0===c.data("oheight")&&c.data("oheight",c[0].height),g.fill===f/v>=c.data("owidth")/c.data("oheight")?(i="100%",e="auto",a=Math.floor(f),o=Math.floor(f*(c.data("oheight")/c.data("owidth")))):(i="auto",e="100%",a=Math.floor(v*(c.data("owidth")/c.data("oheight"))),o=Math.floor(v)),d=g.horizontalAlign.toLowerCase(),s=f-a,"left"===d&&(h=0),"center"===d&&(h=.5*s),"right"===d&&(h=s),-1!==d.indexOf("%")&&(d=parseInt(d.replace("%",""),10),d>0&&(h=s*d*.01)),n=g.verticalAlign.toLowerCase(),r=v-o,"left"===n&&(m=0),"center"===n&&(m=.5*r),"bottom"===n&&(m=r),-1!==n.indexOf("%")&&(n=parseInt(n.replace("%",""),10),n>0&&(m=r*n*.01)),g.hardPixels&&(i=a,e=o),c.css({width:i,height:e,"margin-left":Math.floor(h),"margin-top":Math.floor(m)}),c.data("imgLiquid_oldProcessed")||(c.fadeTo(g.fadeInTime,1),c.data("imgLiquid_oldProcessed",!0),g.removeBoxBackground&&u.css("background-image","none"),u.addClass("imgLiquid_nobgSize"),u.addClass("imgLiquid_ready")),g.onItemFinish&&g.onItemFinish(t,u,c),l()}function l(){t===a.length-1&&a.settings.onFinish&&a.settings.onFinish()}var g=a.settings,u=i(this),c=i("img:first",u);return c.length?(c.data("imgLiquid_settings")?(u.removeClass("imgLiquid_error").removeClass("imgLiquid_ready"),g=i.extend({},c.data("imgLiquid_settings"),a.options)):g=i.extend({},a.settings,s()),c.data("imgLiquid_settings",g),g.onItemStart&&g.onItemStart(t,u,c),void(imgLiquid.bgs_Available&&g.useBackgroundSize?e():o())):void n()})}})}(jQuery);
14
+
15
+
16
+ function sbi_init(){
17
+
18
+ jQuery('#sb_instagram.sbi').each(function(){
19
+
20
+ var $self = jQuery(this),
21
+ $target = $self.find('#sbi_images'),
22
+ $loadBtn = $self.find("#sbi_load .sbi_load_btn"),
23
+ imgRes = 'standard_resolution',
24
+ cols = parseInt( this.getAttribute('data-cols'), 10 ),
25
+ num = this.getAttribute('data-num'),
26
+ //Convert styles JSON string to an object
27
+ feedOptions = JSON.parse( this.getAttribute('data-options') ),
28
+ getType = 'user',
29
+ sortby = 'none',
30
+ user_id = this.getAttribute('data-id'),
31
+ num = this.getAttribute('data-num'),
32
+ posts_arr = [],
33
+ $header = '',
34
+ morePosts = []; //Used to determine whether to show the Load More button when displaying posts from more than one id/hashtag. If one of the ids/hashtags has more posts then still show button.
35
+
36
+ if( feedOptions.sortby !== '' ) sortby = feedOptions.sortby;
37
+
38
+ switch( this.getAttribute('data-res') ) {
39
+ case 'auto':
40
+ var feedWidth = $self.innerWidth(),
41
+ colWidth = $self.innerWidth() / cols;
42
+
43
+ //Check if page width is less than 640. If it is then use the script above
44
+ var sbiWindowWidth = jQuery(window).width();
45
+ if( sbiWindowWidth < 640 ){
46
+ //Need this for mobile so that image res is right on mobile, as the number of cols isn't always accurate on mobile as they are changed using CSS
47
+ if( feedWidth < 640 && $self.is('.sbi_col_3, .sbi_col_4, .sbi_col_5, .sbi_col_6') ) colWidth = 300; //Use medium images
48
+ if( feedWidth < 640 && $self.is('.sbi_col_7, .sbi_col_8, .sbi_col_9, .sbi_col_10') ) colWidth = 100; //Use thumbnail images
49
+ if( (feedWidth > 320 && feedWidth < 480) && sbiWindowWidth < 480 ) colWidth = 480; //Use full size images
50
+ if( feedWidth < 320 && sbiWindowWidth < 480 ) colWidth = 300; //Use medium size images
51
+ }
52
 
53
+ if( colWidth < 150 ){
54
+ imgRes = 'thumbnail';
55
+ } else if( colWidth < 320 ){
56
+ imgRes = 'low_resolution';
57
+ } else {
58
+ imgRes = 'standard_resolution';
59
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
 
61
+ break;
62
+ case 'thumb':
63
  imgRes = 'thumbnail';
64
+ break;
65
+ case 'medium':
66
  imgRes = 'low_resolution';
67
+ break;
68
+ default:
69
  imgRes = 'standard_resolution';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
 
72
+ //Split comma separated hashtags into array
73
+ var ids_arr = user_id.replace(/ /g,'').split(",");
74
+ var looparray = ids_arr;
75
+
76
+ //Get page info for first User ID
77
+ var headerStyles = '',
78
+ sbi_page_url = 'https://api.instagram.com/v1/users/' + ids_arr[0] + '?access_token=' + sb_instagram_js_options.sb_instagram_at;
79
+
80
+ if(feedOptions.headercolor.length) headerStyles = 'style="color: #'+feedOptions.headercolor+'"';
81
+
82
+ jQuery.ajax({
83
+ method: "GET",
84
+ url: sbi_page_url,
85
+ dataType: "jsonp",
86
+ success: function(data) {
87
+ $header = '<a href="http://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link">';
88
+ $header += '<div class="sbi_header_text">';
89
+ $header += '<h3 ' + headerStyles;
90
+ if( data.data.bio.length == 0 ) $header += ' class="sbi_no_bio"';
91
+ $header += '>@'+data.data.username+'</h3>';
92
+ if( data.data.bio.length ) $header += '<p class="sbi_bio" '+headerStyles+'>'+data.data.bio+'</p>';
93
+ $header += '</div>';
94
+ $header += '<div class="sbi_header_img">';
95
+ $header += '<div class="sbi_header_img_hover"><i class="fa fa-instagram"></i></div>';
96
+ $header += '<img src="'+data.data.profile_picture+'" alt="'+data.data.full_name+'" width="50" height="50">';
97
+ $header += '</div>';
98
+ $header += '</a>';
99
+ //Add the header
100
+ $self.find('.sb_instagram_header').prepend( $header );
101
+ //Change the URL of the follow button
102
+ if( $self.find('.sbi_follow_btn').length ) $self.find('.sbi_follow_btn a').attr('href', 'http://instagram.com/' + data.data.username )
103
+ }
104
+ });
105
 
106
+ //Loop through User IDs
107
+ jQuery.each( looparray, function( index, entry ) {
108
+
109
+ var userFeed = new instagramfeed({
110
+ target: $target,
111
+ get: getType,
112
+ sortBy: sortby,
113
+ resolution: imgRes,
114
+ limit: parseInt( num, 10 ),
115
+ template: '<div class="sbi_item sbi_type_{{model.type}} sbi_new" id="sbi_{{id}}" data-date="{{model.created_time_raw}}"><div class="sbi_photo_wrap"><a class="sbi_photo" href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}" /></a></div></div>',
116
+ filter: function(image) {
117
+ //Create time for sorting
118
+ var date = new Date(image.created_time*1000),
119
+ time = date.getTime();
120
+ image.created_time_raw = time;
121
+
122
+ //Replace double quotes in the captions with the HTML symbol
123
+ //Always check to make sure it exists
124
+ if(image.caption != null) image.caption.text = image.caption.text.replace(/"/g, "&quot;");
125
+
126
+ return true;
127
+ },
128
+ userId: parseInt( entry, 10 ),
129
+ accessToken: sb_instagram_js_options.sb_instagram_at,
130
+ after: function() {
131
+
132
+ $self.find('.sbi_loader').remove();
133
+
134
+ /* Load more button */
135
+ if (this.hasNext()) morePosts.push('1');
136
+
137
+ if(morePosts.length > 0){
138
+ $loadBtn.show();
139
+ } else {
140
+ $loadBtn.hide();
141
+ $self.css('padding-bottom', 0);
142
+ }
143
 
144
 
145
+ // Call Custom JS if it exists
146
+ if (typeof sbi_custom_js == 'function') setTimeout(function(){ sbi_custom_js(); }, 100);
147
+
148
+
149
+ // Use imagefill to set the images as backgrounds so they can be square
150
+ !function () {
151
+ var css = imgLiquid.injectCss,
152
+ head = document.getElementsByTagName('head')[0],
153
+ style = document.createElement('style');
154
+ style.type = 'text/css';
155
+ if (style.styleSheet) {
156
+ style.styleSheet.cssText = css;
157
+ } else {
158
+ style.appendChild(document.createTextNode(css));
159
+ }
160
+ head.appendChild(style);
161
+ }();
162
+ $self.find(".sbi_photo").imgLiquid({fill:true});
163
+
164
+ //Only check the width once the resize event is over
165
+ var sbi_delay = (function(){
166
+ var sbi_timer = 0;
167
+ return function(sbi_callback, sbi_ms){
168
+ clearTimeout (sbi_timer);
169
+ sbi_timer = setTimeout(sbi_callback, sbi_ms);
170
+ };
171
+ })();
172
+ window.addEventListener('resize', function(event){
173
+ sbi_delay(function(){
174
+ sbiSetPhotoHeight();
175
+ }, 500);
176
+ });
177
 
178
+ //Resize image height
179
+ function sbiSetPhotoHeight(){
180
+ var sbi_photo_width = $self.find('.sbi_photo').eq(0).innerWidth();
181
+ $self.find('.sbi_photo').css('height', sbi_photo_width);
 
 
182
  }
183
+ sbiSetPhotoHeight();
184
+
185
+ //Only check the width once the resize event is over
186
+ var sbidelay = (function(){
187
+ var sbitimer = 0;
188
+ return function(sbicallback, sbims){
189
+ clearTimeout (sbitimer);
190
+ sbitimer = setTimeout(sbicallback, sbims);
191
+ };
192
+ })();
193
+ jQuery(window).resize(function() {
194
+ sbidelay(function(){
195
+ sbiGetItemSize();
196
+ }, 500);
197
+ });
198
 
199
+ function sbiGetItemSize(){
200
+ $self.removeClass('sbi_small sbi_medium');
201
+ var sbiItemWidth = $self.find('.sbi_item').innerWidth();
202
+ if( sbiItemWidth > 120 && sbiItemWidth < 240 ){
203
+ $self.addClass('sbi_medium');
204
+ } else if( sbiItemWidth <= 120 ){
205
+ $self.addClass('sbi_small');
206
+ }
207
+ }
208
+ sbiGetItemSize();
209
 
 
 
 
 
 
 
210
 
211
+ //Fade photos on hover
212
+ jQuery('#sb_instagram .sbi_photo').each(function(){
213
+ jQuery(this).hover(function(){
214
+ jQuery(this).fadeTo(200, 0.85);
215
+ }, function(){
216
+ jQuery(this).stop().fadeTo(500, 1);
217
+ });
218
+ });
219
 
220
+ //Sort posts by date
221
+ //only sort the new posts that are loaded in, not the whole feed, otherwise some photos will switch positions due to dates
222
+ $self.find('#sbi_images .sbi_item.sbi_new').sort(function (a, b) {
223
+ var aComp = jQuery(a).data('date'),
224
+ bComp = jQuery(b).data('date');
225
+
226
+ if(sortby == 'none'){
227
+ //Order by date
228
+ return bComp - aComp;
229
+ } else {
230
+ //Randomize
231
+ return (Math.round(Math.random())-0.5);
232
+ }
233
+
234
+ }).appendTo( $self.find("#sbi_images") );
235
+
236
+ //Remove the new class after 500ms, once the sorting is done
237
+ setTimeout(function(){
238
+ jQuery('#sbi_images .sbi_item.sbi_new').removeClass('sbi_new');
239
+ //Reset the morePosts variable so we can check whether there are more posts every time the Load More button is clicked
240
+ morePosts = [];
241
+ }, 500);
242
+
243
+
244
+ }, // End 'after' function
245
+ error: function(data) {
246
+ var sbiErrorMsg = '',
247
+ sbiErrorDir = '';
248
+
249
+ if( data.indexOf('access_token') > -1 ){
250
+ sbiErrorMsg += '<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';
251
+ sbiErrorDir = "<p>There's an issue with the Instagram Access Token that you are using. Please obtain a new Access Token on the plugin's Settings page.";
252
+ } else if( data.indexOf('user does not exist') > -1 ){
253
+ sbiErrorMsg += '<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';
254
+ sbiErrorDir = "<p>Please double check the Instagram User ID that you are using. To find your User ID simply enter your Instagram user name into this <a href='http://www.otzberg.net/iguserid/' target='_blank'>tool</a>.</p>";
255
+ }
256
 
257
+ //Add the error message to the page unless the user is displaying multiple ids or hashtags
258
+ if(looparray.length < 2) jQuery('#sb_instagram').empty().append( '<p style="text-align: center;">Unable to show Instagram photos</p><div id="sbi_mod_error">' + sbiErrorMsg + sbiErrorDir + '</div>');
 
 
 
 
259
  }
260
+ });
261
 
262
+ $loadBtn.click(function() {
263
+ userFeed.next();
264
+ });
 
265
 
266
+ userFeed.run();
 
 
267
 
268
+ }); //End User ID array loop
269
+
270
+
271
+ });
272
 
273
+ }
274
 
275
+ jQuery( document ).ready(function() {
276
+ sbi_init();
277
  });
278
 
279
+ } // end sbi_js_exists check