Instagram Feed - Version 1.5

Version Description

  • New: Improved tool for retrieving Instagram Access Tokens
  • New: Added an option to show/hide Instagram bio text in feed header
  • New: Feeds that include IDs from "private" Instagram accounts will now ignore the private data and display a message to logged-in site admins which indicates that one of the Instagram accounts is private
  • New: Feeds without any Instagram posts yet will display a message informing logged-in admins to make a post on Instagram in order to view the feed
  • New: Added translation files for French (fr_FR), German (de_DE), English (en_EN), Spanish (es_ES), Italian (it_IT), and Russian (ru_RU) to translate "Load More..." and "Follow on Instagram"
  • Tweak: Optimized several images used in the Instagram feed including loader.png
  • Tweak: Font Awesome stylesheet handle has been renamed so it will only be loaded once if our Custom Facebook Feed plugin is also active
  • Fix: Updated the Font Awesome icon font to the latest version: 4.7.0
  • Fix: Padding removed from "Load More" button if no buttons are being used in the Instagram feed
  • Fix: All links in the feed are now https
  • Fix: Fixed JavaScript errors which were being caused if the Instagram Access Token had expired or the user ID was incorrect, private, or had no Instagram posts
Download this release

Release Info

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

Code changes from version 1.4.9 to 1.5

Files changed (17) hide show
  1. README.txt +17 -4
  2. css/sb-instagram-admin.css +153 -0
  3. img/instagram-pro-promo.png +0 -0
  4. img/loader.png +0 -0
  5. img/sbi-icon.png +0 -0
  6. img/small-logo.png +0 -0
  7. instagram-feed-admin.php +671 -227
  8. instagram-feed.php +48 -14
  9. js/sb-instagram-admin.js +46 -11
  10. js/sb-instagram.js +58 -29
  11. js/sb-instagram.min.js +12 -13
  12. languages/instagram-feed-de_DE.mo +0 -0
  13. languages/instagram-feed-en.mo +0 -0
  14. languages/instagram-feed-es_ES.mo +0 -0
  15. languages/instagram-feed-fr_FR.mo +0 -0
  16. languages/instagram-feed-it_IT.mo +0 -0
  17. languages/instagram-feed-ru_RU.mo +0 -0
README.txt CHANGED
@@ -1,9 +1,9 @@
1
  === Instagram Feed ===
2
- Contributors: smashballoon
3
  Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
  Requires at least: 3.0
5
- Tested up to: 4.8
6
- Stable tag: 1.4.9
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -140,7 +140,7 @@ Yep. You can display multiple Instagram feeds by using our built-in shortcode op
140
 
141
  Yep. You can just separate the IDs by commas, either in the User ID(s) field on the plugin's Settings page, or directly in the shortcode like so: `[instagram-feed id="12986477,13460080"]`.
142
 
143
- = How do I find my Instagram Access Token and User ID =
144
 
145
  We've made it super easy. Simply click on the big blue button on the Instagram Feed Settings page and log into your Instagram account. The plugin will then retrieve and display both your Access Token and User ID from Instagram.
146
 
@@ -312,6 +312,19 @@ We understand that sometimes you need help, have issues or just have questions.
312
 
313
  == Changelog ==
314
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  = 1.4.9 =
316
  * Compatible with WordPress 4.8
317
 
1
  === Instagram Feed ===
2
+ Contributors: smashballoon, craig-at-smash-balloon
3
  Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
  Requires at least: 3.0
5
+ Tested up to: 4.9
6
+ Stable tag: 1.5.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
140
 
141
  Yep. You can just separate the IDs by commas, either in the User ID(s) field on the plugin's Settings page, or directly in the shortcode like so: `[instagram-feed id="12986477,13460080"]`.
142
 
143
+ = How do I find my Instagram Access Token and Instagram User ID =
144
 
145
  We've made it super easy. Simply click on the big blue button on the Instagram Feed Settings page and log into your Instagram account. The plugin will then retrieve and display both your Access Token and User ID from Instagram.
146
 
312
 
313
  == Changelog ==
314
 
315
+ = 1.5 =
316
+ * New: Improved tool for retrieving Instagram Access Tokens
317
+ * New: Added an option to show/hide Instagram bio text in feed header
318
+ * New: Feeds that include IDs from "private" Instagram accounts will now ignore the private data and display a message to logged-in site admins which indicates that one of the Instagram accounts is private
319
+ * New: Feeds without any Instagram posts yet will display a message informing logged-in admins to make a post on Instagram in order to view the feed
320
+ * New: Added translation files for French (fr_FR), German (de_DE), English (en_EN), Spanish (es_ES), Italian (it_IT), and Russian (ru_RU) to translate "Load More..." and "Follow on Instagram"
321
+ * Tweak: Optimized several images used in the Instagram feed including loader.png
322
+ * Tweak: Font Awesome stylesheet handle has been renamed so it will only be loaded once if our Custom Facebook Feed plugin is also active
323
+ * Fix: Updated the Font Awesome icon font to the latest version: 4.7.0
324
+ * Fix: Padding removed from "Load More" button if no buttons are being used in the Instagram feed
325
+ * Fix: All links in the feed are now https
326
+ * Fix: Fixed JavaScript errors which were being caused if the Instagram Access Token had expired or the user ID was incorrect, private, or had no Instagram posts
327
+
328
  = 1.4.9 =
329
  * Compatible with WordPress 4.8
330
 
css/sb-instagram-admin.css CHANGED
@@ -73,6 +73,25 @@
73
  -o-transition: all 0.1s ease-in-out;
74
  transition: all 0.1s ease-in-out;
75
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  #sbi_admin .sbi_note{
77
  font-size: 12px;
78
  font-style: italic;
@@ -240,6 +259,28 @@
240
  margin-left: 5px;
241
  }
242
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
243
 
244
  /* Error notice */
245
  #sbi_admin .sbi_notice{
@@ -414,4 +455,116 @@
414
  margin-top: 10px;
415
  border: 1px solid #ddd;
416
  display: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
417
  }
73
  -o-transition: all 0.1s ease-in-out;
74
  transition: all 0.1s ease-in-out;
75
  }
76
+ .sb_get_token .submit {
77
+ display: inline-block;
78
+ margin: 0 0 0 10px;
79
+ padding: 0;
80
+ }
81
+ #sbi_admin .sbi-success {
82
+ position: relative;
83
+ top: -1px;
84
+
85
+ background: #68a30b;
86
+ color: #fff;
87
+ font-size: 16px;
88
+ padding: 6px;
89
+ font-size: 13px;
90
+ text-transform: capitalize;
91
+ padding: 4px 8px 5px 8px;
92
+ margin-left: 5px;
93
+ border-radius: 3px;
94
+ }
95
  #sbi_admin .sbi_note{
96
  font-size: 12px;
97
  font-style: italic;
259
  margin-left: 5px;
260
  }
261
 
262
+ /* Quick start */
263
+ #sbi_admin .sbi_quickstart{
264
+ display: block;
265
+ float: left;
266
+ clear: both;
267
+ margin: 15px 0 0 0;
268
+ padding: 15px 20px;
269
+ min-width: 808px;
270
+
271
+ border: 1px solid #ccc;
272
+ background: #eee;
273
+ background: rgba(255,255,255,0.5);
274
+
275
+ -moz-border-radius: 5px;
276
+ -webkit-border-radius: 5px;
277
+ border-radius: 5px;
278
+ }
279
+ #sbi_admin .sbi_quickstart h3,
280
+ #sbi_admin .sbi_quickstart p{
281
+ margin: 0;
282
+ padding: 5px 0;
283
+ }
284
 
285
  /* Error notice */
286
  #sbi_admin .sbi_notice{
455
  margin-top: 10px;
456
  border: 1px solid #ddd;
457
  display: none;
458
+ }
459
+ #sbi_admin .sb_get_token .button-primary:active {
460
+ height: 28px;
461
+ margin-top: -4px;
462
+ }
463
+
464
+ /* Pro header options - greyed out */
465
+ #sbi_admin #sb_instagram_header_style_boxed_options{
466
+ display: block;
467
+ float: left;
468
+ clear: both;
469
+ overflow: hidden;
470
+ width: auto;
471
+ padding: 10px 10px 0 10px;
472
+ background: rgba(255,255,255,0.5);
473
+ font-size: 12px;
474
+ line-height: 22px;
475
+ }
476
+ #sbi_admin #sb_instagram_header_style_boxed_options label{
477
+ height: 25px;
478
+ display: inline-block;
479
+ line-height: 25px;
480
+ position: relative;
481
+ top: -10px;
482
+ margin-right: 10px;
483
+ }
484
+ /* Moderation settings */
485
+ #sbi_admin .sbi_mod_manual_settings{
486
+ float: left;
487
+ clear: both;
488
+ width: 96%;
489
+
490
+ padding: 10px 2%;
491
+ margin: 10px 0;
492
+ font-size: 13px;
493
+ background: #f9f9f9;
494
+ background: rgba(255,255,255,0.8);
495
+
496
+ -moz-border-radius: 8px;
497
+ -webkit-border-radius: 8px;
498
+ border-radius: 8px;
499
+ }
500
+ #sbi_admin .sbi_mod_manual_settings .sbi_row{
501
+ padding: 15px 0 15px 0;
502
+ }
503
+ #sbi_admin .sbi_mod_manual_settings label{
504
+ display: block;
505
+ font-weight: bold;
506
+ font-size: 14px;
507
+ padding-bottom: 10px;
508
+ }
509
+ #sbi_admin .sbi_mod_manual_settings .sbi_tooltip{
510
+ width: 98%;
511
+ padding: 10px 1%;
512
+ background: #eee;
513
+ background: rgba(0,0,0,0.05);
514
+ }
515
+ #sbi_admin .sb_instagram_apply_labels p{
516
+ display: inline-block;
517
+ margin: 0 2px 5px 0;
518
+ }
519
+ #sbi_admin .sb_instagram_apply_labels input{
520
+ margin: 0 4px 0 8px;
521
+ }
522
+ #sbi_admin .sbi_white_list_names_wrapper{
523
+ display: inline-block;
524
+ margin-right: 10px;
525
+ }
526
+
527
+ /* Show Pro Options button */
528
+ #sbi_admin .sbi-show-pro{
529
+ margin-top: 10px;
530
+ text-align: center;
531
+ }
532
+ #sbi_admin .sbi-pro-options{
533
+ display: none;
534
+ }
535
+ #sbi_admin .sbi-upgrade-link{
536
+ margin: 25px 0 5px 0;
537
+ }
538
+
539
+ #sbi_admin .sbi_feed_type .sbi_note{
540
+ /*display: none;*/
541
+ }
542
+
543
+ #sbi_admin .sbi-pro-notice,
544
+ #sbi_admin .sbi-pro-notice img{
545
+ display: block;
546
+ float: left;
547
+ clear: both;
548
+ margin: 20px 0 0 0;
549
+ overflow: hidden;
550
+
551
+ -moz-border-radius: 4px;
552
+ -webkit-border-radius: 4px;
553
+ border-radius: 4px;
554
+
555
+ -moz-transition: all 0.5s ease-in-out;
556
+ -webkit-transition: all 0.5s ease-in-out;
557
+ -o-transition: all 0.5s ease-in-out;
558
+ transition: all 0.5s ease-in-out;
559
+ }
560
+ #sbi_admin .sbi-pro-notice img{
561
+ margin: 0;
562
+ }
563
+ #sbi_admin .sbi-pro-notice:hover{
564
+ opacity: 0.95;
565
+
566
+ -moz-transition: all 0.1s ease-in-out;
567
+ -webkit-transition: all 0.1s ease-in-out;
568
+ -o-transition: all 0.1s ease-in-out;
569
+ transition: all 0.1s ease-in-out;
570
  }
img/instagram-pro-promo.png CHANGED
Binary file
img/loader.png CHANGED
Binary file
img/sbi-icon.png CHANGED
Binary file
img/small-logo.png CHANGED
Binary file
instagram-feed-admin.php CHANGED
@@ -3,16 +3,16 @@ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
3
 
4
  function sb_instagram_menu() {
5
  add_menu_page(
6
- 'Instagram Feed',
7
- 'Instagram Feed',
8
  'manage_options',
9
  'sb-instagram-feed',
10
  'sb_instagram_settings_page'
11
  );
12
  add_submenu_page(
13
  'sb-instagram-feed',
14
- 'Settings',
15
- 'Settings',
16
  'manage_options',
17
  'sb-instagram-feed',
18
  'sb_instagram_settings_page'
@@ -48,7 +48,7 @@ function sb_instagram_settings_page() {
48
  'sb_instagram_show_btn' => true,
49
  'sb_instagram_btn_background' => '',
50
  'sb_instagram_btn_text_color' => '',
51
- 'sb_instagram_btn_text' => 'Load More...',
52
  'sb_instagram_image_res' => 'auto',
53
  //Header
54
  'sb_instagram_show_header' => true,
@@ -57,7 +57,7 @@ function sb_instagram_settings_page() {
57
  'sb_instagram_show_follow_btn' => true,
58
  'sb_instagram_folow_btn_background' => '',
59
  'sb_instagram_follow_btn_text_color' => '',
60
- 'sb_instagram_follow_btn_text' => 'Follow on Instagram',
61
  //Misc
62
  'sb_instagram_custom_css' => '',
63
  'sb_instagram_custom_js' => '',
@@ -91,6 +91,7 @@ function sb_instagram_settings_page() {
91
  $sb_instagram_image_res = $options[ 'sb_instagram_image_res' ];
92
  //Header
93
  $sb_instagram_show_header = $options[ 'sb_instagram_show_header' ];
 
94
  $sb_instagram_header_color = $options[ 'sb_instagram_header_color' ];
95
  //Follow button
96
  $sb_instagram_show_follow_btn = $options[ 'sb_instagram_show_follow_btn' ];
@@ -164,10 +165,12 @@ function sb_instagram_settings_page() {
164
  isset($_POST[ 'sb_instagram_show_btn' ]) ? $sb_instagram_show_btn = sanitize_text_field( $_POST[ 'sb_instagram_show_btn' ] ) : $sb_instagram_show_btn = '';
165
  $sb_instagram_btn_background = sanitize_text_field( $_POST[ 'sb_instagram_btn_background' ] );
166
  $sb_instagram_btn_text_color = sanitize_text_field( $_POST[ 'sb_instagram_btn_text_color' ] );
167
- $sb_instagram_btn_text = sanitize_text_field( $_POST[ 'sb_instagram_btn_text' ] );
168
  $sb_instagram_image_res = sanitize_text_field( $_POST[ 'sb_instagram_image_res' ] );
169
  //Header
170
  isset($_POST[ 'sb_instagram_show_header' ]) ? $sb_instagram_show_header = sanitize_text_field( $_POST[ 'sb_instagram_show_header' ] ) : $sb_instagram_show_header = '';
 
 
171
  $sb_instagram_header_color = sanitize_text_field( $_POST[ 'sb_instagram_header_color' ] );
172
  //Follow button
173
  isset($_POST[ 'sb_instagram_show_follow_btn' ]) ? $sb_instagram_show_follow_btn = sanitize_text_field( $_POST[ 'sb_instagram_show_follow_btn' ] ) : $sb_instagram_show_follow_btn = '';
@@ -194,10 +197,11 @@ function sb_instagram_settings_page() {
194
  $options[ 'sb_instagram_show_btn' ] = $sb_instagram_show_btn;
195
  $options[ 'sb_instagram_btn_background' ] = $sb_instagram_btn_background;
196
  $options[ 'sb_instagram_btn_text_color' ] = $sb_instagram_btn_text_color;
197
- $options[ 'sb_instagram_btn_text' ] = $sb_instagram_btn_text;
198
  $options[ 'sb_instagram_image_res' ] = $sb_instagram_image_res;
199
  //Header
200
  $options[ 'sb_instagram_show_header' ] = $sb_instagram_show_header;
 
201
  $options[ 'sb_instagram_header_color' ] = $sb_instagram_header_color;
202
  //Follow button
203
  $options[ 'sb_instagram_show_follow_btn' ] = $sb_instagram_show_follow_btn;
@@ -215,7 +219,7 @@ function sb_instagram_settings_page() {
215
  update_option( 'sb_instagram_settings', $options );
216
 
217
  ?>
218
- <div class="updated"><p><strong><?php _e('Settings saved.', 'instagram-feed' ); ?></strong></p></div>
219
  <?php } ?>
220
 
221
  <?php } //End nonce check ?>
@@ -224,7 +228,7 @@ function sb_instagram_settings_page() {
224
  <div id="sbi_admin" class="wrap">
225
 
226
  <div id="header">
227
- <h1><?php _e('Instagram Feed', 'instagram-feed'); ?></h1>
228
  </div>
229
 
230
  <form name="form1" method="post" action="">
@@ -233,10 +237,10 @@ function sb_instagram_settings_page() {
233
 
234
  <?php $sbi_active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'configure'; ?>
235
  <h2 class="nav-tab-wrapper">
236
- <a href="?page=sb-instagram-feed&amp;tab=configure" class="nav-tab <?php echo $sbi_active_tab == 'configure' ? 'nav-tab-active' : ''; ?>"><?php _e('1. Configure', 'instagram-feed'); ?></a>
237
- <a href="?page=sb-instagram-feed&amp;tab=customize" class="nav-tab <?php echo $sbi_active_tab == 'customize' ? 'nav-tab-active' : ''; ?>"><?php _e('2. Customize', 'instagram-feed'); ?></a>
238
- <a href="?page=sb-instagram-feed&amp;tab=display" class="nav-tab <?php echo $sbi_active_tab == 'display' ? 'nav-tab-active' : ''; ?>"><?php _e('3. Display Your Feed', 'instagram-feed'); ?></a>
239
- <a href="?page=sb-instagram-feed&amp;tab=support" class="nav-tab <?php echo $sbi_active_tab == 'support' ? 'nav-tab-active' : ''; ?>"><?php _e('Support', 'instagram-feed'); ?></a>
240
  </h2>
241
 
242
  <?php if( $sbi_active_tab == 'configure' ) { //Start Configure tab ?>
@@ -244,24 +248,24 @@ function sb_instagram_settings_page() {
244
 
245
  <table class="form-table">
246
  <tbody>
247
- <h3><?php _e('Configure', 'instagram-feed'); ?></h3>
248
 
249
  <div id="sbi_config">
250
- <!-- <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', 'instagram-feed'); ?></a> -->
251
- <a href="https://instagram.com/oauth/authorize/?client_id=3a81a9fa2a064751b8c31385b91cc25c&scope=basic+public_content&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', 'instagram-feed'); ?></a>
252
- <a href="https://smashballoon.com/instagram-feed/token/" target="_blank" style="position: relative; top: 14px; left: 15px;"><?php _e('Button not working?', 'instagram-feed'); ?></a>
253
  </div>
254
 
255
  <tr valign="top">
256
- <th scope="row"><label><?php _e('Access Token', 'instagram-feed'); ?></label></th>
257
  <td>
258
- <input name="sb_instagram_at" id="sb_instagram_at" type="text" value="<?php esc_attr_e( $sb_instagram_at, 'instagram-feed' ); ?>" size="60" maxlength="60" placeholder="Click button above to get your Access Token" />
259
- &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
260
  <p class="sbi_tooltip"><?php _e("In order to display your photos you need an Access Token from Instagram. To get yours, simply click the button above and log into Instagram. You can also use the button on <a href='https://smashballoon.com/instagram-feed/token/' target='_blank'>this page</a>.", 'instagram-feed'); ?></p>
261
  </td>
262
  </tr>
263
 
264
- <tr valign="top">
265
  <th scope="row"><label><?php _e('Show Photos From:', 'instagram-feed'); ?></label><code class="sbi_shortcode"> type
266
  Eg: type=user id=12986477
267
  </code></th>
@@ -269,9 +273,9 @@ function sb_instagram_settings_page() {
269
  <span>
270
  <?php $sb_instagram_type = 'user'; ?>
271
  <input type="radio" name="sb_instagram_type" id="sb_instagram_type_user" value="user" <?php if($sb_instagram_type == "user") echo "checked"; ?> />
272
- <label class="sbi_radio_label" for="sb_instagram_type_user">User ID(s):</label>
273
- <input name="sb_instagram_user_id" id="sb_instagram_user_id" type="text" value="<?php esc_attr_e( $sb_instagram_user_id, 'instagram-feed' ); ?>" size="25" />
274
- &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
275
  <p class="sbi_tooltip"><?php _e("These are the IDs of the Instagram accounts you want to display photos from. To get your ID simply click on the button above and log into Instagram.<br /><br />You can also display photos from other peoples Instagram accounts. To find their User ID you can use <a href='https://smashballoon.com/instagram-feed/find-instagram-user-id/' target='_blank'>this tool</a>. You can separate multiple IDs using commas.", 'instagram-feed'); ?></p><br />
276
  </span>
277
 
@@ -281,29 +285,37 @@ function sb_instagram_settings_page() {
281
 
282
  <span class="sbi_pro sbi_row">
283
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
284
- <label class="sbi_radio_label" for="sb_instagram_type_hashtag">Hashtag:</label>
285
  <input readonly type="text" size="25" />
286
- &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Hashtag</a></span>
287
- <p class="sbi_tooltip"><?php _e("Display posts from a specific hashtag instead of from a user", 'instagram-feed'); ?></p>
288
  </span>
289
 
290
  <div class="sbi_pro sbi_row">
291
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_self_likes" value="liked" <?php if($sb_instagram_type == "liked") echo "checked"; ?> />
292
- <label class="sbi_radio_label" for="sb_instagram_type_self_likes">Liked:</label>
293
  <input readonly type="text" size="25" />
294
- &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 that you've Liked</a></span>
295
  <p class="sbi_tooltip"><?php _e("Display posts that your user account has liked."); ?></p>
296
  </div>
297
 
 
 
 
 
 
 
 
 
298
  <span class="sbi_pro sbi_row">
299
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_location" value="location" <?php if($sb_instagram_type == "location") echo "checked"; ?> />
300
- <label class="sbi_radio_label" for="sb_instagram_type_location">Location:</label>
301
  <input readonly type="text" size="25" />
302
- &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Location</a></span>
303
- <p class="sbi_tooltip"><?php _e("Display posts from an Instagram location ID or location coordinates.", 'instagram-feed'); ?></p>
304
  </span>
305
 
306
- <span class="sbi_note" style="margin: 10px 0 0 0; display: block;"><?php _e('Separate multiple IDs using commas', 'instagram-feed'); ?></span>
307
 
308
  </td>
309
  </tr>
@@ -335,7 +347,7 @@ function sb_instagram_settings_page() {
335
 
336
  <p><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp; <?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=customize">Customize your Feed</a>', 'instagram-feed'); ?></p>
337
 
338
- <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
339
 
340
 
341
  <?php } // End Configure tab ?>
@@ -345,19 +357,20 @@ function sb_instagram_settings_page() {
345
  <?php if( $sbi_active_tab == 'customize' ) { //Start Configure tab ?>
346
 
347
  <p class="sb_instagram_contents_links" id="general">
348
- <span>Quick links: </span>
349
- <a href="#general">General</a>
350
- <a href="#photos">Photos</a>
351
- <a href="#headeroptions">Header</a>
352
- <a href="#loadmore">'Load More' Button</a>
353
- <a href="#follow">'Follow' Button</a>
354
- <a href="#customcss">Custom CSS</a>
355
- <a href="#customjs">Custom JavaScript</a>
 
356
  </p>
357
 
358
  <input type="hidden" name="<?php echo $sb_instagram_customize_hidden_field; ?>" value="Y">
359
 
360
- <h3><?php _e('Customize', 'instagram-feed'); ?></h3>
361
 
362
  <table class="form-table">
363
  <tbody>
@@ -365,15 +378,15 @@ function sb_instagram_settings_page() {
365
  <th scope="row"><label><?php _e('Width of Feed', 'instagram-feed'); ?></label><code class="sbi_shortcode"> width widthunit
366
  Eg: width=50 widthunit=%</code></th>
367
  <td>
368
- <input name="sb_instagram_width" type="text" value="<?php esc_attr_e( $sb_instagram_width, 'instagram-feed' ); ?>" id="sb_instagram_width" size="4" maxlength="4" />
369
  <select name="sb_instagram_width_unit" id="sb_instagram_width_unit">
370
  <option value="px" <?php if($sb_instagram_width_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
371
  <option value="%" <?php if($sb_instagram_width_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
372
  </select>
373
  <div id="sb_instagram_width_options">
374
- <input name="sb_instagram_feed_width_resp" type="checkbox" id="sb_instagram_feed_width_resp" <?php if($sb_instagram_feed_width_resp == true) echo "checked"; ?> /><label for="sb_instagram_feed_width_resp"><?php _e('Set to be 100% width on mobile?'); ?></label>
375
- <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e('What does this mean?'); ?></a>
376
- <p class="sbi_tooltip"><?php _e("If you set a width on the feed then this will be used on mobile as well as desktop. Check this setting to set the feed width to be 100% on mobile so that it is responsive."); ?></p>
377
  </div>
378
  </td>
379
  </tr>
@@ -381,7 +394,7 @@ function sb_instagram_settings_page() {
381
  <th scope="row"><label><?php _e('Height of Feed', 'instagram-feed'); ?></label><code class="sbi_shortcode"> height heightunit
382
  Eg: height=500 heightunit=px</code></th>
383
  <td>
384
- <input name="sb_instagram_height" type="text" value="<?php esc_attr_e( $sb_instagram_height, 'instagram-feed' ); ?>" size="4" maxlength="4" />
385
  <select name="sb_instagram_height_unit">
386
  <option value="px" <?php if($sb_instagram_height_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
387
  <option value="%" <?php if($sb_instagram_height_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
@@ -392,44 +405,22 @@ function sb_instagram_settings_page() {
392
  <th scope="row"><label><?php _e('Background Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> background
393
  Eg: background=d89531</code></th>
394
  <td>
395
- <input name="sb_instagram_background" type="text" value="<?php esc_attr_e( $sb_instagram_background, 'instagram-feed' ); ?>" class="sbi_colorpick" />
396
  </td>
397
  </tr>
398
  </tbody>
399
  </table>
400
 
401
- <hr id="photos" />
402
- <h3><?php _e('Photos', 'instagram-feed'); ?></h3>
403
 
404
  <table class="form-table">
405
  <tbody>
406
- <tr valign="top">
407
- <th scope="row"><label><?php _e('Sort Photos By', 'instagram-feed'); ?></label><code class="sbi_shortcode"> sortby
408
- Eg: sortby=random</code></th>
409
- <td>
410
- <select name="sb_instagram_sort">
411
- <option value="none" <?php if($sb_instagram_sort == "none") echo 'selected="selected"' ?> ><?php _e('Newest to oldest', 'instagram-feed'); ?></option>
412
- <!-- <option value="most-recent" <?php if($sb_instagram_sort == "most-recent") echo 'selected="selected"' ?> ><?php _e('Newest to Oldest', 'instagram-feed'); ?></option>
413
- <option value="least-recent" <?php if($sb_instagram_sort == "least-recent") echo 'selected="selected"' ?> ><?php _e('Oldest to newest', 'instagram-feed'); ?></option>
414
- <option value="most-liked" <?php if($sb_instagram_sort == "most-liked") echo 'selected="selected"' ?> ><?php _e('Most liked first', 'instagram-feed'); ?></option>
415
- <option value="least-liked" <?php if($sb_instagram_sort == "least-liked") echo 'selected="selected"' ?> ><?php _e('Least liked first', 'instagram-feed'); ?></option>
416
- <option value="most-commented" <?php if($sb_instagram_sort == "most-commented") echo 'selected="selected"' ?> ><?php _e('Most commented first', 'instagram-feed'); ?></option>
417
- <option value="least-commented" <?php if($sb_instagram_sort == "least-commented") echo 'selected="selected"' ?> ><?php _e('Least commented first', 'instagram-feed'); ?></option> -->
418
- <option value="random" <?php if($sb_instagram_sort == "random") echo 'selected="selected"' ?> ><?php _e('Random', 'instagram-feed'); ?></option>
419
- </select>
420
- </td>
421
- </tr>
422
- <tr valign="top" class="sbi_pro">
423
- <th scope="row"><label><?php _e("Enable Pop-up Lightbox", 'instagram-feed'); ?></label></th>
424
- <td>
425
- <span class="sbi_note"><a href="https://smashballoon.com/instagram-feed/" target="_blank"><?php _e('Upgrade to Pro to enable the Pop-up Lightbox.', 'instagram-feed'); ?></a></span>
426
- </td>
427
- </tr>
428
  <tr valign="top">
429
  <th scope="row"><label><?php _e('Number of Photos', 'instagram-feed'); ?></label><code class="sbi_shortcode"> num
430
  Eg: num=6</code></th>
431
  <td>
432
- <input name="sb_instagram_num" type="text" value="<?php esc_attr_e( $sb_instagram_num, 'instagram-feed' ); ?>" size="4" maxlength="4" />
433
  <span class="sbi_note"><?php _e('Number of photos to show initially. Maximum of 33.', 'instagram-feed'); ?></span>
434
  &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("Using multiple IDs or hashtags?", 'instagram-feed'); ?></a>
435
  <p class="sbi_tooltip"><?php _e("If you're displaying photos from multiple User IDs or hashtags then this is the number of photos which will be displayed from each.", 'instagram-feed'); ?></p>
@@ -439,7 +430,6 @@ function sb_instagram_settings_page() {
439
  <th scope="row"><label><?php _e('Number of Columns', 'instagram-feed'); ?></label><code class="sbi_shortcode"> cols
440
  Eg: cols=3</code></th>
441
  <td>
442
-
443
  <select name="sb_instagram_cols">
444
  <option value="1" <?php if($sb_instagram_cols == "1") echo 'selected="selected"' ?> ><?php _e('1', 'instagram-feed'); ?></option>
445
  <option value="2" <?php if($sb_instagram_cols == "2") echo 'selected="selected"' ?> ><?php _e('2', 'instagram-feed'); ?></option>
@@ -452,43 +442,24 @@ function sb_instagram_settings_page() {
452
  <option value="9" <?php if($sb_instagram_cols == "9") echo 'selected="selected"' ?> ><?php _e('9', 'instagram-feed'); ?></option>
453
  <option value="10" <?php if($sb_instagram_cols == "10") echo 'selected="selected"' ?> ><?php _e('10', 'instagram-feed'); ?></option>
454
  </select>
455
-
456
- </td>
457
- </tr>
458
- <tr valign="top">
459
- <th scope="row"><label><?php _e('Image Resolution', 'instagram-feed'); ?></label><code class="sbi_shortcode"> imageres
460
- Eg: imageres=thumb</code></th>
461
- <td>
462
-
463
- <select name="sb_instagram_image_res">
464
- <option value="auto" <?php if($sb_instagram_image_res == "auto") echo 'selected="selected"' ?> ><?php _e('Auto-detect (recommended)', 'instagram-feed'); ?></option>
465
- <option value="thumb" <?php if($sb_instagram_image_res == "thumb") echo 'selected="selected"' ?> ><?php _e('Thumbnail (150x150)', 'instagram-feed'); ?></option>
466
- <option value="medium" <?php if($sb_instagram_image_res == "medium") echo 'selected="selected"' ?> ><?php _e('Medium (306x306)', 'instagram-feed'); ?></option>
467
- <option value="full" <?php if($sb_instagram_image_res == "full") echo 'selected="selected"' ?> ><?php _e('Full size (640x640)', 'instagram-feed'); ?></option>
468
- </select>
469
-
470
- &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What does Auto-detect mean?", 'instagram-feed'); ?></a>
471
- <p class="sbi_tooltip"><?php _e("Auto-detect means that the plugin automatically sets the image resolution based on the size of your feed.", 'instagram-feed'); ?></p>
472
-
473
  </td>
474
  </tr>
475
  <tr valign="top">
476
  <th scope="row"><label><?php _e('Padding around Images', 'instagram-feed'); ?></label><code class="sbi_shortcode"> imagepadding imagepaddingunit</code></th>
477
  <td>
478
- <input name="sb_instagram_image_padding" type="text" value="<?php esc_attr_e( $sb_instagram_image_padding, 'instagram-feed' ); ?>" size="4" maxlength="4" />
479
  <select name="sb_instagram_image_padding_unit">
480
  <option value="px" <?php if($sb_instagram_image_padding_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
481
  <option value="%" <?php if($sb_instagram_image_padding_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
482
  </select>
483
  </td>
484
  </tr>
485
-
486
  <tr valign="top">
487
  <th scope="row"><label><?php _e("Disable mobile layout", 'instagram-feed'); ?></label><code class="sbi_shortcode"> disablemobile
488
  Eg: disablemobile=true</code></th>
489
  <td>
490
  <input type="checkbox" name="sb_instagram_disable_mobile" id="sb_instagram_disable_mobile" <?php if($sb_instagram_disable_mobile == true) echo 'checked="checked"' ?> />
491
- &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What does this mean?", 'instagram-feed'); ?></a>
492
  <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.", 'instagram-feed'); ?></p>
493
  </td>
494
  </tr>
@@ -497,9 +468,189 @@ function sb_instagram_settings_page() {
497
 
498
  <?php submit_button(); ?>
499
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
500
  <hr />
501
- <h3><?php _e("Carousel", 'instagram-feed'); ?></h3>
502
- <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Carousels</a></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
503
 
504
  <hr id="headeroptions" />
505
  <h3><?php _e("Header", 'instagram-feed'); ?></h3>
@@ -512,23 +663,207 @@ function sb_instagram_settings_page() {
512
  <input type="checkbox" name="sb_instagram_show_header" id="sb_instagram_show_header" <?php if($sb_instagram_show_header == true) echo 'checked="checked"' ?> />
513
  </td>
514
  </tr>
 
 
 
 
 
 
 
 
 
515
  <tr valign="top">
516
  <th scope="row"><label><?php _e('Header Text Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> headercolor
517
  Eg: headercolor=fff</code></th>
518
  <td>
519
- <input name="sb_instagram_header_color" type="text" value="<?php esc_attr_e( $sb_instagram_header_color, 'instagram-feed' ); ?>" class="sbi_colorpick" />
520
  </td>
521
  </tr>
522
  </tbody>
523
  </table>
524
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
525
  <hr />
526
  <h3><?php _e("Caption", 'instagram-feed'); ?></h3>
527
- <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Photo Captions</a></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
 
529
  <hr />
530
  <h3><?php _e("Likes &amp; Comments", 'instagram-feed'); ?></h3>
531
- <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Likes &amp; Comments</a></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
532
 
533
  <hr id="loadmore" />
534
  <h3><?php _e("'Load More' Button", 'instagram-feed'); ?></h3>
@@ -545,21 +880,21 @@ function sb_instagram_settings_page() {
545
  <th scope="row"><label><?php _e('Button Background Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> buttoncolor
546
  Eg: buttoncolor=8224e3</code></th>
547
  <td>
548
- <input name="sb_instagram_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_btn_background, 'instagram-feed' ); ?>" class="sbi_colorpick" />
549
  </td>
550
  </tr>
551
  <tr valign="top">
552
  <th scope="row"><label><?php _e('Button Text Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> buttontextcolor
553
  Eg: buttontextcolor=eeee22</code></th>
554
  <td>
555
- <input name="sb_instagram_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text_color, 'instagram-feed' ); ?>" class="sbi_colorpick" />
556
  </td>
557
  </tr>
558
  <tr valign="top">
559
  <th scope="row"><label><?php _e('Button Text', 'instagram-feed'); ?></label><code class="sbi_shortcode"> buttontext
560
  Eg: buttontext="Show more.."</code></th>
561
  <td>
562
- <input name="sb_instagram_btn_text" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text, 'instagram-feed' ); ?>" size="20" />
563
  </td>
564
  </tr>
565
  </tbody>
@@ -579,102 +914,128 @@ function sb_instagram_settings_page() {
579
  </td>
580
  </tr>
581
 
582
- <!-- <tr valign="top">
583
- <th scope="row"><label><?php _e("Button Position", 'instagram-feed'); ?></label></th>
584
- <td>
585
- <select name="sb_instagram_follow_btn_position">
586
- <option value="top" <?php if($sb_instagram_follow_btn_position == "top") echo 'selected="selected"' ?> ><?php _e('Top', 'instagram-feed'); ?></option>
587
- <option value="bottom" <?php if($sb_instagram_follow_btn_position == "bottom") echo 'selected="selected"' ?> ><?php _e('Bottom', 'instagram-feed'); ?></option>
588
- </select>
589
- </td>
590
- </tr> -->
591
-
592
  <tr valign="top">
593
  <th scope="row"><label><?php _e('Button Background Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> followcolor
594
  Eg: followcolor=28a1bf</code></th>
595
  <td>
596
- <input name="sb_instagram_folow_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_folow_btn_background, 'instagram-feed' ); ?>" class="sbi_colorpick" />
597
  </td>
598
  </tr>
599
  <tr valign="top">
600
  <th scope="row"><label><?php _e('Button Text Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> followtextcolor
601
  Eg: followtextcolor=000</code></th>
602
  <td>
603
- <input name="sb_instagram_follow_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_follow_btn_text_color, 'instagram-feed' ); ?>" class="sbi_colorpick" />
604
  </td>
605
  </tr>
606
  <tr valign="top">
607
  <th scope="row"><label><?php _e('Button Text', 'instagram-feed'); ?></label><code class="sbi_shortcode"> followtext
608
  Eg: followtext="Follow me"</code></th>
609
  <td>
610
- <input name="sb_instagram_follow_btn_text" type="text" value="<?php esc_attr_e( $sb_instagram_follow_btn_text, 'instagram-feed' ); ?>" size="30" />
611
  </td>
612
  </tr>
613
  </tbody>
614
  </table>
615
 
 
 
616
 
 
 
 
 
617
 
 
618
 
619
- <hr id="filtering" />
620
- <h3><?php _e('Post Filtering', 'instagram-feed'); ?></h3>
621
- <table class="form-table">
622
- <tbody>
623
- <tr valign="top" class="sbi_pro">
624
- <th scope="row"><label><?php _e('Remove photos containing these words or hashtags', 'instagram-feed'); ?></label></th>
625
- <td>
626
- <input disabled name="sb_instagram_exclude_words" id="sb_instagram_exclude_words" type="text" style="width: 70%;" value="" />
627
- <br />
628
- <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas', 'instagram-feed'); ?></span>
629
- &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
630
- <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.", 'instagram-feed'); ?></p>
631
- </td>
632
- </tr>
633
 
634
- <tr valign="top" class="sbi_pro">
635
- <th scope="row"><label><?php _e('Show photos containing these words or hashtags', 'instagram-feed'); ?></label></th>
636
- <td>
637
- <input disabled name="sb_instagram_include_words" id="sb_instagram_include_words" type="text" style="width: 70%;" value="" />
638
- <br />
639
- <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas', 'instagram-feed'); ?></span>
640
- &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
641
- <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.", 'instagram-feed'); ?></p>
642
- </td>
643
- </tr>
644
- </tbody>
645
- </table>
646
- <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Post Filtering options</a></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
647
 
648
 
649
  <hr id="moderation" />
650
  <h3><?php _e('Moderation', 'instagram-feed'); ?></h3>
651
- <table class="form-table">
652
- <tbody>
653
- <tr valign="top" class="sbi_pro">
654
- <th scope="row"><label><?php _e('Hide specific photos', 'instagram-feed'); ?></label></th>
655
- <td>
656
- <textarea disabled name="sb_instagram_hide_photos" id="sb_instagram_hide_photos" style="width: 70%;" rows="3"></textarea>
657
- <br />
658
- <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate IDs using commas', 'instagram-feed'); ?></span>
659
- &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
660
- <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.", 'instagram-feed'); ?></p>
661
- </td>
662
- </tr>
663
 
664
- <tr valign="top" class="sbi_pro">
665
- <th scope="row"><label><?php _e('Block users', 'instagram-feed'); ?></label></th>
666
- <td>
667
- <input disabled name="sb_instagram_block_users" id="sb_instagram_block_users" type="text" style="width: 70%;" value="" />
668
- <br />
669
- <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate usernames using commas', 'instagram-feed'); ?></span>
670
- &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
671
- <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.", 'instagram-feed'); ?></p>
672
- </td>
673
- </tr>
674
 
675
- </tbody>
676
- </table>
677
- <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Moderation options</a></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
678
 
679
 
680
 
@@ -710,7 +1071,7 @@ function sb_instagram_settings_page() {
710
  <tr valign="top">
711
  <th scope="row"><label><?php _e("Disable Font Awesome", 'instagram-feed'); ?></label></th>
712
  <td>
713
- <input type="checkbox" name="sb_instagram_disable_awesome" id="sb_instagram_disable_awesome" <?php if($sb_instagram_disable_awesome == true) echo 'checked="checked"' ?> /> Yes
714
  </td>
715
  </tr>
716
  </tbody>
@@ -722,7 +1083,7 @@ function sb_instagram_settings_page() {
722
 
723
  <p><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp; <?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=display">Display your Feed</a>', 'instagram-feed'); ?></p>
724
 
725
- <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
726
 
727
 
728
  <?php } //End Customize tab ?>
@@ -738,7 +1099,7 @@ function sb_instagram_settings_page() {
738
  <h3 style="padding-top: 10px;"><?php _e( 'Multiple Feeds', 'instagram-feed' ); ?></h3>
739
  <p><?php _e("If you'd like to display multiple feeds then you can set different settings directly in the shortcode like so:", 'instagram-feed'); ?>
740
  <code>[instagram-feed num=9 cols=3]</code></p>
741
- <p>You can display as many different feeds as you like, on either the same page or on different pages, by just using the shortcode options below. For example:<br />
742
  <code>[instagram-feed]</code><br />
743
  <code>[instagram-feed id="ANOTHER_USER_ID"]</code><br />
744
  <code>[instagram-feed id="ANOTHER_USER_ID, YET_ANOTHER_USER_ID" num=4 cols=4 showfollow=false]</code>
@@ -895,13 +1256,17 @@ function sb_instagram_settings_page() {
895
  <td><code>[instagram-feed carouseltime=8000]</code></td>
896
  </tr>
897
 
898
-
899
  <tr class="sbi_table_header"><td colspan=3><?php _e("Header Options", 'instagram-feed'); ?></td></tr>
900
  <tr>
901
  <td>showheader</td>
902
  <td><?php _e("Whether to show the feed Header. 'true' or 'false'.", 'instagram-feed'); ?></td>
903
  <td><code>[instagram-feed showheader=false]</code></td>
904
  </tr>
 
 
 
 
 
905
  <tr>
906
  <td>headercolor</td>
907
  <td><?php _e("The color of the Header text. Any hex color code.", 'instagram-feed'); ?></td>
@@ -1006,64 +1371,76 @@ function sb_instagram_settings_page() {
1006
  </tbody>
1007
  </table>
1008
 
1009
- <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
1010
 
1011
  <?php } //End Display tab ?>
1012
 
1013
 
1014
  <?php if( $sbi_active_tab == 'support' ) { //Start Support tab ?>
1015
 
1016
- <div class="sbi_support">
1017
 
1018
- <br />
1019
- <h3 style="padding-bottom: 10px;">Need help?</h3>
1020
 
1021
- <p>
1022
- <span class="sbi-support-title"><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/instagram-feed/free/" target="_blank"><?php _e('Setup Directions'); ?></a></span>
1023
- <?php _e('A step-by-step guide on how to setup and use the plugin.'); ?>
1024
- </p>
 
 
1025
 
1026
- <p>
1027
- <span class="sbi-support-title"><i class="fa fa-youtube-play" aria-hidden="true"></i>&nbsp; <a href="https://www.youtube.com/embed/V_fJ_vhvQXM" target="_blank" id="sbi-play-support-video"><?php _e('Watch a Video'); ?></a></span>
1028
- <?php _e("Watch a short video demonstrating how to set up, customize and use the plugin.<br /><b>Please note</b> that the video shows the set up and use of the <b><a href='https://smashballoon.com/instagram-feed/' target='_blank'>PRO version</a></b> of the plugin, but the process is the same for this free version. The only difference is some of the features available."); ?>
 
 
1029
 
1030
- <iframe id="sbi-support-video" src="//www.youtube.com/embed/V_fJ_vhvQXM?theme=light&amp;showinfo=0&amp;controls=2" width="960" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
1031
- </p>
 
 
1032
 
1033
- <p>
1034
- <span class="sbi-support-title"><i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/instagram-feed/support/faq/" target="_blank"><?php _e('FAQs and Docs'); ?></a></span>
1035
- <?php _e('View our expansive library of FAQs and documentation to help solve your problem as quickly as possible.'); ?>
1036
- </p>
 
 
1037
 
1038
- <div class="sbi-support-faqs">
1039
-
1040
- <ul>
1041
- <li><b>FAQs</b></li>
1042
- <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/instagram-feed/find-instagram-user-id/" target="_blank">How to find an Instagram User ID</a>'); ?></li>
1043
- <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/my-instagram-access-token-keep-expiring/" target="_blank">My Access Token Keeps Expiring</a>'); ?></li>
1044
- <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/my-photos-wont-load/" target="_blank">My Instagram Feed Won\'t Load</a>'); ?></li>
1045
- <li style="margin-top: 8px; font-size: 12px;"><a href="https://smashballoon.com/instagram-feed/support/faq/" target="_blank">See All<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
1046
- </ul>
1047
-
1048
- <ul>
1049
- <li><b>Documentation</b></li>
1050
- <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/instagram-feed/free" target="_blank">Installation and Configuration</a>'); ?></li>
1051
- <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/display-multiple-instagram-feeds/" target="_blank">Displaying multiple feeds</a>'); ?></li>
1052
- <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/instagram-feed-faq/customization/" target="_blank">Customizing your Feed</a>'); ?></li>
1053
- </ul>
1054
- </div>
1055
 
1056
- <p>
1057
- <span class="sbi-support-title"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/instagram-feed/support/" target="_blank"><?php _e('Request Support'); ?></a></span>
1058
- <?php _e('Still need help? Submit a ticket and one of our support experts will get back to you as soon as possible.<br /><b>Important:</b> Please include your <b>System Info</b> below with all support requests.'); ?>
1059
- </p>
1060
- </div>
 
 
 
 
1061
 
 
 
 
 
 
 
 
1062
 
 
 
 
 
 
 
 
 
 
 
 
1063
 
1064
- <hr />
1065
 
1066
- <h3><?php _e('System Info &nbsp; <i style="color: #666; font-size: 11px; font-weight: normal;">Click the text below to select all</i>', 'instagram-feed'); ?></h3>
1067
 
1068
 
1069
  <?php $sbi_options = get_option('sb_instagram_settings'); ?>
@@ -1096,24 +1473,72 @@ while (list($key, $val) = each($sbi_options)) {
1096
  echo "$key => $val\n";
1097
  }
1098
  ?>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1099
  </textarea>
1100
 
1101
-
1102
  <?php
1103
  } //End Support tab
1104
  ?>
1105
 
1106
 
1107
- <hr />
 
 
 
 
1108
 
1109
- <a href="https://smashballoon.com/instagram-feed/demo" target="_blank" style="display: block; margin: 20px 0 0 0; float: left; clear: both;">
1110
- <img src="<?php echo plugins_url( 'img/instagram-pro-promo.png' , __FILE__ ) ?>" alt="Instagram Feed Pro">
1111
  </a>
1112
 
1113
- <p class="sbi_plugins_promo dashicons-before dashicons-admin-plugins"> Check out our other free plugins: <a href="https://wordpress.org/plugins/custom-facebook-feed/" target="_blank">Facebook</a> and <a href="https://wordpress.org/plugins/custom-twitter-feeds/" target="_blank">Twitter</a>.</p>
1114
 
1115
  <div class="sbi_share_plugin">
1116
- <h3><?php _e('Like the plugin? Help spread the word!'); ?></h3>
1117
 
1118
  <!-- TWITTER -->
1119
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://wordpress.org/plugins/instagram-feed/" data-text="Display beautifully clean, customizable, and responsive feeds from multiple Instagram accounts" data-via="smashballoon" data-dnt="true">Tweet</a>
@@ -1158,8 +1583,12 @@ function sb_instagram_admin_style() {
1158
  add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_style' );
1159
 
1160
  function sb_instagram_admin_scripts() {
1161
- wp_enqueue_script( '', plugins_url( 'js/sb-instagram-admin.js' , __FILE__ ), array(), SBIVER );
1162
-
 
 
 
 
1163
  if( !wp_script_is('jquery-ui-draggable') ) {
1164
  wp_enqueue_script(
1165
  array(
@@ -1184,7 +1613,7 @@ add_filter( "plugin_action_links_{$sbi_plugin_file}", 'sbi_add_settings_link', 1
1184
 
1185
  //modify the link by unshifting the array
1186
  function sbi_add_settings_link( $links, $file ) {
1187
- $sbi_settings_link = '<a href="' . admin_url( 'admin.php?page=sb-instagram-feed' ) . '">' . __( 'Settings', 'sb-instagram-feed', 'instagram-feed' ) . '</a>';
1188
  array_unshift( $links, $sbi_settings_link );
1189
 
1190
  return $links;
@@ -1252,6 +1681,24 @@ function sbi_rating_notice_html() {
1252
  }
1253
  }
1254
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1255
  // variables to define certain terms
1256
  $transient = 'instagram_feed_rating_notice_waiting';
1257
  $option = 'sbi_rating_notice';
@@ -1265,6 +1712,3 @@ $notice_status = get_option( $option, false );
1265
  if ( get_transient( $transient ) !== 'waiting' && $notice_status !== 'dismissed' ) {
1266
  add_action( 'admin_notices', 'sbi_rating_notice_html' );
1267
  }
1268
-
1269
-
1270
- ?>
3
 
4
  function sb_instagram_menu() {
5
  add_menu_page(
6
+ __( 'Instagram Feed', 'instagram-feed' ),
7
+ __( 'Instagram Feed', 'instagram-feed' ),
8
  'manage_options',
9
  'sb-instagram-feed',
10
  'sb_instagram_settings_page'
11
  );
12
  add_submenu_page(
13
  'sb-instagram-feed',
14
+ __( 'Settings', 'instagram-feed' ),
15
+ __( 'Settings', 'instagram-feed' ),
16
  'manage_options',
17
  'sb-instagram-feed',
18
  'sb_instagram_settings_page'
48
  'sb_instagram_show_btn' => true,
49
  'sb_instagram_btn_background' => '',
50
  'sb_instagram_btn_text_color' => '',
51
+ 'sb_instagram_btn_text' => __( 'Load More...', 'instagram-feed' ),
52
  'sb_instagram_image_res' => 'auto',
53
  //Header
54
  'sb_instagram_show_header' => true,
57
  'sb_instagram_show_follow_btn' => true,
58
  'sb_instagram_folow_btn_background' => '',
59
  'sb_instagram_follow_btn_text_color' => '',
60
+ 'sb_instagram_follow_btn_text' => __( 'Follow on Instagram', 'instagram-feed' ),
61
  //Misc
62
  'sb_instagram_custom_css' => '',
63
  'sb_instagram_custom_js' => '',
91
  $sb_instagram_image_res = $options[ 'sb_instagram_image_res' ];
92
  //Header
93
  $sb_instagram_show_header = $options[ 'sb_instagram_show_header' ];
94
+ $sb_instagram_show_bio = isset( $options[ 'sb_instagram_show_bio' ] ) ? $options[ 'sb_instagram_show_bio' ] : true;
95
  $sb_instagram_header_color = $options[ 'sb_instagram_header_color' ];
96
  //Follow button
97
  $sb_instagram_show_follow_btn = $options[ 'sb_instagram_show_follow_btn' ];
165
  isset($_POST[ 'sb_instagram_show_btn' ]) ? $sb_instagram_show_btn = sanitize_text_field( $_POST[ 'sb_instagram_show_btn' ] ) : $sb_instagram_show_btn = '';
166
  $sb_instagram_btn_background = sanitize_text_field( $_POST[ 'sb_instagram_btn_background' ] );
167
  $sb_instagram_btn_text_color = sanitize_text_field( $_POST[ 'sb_instagram_btn_text_color' ] );
168
+ $sb_instagram_btn_text = sanitize_text_field( $_POST[ 'sb_instagram_btn_text' ] );
169
  $sb_instagram_image_res = sanitize_text_field( $_POST[ 'sb_instagram_image_res' ] );
170
  //Header
171
  isset($_POST[ 'sb_instagram_show_header' ]) ? $sb_instagram_show_header = sanitize_text_field( $_POST[ 'sb_instagram_show_header' ] ) : $sb_instagram_show_header = '';
172
+ isset($_POST[ 'sb_instagram_show_bio' ]) ? $sb_instagram_show_bio = sanitize_text_field( $_POST[ 'sb_instagram_show_bio' ] ) : $sb_instagram_show_bio = '';
173
+
174
  $sb_instagram_header_color = sanitize_text_field( $_POST[ 'sb_instagram_header_color' ] );
175
  //Follow button
176
  isset($_POST[ 'sb_instagram_show_follow_btn' ]) ? $sb_instagram_show_follow_btn = sanitize_text_field( $_POST[ 'sb_instagram_show_follow_btn' ] ) : $sb_instagram_show_follow_btn = '';
197
  $options[ 'sb_instagram_show_btn' ] = $sb_instagram_show_btn;
198
  $options[ 'sb_instagram_btn_background' ] = $sb_instagram_btn_background;
199
  $options[ 'sb_instagram_btn_text_color' ] = $sb_instagram_btn_text_color;
200
+ $options[ 'sb_instagram_btn_text' ] = $sb_instagram_btn_text;
201
  $options[ 'sb_instagram_image_res' ] = $sb_instagram_image_res;
202
  //Header
203
  $options[ 'sb_instagram_show_header' ] = $sb_instagram_show_header;
204
+ $options[ 'sb_instagram_show_bio' ] = $sb_instagram_show_bio;
205
  $options[ 'sb_instagram_header_color' ] = $sb_instagram_header_color;
206
  //Follow button
207
  $options[ 'sb_instagram_show_follow_btn' ] = $sb_instagram_show_follow_btn;
219
  update_option( 'sb_instagram_settings', $options );
220
 
221
  ?>
222
+ <div class="updated"><p><strong><?php _e( 'Settings saved.', 'instagram-feed' ); ?></strong></p></div>
223
  <?php } ?>
224
 
225
  <?php } //End nonce check ?>
228
  <div id="sbi_admin" class="wrap">
229
 
230
  <div id="header">
231
+ <h1><?php _e( 'Instagram Feed', 'instagram-feed' ); ?></h1>
232
  </div>
233
 
234
  <form name="form1" method="post" action="">
237
 
238
  <?php $sbi_active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'configure'; ?>
239
  <h2 class="nav-tab-wrapper">
240
+ <a href="?page=sb-instagram-feed&amp;tab=configure" class="nav-tab <?php echo $sbi_active_tab == 'configure' ? 'nav-tab-active' : ''; ?>"><?php _e( '1. Configure', 'instagram-feed' ); ?></a>
241
+ <a href="?page=sb-instagram-feed&amp;tab=customize" class="nav-tab <?php echo $sbi_active_tab == 'customize' ? 'nav-tab-active' : ''; ?>"><?php _e( '2. Customize', 'instagram-feed' ); ?></a>
242
+ <a href="?page=sb-instagram-feed&amp;tab=display" class="nav-tab <?php echo $sbi_active_tab == 'display' ? 'nav-tab-active' : ''; ?>"><?php _e( '3. Display Your Feed', 'instagram-feed' ); ?></a>
243
+ <a href="?page=sb-instagram-feed&amp;tab=support" class="nav-tab <?php echo $sbi_active_tab == 'support' ? 'nav-tab-active' : ''; ?>"><?php _e( 'Support', 'instagram-feed' ); ?></a>
244
  </h2>
245
 
246
  <?php if( $sbi_active_tab == 'configure' ) { //Start Configure tab ?>
248
 
249
  <table class="form-table">
250
  <tbody>
251
+ <h3><?php _e( 'Configure', 'instagram-feed' ); ?></h3>
252
 
253
  <div id="sbi_config">
254
+ <!-- <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', 'instagram-feed' ); ?></a> -->
255
+ <a href="https://instagram.com/oauth/authorize/?client_id=3a81a9fa2a064751b8c31385b91cc25c&scope=basic+public_content&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', 'instagram-feed' ); ?></a>
256
+ <a href="https://smashballoon.com/instagram-feed/token/" target="_blank" style="position: relative; top: 14px; left: 15px;"><?php _e( 'Button not working?', 'instagram-feed' ); ?></a>
257
  </div>
258
 
259
  <tr valign="top">
260
+ <th scope="row"><label><?php _e( 'Access Token', 'instagram-feed' ); ?></label></th>
261
  <td>
262
+ <input name="sb_instagram_at" id="sb_instagram_at" type="text" value="<?php echo esc_attr( $sb_instagram_at ); ?>" size="60" maxlength="60" placeholder="Click button above to get your Access Token" />
263
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e( 'What is this?', 'instagram-feed'); ?></a>
264
  <p class="sbi_tooltip"><?php _e("In order to display your photos you need an Access Token from Instagram. To get yours, simply click the button above and log into Instagram. You can also use the button on <a href='https://smashballoon.com/instagram-feed/token/' target='_blank'>this page</a>.", 'instagram-feed'); ?></p>
265
  </td>
266
  </tr>
267
 
268
+ <tr valign="top" class="sbi_feed_type">
269
  <th scope="row"><label><?php _e('Show Photos From:', 'instagram-feed'); ?></label><code class="sbi_shortcode"> type
270
  Eg: type=user id=12986477
271
  </code></th>
273
  <span>
274
  <?php $sb_instagram_type = 'user'; ?>
275
  <input type="radio" name="sb_instagram_type" id="sb_instagram_type_user" value="user" <?php if($sb_instagram_type == "user") echo "checked"; ?> />
276
+ <label class="sbi_radio_label" for="sb_instagram_type_user"><?php _e( 'User ID(s):', 'instagram-feed' ); ?></label>
277
+ <input name="sb_instagram_user_id" id="sb_instagram_user_id" type="text" value="<?php echo esc_attr( $sb_instagram_user_id ); ?>" size="25" />
278
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e( 'What is this?', 'instagram-feed' ); ?></a>
279
  <p class="sbi_tooltip"><?php _e("These are the IDs of the Instagram accounts you want to display photos from. To get your ID simply click on the button above and log into Instagram.<br /><br />You can also display photos from other peoples Instagram accounts. To find their User ID you can use <a href='https://smashballoon.com/instagram-feed/find-instagram-user-id/' target='_blank'>this tool</a>. You can separate multiple IDs using commas.", 'instagram-feed'); ?></p><br />
280
  </span>
281
 
285
 
286
  <span class="sbi_pro sbi_row">
287
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
288
+ <label class="sbi_radio_label" for="sb_instagram_type_hashtag"><?php _e( 'Hashtag:', 'instagram-feed' ); ?></label>
289
  <input readonly type="text" size="25" />
290
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e( 'What is this?', 'instagram-feed' ); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Hashtag</a></span>
291
+ <p class="sbi_tooltip"><?php _e( 'Display posts from a specific hashtag instead of from a user', 'instagram-feed' ); ?></p>
292
  </span>
293
 
294
  <div class="sbi_pro sbi_row">
295
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_self_likes" value="liked" <?php if($sb_instagram_type == "liked") echo "checked"; ?> />
296
+ <label class="sbi_radio_label" for="sb_instagram_type_self_likes"><?php _e( 'Liked:', 'instagram-feed' ); ?></label>
297
  <input readonly type="text" size="25" />
298
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e( 'What is this?', 'instagram-feed' ); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts that you've Liked</a></span>
299
  <p class="sbi_tooltip"><?php _e("Display posts that your user account has liked."); ?></p>
300
  </div>
301
 
302
+ <div class="sbi_pro sbi_row">
303
+ <input disabled type="radio" />
304
+ <label class="sbi_radio_label"><?php _e( 'Single:', 'instagram-feed' ); ?></label>
305
+ <input readonly type="text" size="25" />
306
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e( 'What is this?', 'instagram-feed' ); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show single posts</a></span>
307
+ <p class="sbi_tooltip"><?php _e("Display a feed comprised of specific single posts."); ?></p>
308
+ </div>
309
+
310
  <span class="sbi_pro sbi_row">
311
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_location" value="location" <?php if($sb_instagram_type == "location") echo "checked"; ?> />
312
+ <label class="sbi_radio_label" for="sb_instagram_type_location"><?php _e( 'Location:', 'instagram-feed' ); ?></label>
313
  <input readonly type="text" size="25" />
314
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e( 'What is this?', 'instagram-feed' ); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Location</a></span>
315
+ <p class="sbi_tooltip"><?php _e( 'Display posts from an Instagram location ID or location coordinates.', 'instagram-feed' ); ?></p>
316
  </span>
317
 
318
+ <span class="sbi_note" style="margin: 10px 0 0 0; display: block;"><?php _e('Separate multiple IDs using commas', 'instagram-feed' ); ?></span>
319
 
320
  </td>
321
  </tr>
347
 
348
  <p><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp; <?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=customize">Customize your Feed</a>', 'instagram-feed'); ?></p>
349
 
350
+ <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="https://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
351
 
352
 
353
  <?php } // End Configure tab ?>
357
  <?php if( $sbi_active_tab == 'customize' ) { //Start Configure tab ?>
358
 
359
  <p class="sb_instagram_contents_links" id="general">
360
+ <span><?php _e( 'Quick links:', 'instagram-feed' ); ?> </span>
361
+ <a href="#general"><?php _e( 'General', 'instagram-feed' ); ?></a>
362
+ <a href="#layout"><?php _e( 'Layout', 'instagram-feed' ); ?></a>
363
+ <a href="#photos"><?php _e( 'Photos', 'instagram-feed' ); ?></a>
364
+ <a href="#headeroptions"><?php _e( 'Header', 'instagram-feed' ); ?></a>
365
+ <a href="#loadmore"><?php _e( "'Load More' Button", 'instagram-feed' ); ?></a>
366
+ <a href="#follow"><?php _e( "'Follow' Button", 'instagram-feed' ); ?></a>
367
+ <a href="#customcss"><?php _e( 'Custom CSS', 'instagram-feed' ); ?></a>
368
+ <a href="#customjs"><?php _e( 'Custom JavaScript', 'instagram-feed' ); ?></a>
369
  </p>
370
 
371
  <input type="hidden" name="<?php echo $sb_instagram_customize_hidden_field; ?>" value="Y">
372
 
373
+ <h3><?php _e( 'General', 'instagram-feed' ); ?></h3>
374
 
375
  <table class="form-table">
376
  <tbody>
378
  <th scope="row"><label><?php _e('Width of Feed', 'instagram-feed'); ?></label><code class="sbi_shortcode"> width widthunit
379
  Eg: width=50 widthunit=%</code></th>
380
  <td>
381
+ <input name="sb_instagram_width" type="text" value="<?php echo esc_attr( $sb_instagram_width ); ?>" id="sb_instagram_width" size="4" maxlength="4" />
382
  <select name="sb_instagram_width_unit" id="sb_instagram_width_unit">
383
  <option value="px" <?php if($sb_instagram_width_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
384
  <option value="%" <?php if($sb_instagram_width_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
385
  </select>
386
  <div id="sb_instagram_width_options">
387
+ <input name="sb_instagram_feed_width_resp" type="checkbox" id="sb_instagram_feed_width_resp" <?php if($sb_instagram_feed_width_resp == true) echo "checked"; ?> /><label for="sb_instagram_feed_width_resp"><?php _e('Set to be 100% width on mobile?', 'instagram-feed'); ?></label>
388
+ <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e( 'What does this mean?', 'instagram-feed' ); ?></a>
389
+ <p class="sbi_tooltip"><?php _e("If you set a width on the feed then this will be used on mobile as well as desktop. Check this setting to set the feed width to be 100% on mobile so that it is responsive.", 'instagram-feed'); ?></p>
390
  </div>
391
  </td>
392
  </tr>
394
  <th scope="row"><label><?php _e('Height of Feed', 'instagram-feed'); ?></label><code class="sbi_shortcode"> height heightunit
395
  Eg: height=500 heightunit=px</code></th>
396
  <td>
397
+ <input name="sb_instagram_height" type="text" value="<?php echo esc_attr( $sb_instagram_height ); ?>" size="4" maxlength="4" />
398
  <select name="sb_instagram_height_unit">
399
  <option value="px" <?php if($sb_instagram_height_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
400
  <option value="%" <?php if($sb_instagram_height_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
405
  <th scope="row"><label><?php _e('Background Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> background
406
  Eg: background=d89531</code></th>
407
  <td>
408
+ <input name="sb_instagram_background" type="text" value="<?php echo esc_attr( $sb_instagram_background ); ?>" class="sbi_colorpick" />
409
  </td>
410
  </tr>
411
  </tbody>
412
  </table>
413
 
414
+ <hr id="layout" />
415
+ <h3><?php _e('Layout', 'instagram-feed'); ?></h3>
416
 
417
  <table class="form-table">
418
  <tbody>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
419
  <tr valign="top">
420
  <th scope="row"><label><?php _e('Number of Photos', 'instagram-feed'); ?></label><code class="sbi_shortcode"> num
421
  Eg: num=6</code></th>
422
  <td>
423
+ <input name="sb_instagram_num" type="text" value="<?php echo esc_attr( $sb_instagram_num ); ?>" size="4" maxlength="4" />
424
  <span class="sbi_note"><?php _e('Number of photos to show initially. Maximum of 33.', 'instagram-feed'); ?></span>
425
  &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("Using multiple IDs or hashtags?", 'instagram-feed'); ?></a>
426
  <p class="sbi_tooltip"><?php _e("If you're displaying photos from multiple User IDs or hashtags then this is the number of photos which will be displayed from each.", 'instagram-feed'); ?></p>
430
  <th scope="row"><label><?php _e('Number of Columns', 'instagram-feed'); ?></label><code class="sbi_shortcode"> cols
431
  Eg: cols=3</code></th>
432
  <td>
 
433
  <select name="sb_instagram_cols">
434
  <option value="1" <?php if($sb_instagram_cols == "1") echo 'selected="selected"' ?> ><?php _e('1', 'instagram-feed'); ?></option>
435
  <option value="2" <?php if($sb_instagram_cols == "2") echo 'selected="selected"' ?> ><?php _e('2', 'instagram-feed'); ?></option>
442
  <option value="9" <?php if($sb_instagram_cols == "9") echo 'selected="selected"' ?> ><?php _e('9', 'instagram-feed'); ?></option>
443
  <option value="10" <?php if($sb_instagram_cols == "10") echo 'selected="selected"' ?> ><?php _e('10', 'instagram-feed'); ?></option>
444
  </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
445
  </td>
446
  </tr>
447
  <tr valign="top">
448
  <th scope="row"><label><?php _e('Padding around Images', 'instagram-feed'); ?></label><code class="sbi_shortcode"> imagepadding imagepaddingunit</code></th>
449
  <td>
450
+ <input name="sb_instagram_image_padding" type="text" value="<?php echo esc_attr( $sb_instagram_image_padding ); ?>" size="4" maxlength="4" />
451
  <select name="sb_instagram_image_padding_unit">
452
  <option value="px" <?php if($sb_instagram_image_padding_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
453
  <option value="%" <?php if($sb_instagram_image_padding_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
454
  </select>
455
  </td>
456
  </tr>
 
457
  <tr valign="top">
458
  <th scope="row"><label><?php _e("Disable mobile layout", 'instagram-feed'); ?></label><code class="sbi_shortcode"> disablemobile
459
  Eg: disablemobile=true</code></th>
460
  <td>
461
  <input type="checkbox" name="sb_instagram_disable_mobile" id="sb_instagram_disable_mobile" <?php if($sb_instagram_disable_mobile == true) echo 'checked="checked"' ?> />
462
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e( 'What does this mean?', 'instagram-feed' ); ?></a>
463
  <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.", 'instagram-feed'); ?></p>
464
  </td>
465
  </tr>
468
 
469
  <?php submit_button(); ?>
470
 
471
+ <hr id="photos" />
472
+ <h3><?php _e('Photos', 'instagram-feed'); ?></h3>
473
+
474
+ <table class="form-table">
475
+ <tbody>
476
+ <tr valign="top">
477
+ <th scope="row"><label><?php _e('Sort Photos By', 'instagram-feed'); ?></label><code class="sbi_shortcode"> sortby
478
+ Eg: sortby=random</code></th>
479
+ <td>
480
+ <select name="sb_instagram_sort">
481
+ <option value="none" <?php if($sb_instagram_sort == "none") echo 'selected="selected"' ?> ><?php _e('Newest to oldest', 'instagram-feed'); ?></option>
482
+ <option value="random" <?php if($sb_instagram_sort == "random") echo 'selected="selected"' ?> ><?php _e('Random', 'instagram-feed'); ?></option>
483
+ </select>
484
+ </td>
485
+ </tr>
486
+ <tr valign="top">
487
+ <th scope="row"><label><?php _e('Image Resolution', 'instagram-feed'); ?></label><code class="sbi_shortcode"> imageres
488
+ Eg: imageres=thumb</code></th>
489
+ <td>
490
+
491
+ <select name="sb_instagram_image_res">
492
+ <option value="auto" <?php if($sb_instagram_image_res == "auto") echo 'selected="selected"' ?> ><?php _e('Auto-detect (recommended)', 'instagram-feed'); ?></option>
493
+ <option value="thumb" <?php if($sb_instagram_image_res == "thumb") echo 'selected="selected"' ?> ><?php _e('Thumbnail (150x150)', 'instagram-feed'); ?></option>
494
+ <option value="medium" <?php if($sb_instagram_image_res == "medium") echo 'selected="selected"' ?> ><?php _e('Medium (306x306)', 'instagram-feed'); ?></option>
495
+ <option value="full" <?php if($sb_instagram_image_res == "full") echo 'selected="selected"' ?> ><?php _e('Full size (640x640)', 'instagram-feed'); ?></option>
496
+ </select>
497
+
498
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e( 'What does Auto-detect mean?', 'instagram-feed'); ?></a>
499
+ <p class="sbi_tooltip"><?php _e("Auto-detect means that the plugin automatically sets the image resolution based on the size of your feed.", 'instagram-feed'); ?></p>
500
+
501
+ </td>
502
+ </tr>
503
+ </tbody>
504
+ </table>
505
+
506
+ <span><a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a></span>
507
+
508
+ <div class="sbi-pro-options">
509
+ <p class="sbi-upgrade-link">
510
+ <i class="fa fa-rocket" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/instagram-feed/" target="_blank"><?php _e('Upgrade to Pro to enable these settings', 'instagram-feed'); ?></a>
511
+ </p>
512
+ <table class="form-table">
513
+ <tbody>
514
+ <tr valign="top" class="sbi_pro">
515
+ <th scope="row"><label><?php _e('Media Type to Display'); ?></label></th>
516
+ <td>
517
+ <select name="sb_instagram_media_type" disabled>
518
+ <option value="all"><?php _e('All'); ?></option>
519
+ <option value="photos"><?php _e('Photos only'); ?></option>
520
+ <option value="videos"><?php _e('Videos only'); ?></option>
521
+ </select>
522
+ </td>
523
+ </tr>
524
+
525
+ <tr valign="top" class="sbi_pro">
526
+ <th scope="row"><label><?php _e("Enable Pop-up Lightbox", 'instagram-feed'); ?></label></th>
527
+ <td>
528
+ <input type="checkbox" name="sb_instagram_captionlinks" id="sb_instagram_captionlinks" disabled />
529
+ </td>
530
+ </tr>
531
+
532
+ <tr valign="top" class="sbi_pro">
533
+ <th scope="row"><label><?php _e("Link Posts to URL in Caption (Shoppable feed)"); ?></label></th>
534
+ <td>
535
+ <input type="checkbox" name="sb_instagram_captionlinks" id="sb_instagram_captionlinks" disabled />
536
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What will this do?"); ?></a>
537
+ <p class="sbi_tooltip"><?php _e("Checking this box will change the link for each post to any url included in the caption for that Instagram post. The lightbox will be disabled. Visit <a href='https://smashballoon.com/make-a-shoppable-feed'>this link</a> to learn how this works."); ?></p>
538
+ </td>
539
+ </tr>
540
+ </tbody>
541
+ </table>
542
+ </div>
543
+
544
+
545
+ <hr />
546
+ <h3><?php _e('Photo Hover Style'); ?></h3>
547
+
548
+ <p style="padding-bottom: 18px;">
549
+ <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Photo Hover styles</a><br />
550
+ <a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a>
551
+ </p>
552
+
553
+ <div class="sbi-pro-options" style="margin-top: -15px;">
554
+ <table class="form-table">
555
+ <tbody>
556
+ <tr valign="top" class="sbi_pro">
557
+ <th scope="row"><label><?php _e('Hover Background Color'); ?></label></th>
558
+ <td>
559
+ <input name="sb_hover_background" type="text" disabled class="sbi_colorpick" />
560
+ </td>
561
+ </tr>
562
+ <tr valign="top" class="sbi_pro">
563
+ <th scope="row"><label><?php _e('Hover Text Color'); ?></label></th>
564
+ <td>
565
+ <input name="sb_hover_text" type="text" disabled class="sbi_colorpick" />
566
+ </td>
567
+ </tr>
568
+ <tr valign="top" class="sbi_pro">
569
+ <th scope="row"><label><?php _e('Information to display'); ?></label></th>
570
+ <td>
571
+ <div>
572
+ <input name="sbi_hover_inc_username" type="checkbox" disabled />
573
+ <label for="sbi_hover_inc_username"><?php _e('Username'); ?></label>
574
+ </div>
575
+ <div>
576
+ <input name="sbi_hover_inc_icon" type="checkbox" disabled />
577
+ <label for="sbi_hover_inc_icon"><?php _e('Expand Icon'); ?></label>
578
+ </div>
579
+ <div>
580
+ <input name="sbi_hover_inc_date" type="checkbox" disabled />
581
+ <label for="sbi_hover_inc_date"><?php _e('Date'); ?></label>
582
+ </div>
583
+ <div>
584
+ <input name="sbi_hover_inc_instagram" type="checkbox" disabled />
585
+ <label for="sbi_hover_inc_instagram"><?php _e('Instagram Icon/Link'); ?></label>
586
+ </div>
587
+ <div>
588
+ <input name="sbi_hover_inc_location" type="checkbox" disabled />
589
+ <label for="sbi_hover_inc_location"><?php _e('Location'); ?></label>
590
+ </div>
591
+ <div>
592
+ <input name="sbi_hover_inc_caption" type="checkbox" disabled />
593
+ <label for="sbi_hover_inc_caption"><?php _e('Caption'); ?></label>
594
+ </div>
595
+ <div>
596
+ <input name="sbi_hover_inc_likes" type="checkbox" disabled />
597
+ <label for="sbi_hover_inc_likes"><?php _e('Like/Comment Icons'); ?></label>
598
+ </div>
599
+ </td>
600
+ </tr>
601
+
602
+ </tbody>
603
+ </table>
604
+ </div>
605
+
606
+
607
  <hr />
608
+ <h3><?php _e( 'Carousel', 'instagram-feed' ); ?></h3>
609
+ <p style="padding-bottom: 18px;">
610
+ <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Carousels</a><br />
611
+ <a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a>
612
+ </p>
613
+
614
+ <div class="sbi-pro-options" style="margin-top: -15px;">
615
+ <table class="form-table">
616
+ <tbody>
617
+ <tr valign="top" class="sbi_pro">
618
+ <th scope="row"><label><?php _e("Enable Carousel"); ?></label></th>
619
+ <td>
620
+ <input type="checkbox" disabled />
621
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
622
+ <p class="sbi_tooltip"><?php _e("Enable this setting to create a carousel slider out of your photos."); ?></p>
623
+ </td>
624
+ </tr>
625
+ <tr valign="top" class="sbi_pro">
626
+ <th scope="row"><label><?php _e("Show Navigation Arrows"); ?></label></th>
627
+ <td>
628
+ <input type="checkbox" disabled />
629
+ </td>
630
+ </tr>
631
+ <tr valign="top" class="sbi_pro">
632
+ <th scope="row"><label><?php _e("Show Pagination"); ?></label></th>
633
+ <td>
634
+ <input type="checkbox" disabled />
635
+ </td>
636
+ </tr>
637
+ <tr valign="top" class="sbi_pro">
638
+ <th scope="row"><label><?php _e("Enable Autoplay"); ?></label></th>
639
+ <td>
640
+ <input type="checkbox" disabled />
641
+ </td>
642
+ </tr>
643
+ <tr valign="top" class="sbi_pro">
644
+ <th scope="row"><label><?php _e("Interval Time"); ?></label></th>
645
+ <td>
646
+ <input name="sb_instagram_carousel_interval" type="text" disabled size="6" /><?php _e("miliseconds"); ?>
647
+ </td>
648
+ </tr>
649
+ </tbody>
650
+ </table>
651
+ </div>
652
+
653
+
654
 
655
  <hr id="headeroptions" />
656
  <h3><?php _e("Header", 'instagram-feed'); ?></h3>
663
  <input type="checkbox" name="sb_instagram_show_header" id="sb_instagram_show_header" <?php if($sb_instagram_show_header == true) echo 'checked="checked"' ?> />
664
  </td>
665
  </tr>
666
+ <tr valign="top">
667
+ <th scope="row"><label><?php _e("Show Bio Text"); ?></label><code class="sbi_shortcode"> showbio
668
+ Eg: showbio=false</code></th>
669
+ <td>
670
+ <?php $sb_instagram_show_bio = isset( $sb_instagram_show_bio ) ? $sb_instagram_show_bio : true; ?>
671
+ <input type="checkbox" name="sb_instagram_show_bio" id="sb_instagram_show_bio" <?php if($sb_instagram_show_bio == true) echo 'checked="checked"' ?> />
672
+ <span class="sbi_note"><?php _e("This only applies for User IDs with bios"); ?></span>
673
+ </td>
674
+ </tr>
675
  <tr valign="top">
676
  <th scope="row"><label><?php _e('Header Text Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> headercolor
677
  Eg: headercolor=fff</code></th>
678
  <td>
679
+ <input name="sb_instagram_header_color" type="text" value="<?php echo esc_attr( $sb_instagram_header_color ); ?>" class="sbi_colorpick" />
680
  </td>
681
  </tr>
682
  </tbody>
683
  </table>
684
 
685
+ <span><a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a></span>
686
+
687
+ <div class="sbi-pro-options">
688
+ <p class="sbi-upgrade-link">
689
+ <i class="fa fa-rocket" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/instagram-feed/" target="_blank"><?php _e('Upgrade to Pro to enable these settings', 'instagram-feed'); ?></a>
690
+ </p>
691
+ <table class="form-table">
692
+ <tbody>
693
+ <tr valign="top" class="sbi_pro">
694
+ <th scope="row"><label><?php _e('Header Style'); ?></label></th>
695
+ <td>
696
+ <select name="sb_instagram_header_style" style="float: left;" disabled>
697
+ <option value="circle"><?php _e('Circle'); ?></option>
698
+ <option value="boxed"><?php _e('Boxed'); ?></option>
699
+ </select>
700
+ <div id="sb_instagram_header_style_boxed_options">
701
+ <div class="sbi_row">
702
+ <div class="sbi_col sbi_one">
703
+ <label><?php _e('Primary Color'); ?></label>
704
+ <input name="sb_instagram_header_primary_color" type="text" class="sbi_colorpick" />
705
+ </div>
706
+ <div class="sbi_col sbi_one">
707
+ <label><?php _e('Secondary Color'); ?></label>
708
+ <input name="sb_instagram_header_secondary_color" type="text" class="sbi_colorpick" />
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </td>
713
+ </tr>
714
+ <tr valign="top" class="sbi_pro">
715
+ <th scope="row"><label><?php _e("Show Number of Followers"); ?></label></th>
716
+ <td>
717
+ <input type="checkbox" disabled />
718
+ <span class="sbi_note"><?php _e("This only applies when displaying photos from a User ID"); ?></span>
719
+ </td>
720
+ </tr>
721
+ </tbody>
722
+ </table>
723
+ </div>
724
+
725
+ <?php submit_button(); ?>
726
+
727
+
728
  <hr />
729
  <h3><?php _e("Caption", 'instagram-feed'); ?></h3>
730
+ <p style="padding-bottom: 18px;">
731
+ <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Photo Captions</a><br />
732
+ <a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a>
733
+ </p>
734
+
735
+ <div class="sbi-pro-options" style="margin-top: -15px;">
736
+ <table class="form-table">
737
+ <tbody>
738
+ <tr valign="top" class="sbi_pro">
739
+ <th scope="row"><label><?php _e("Show Caption"); ?></label></th>
740
+ <td>
741
+ <input type="checkbox" disabled />
742
+ </td>
743
+ </tr>
744
+ <tr valign="top" class="sbi_pro">
745
+ <th scope="row"><label><?php _e("Maximum Text Length"); ?></label></th>
746
+ <td>
747
+ <input disabled size="4" />Characters
748
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
749
+ <p class="sbi_tooltip"><?php _e("The number of characters of text to display in the caption. An elipsis link will be added to allow the user to reveal more text if desired."); ?></p>
750
+ </td>
751
+ </tr>
752
+ <tr valign="top" class="sbi_pro">
753
+ <th scope="row"><label><?php _e('Text Color'); ?></label></th>
754
+ <td>
755
+ <input type="text" disabled class="sbi_colorpick" />
756
+ </td>
757
+ </tr>
758
+ <tr valign="top" class="sbi_pro">
759
+ <th scope="row"><label><?php _e('Text Size'); ?></label></th>
760
+ <td>
761
+ <select name="sb_instagram_caption_size" style="width: 180px;" disabled>
762
+ <option value="inherit" ><?php _e('Inherit from theme'); ?></option>
763
+ <option value="10" ><?php _e('10px'); ?></option>
764
+ <option value="11" ><?php _e('11px'); ?></option>
765
+ <option value="12" ><?php _e('12px'); ?></option>
766
+ <option value="13" ><?php _e('13px'); ?></option>
767
+ <option value="14" ><?php _e('14px'); ?></option>
768
+ <option value="16" ><?php _e('16px'); ?></option>
769
+ <option value="18" ><?php _e('18px'); ?></option>
770
+ <option value="20" ><?php _e('20px'); ?></option>
771
+ <option value="24" ><?php _e('24px'); ?></option>
772
+ <option value="28" ><?php _e('28px'); ?></option>
773
+ <option value="32" ><?php _e('32px'); ?></option>
774
+ <option value="36" ><?php _e('36px'); ?></option>
775
+ <option value="40" ><?php _e('40px'); ?></option>
776
+ </select>
777
+ </td>
778
+ </tr>
779
+ </tbody>
780
+ </table>
781
+ </div>
782
+
783
 
784
  <hr />
785
  <h3><?php _e("Likes &amp; Comments", 'instagram-feed'); ?></h3>
786
+ <p style="padding-bottom: 18px;">
787
+ <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Likes &amp; Comments</a><br />
788
+ <a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a>
789
+ </p>
790
+
791
+ <div class="sbi-pro-options" style="margin-top: -15px;">
792
+ <table class="form-table">
793
+ <tbody>
794
+ <tr valign="top" class="sbi_pro">
795
+ <th scope="row"><label><?php _e("Show Icons"); ?></label></th>
796
+ <td>
797
+ <input type="checkbox" disabled />
798
+ </td>
799
+ </tr>
800
+ <tr valign="top" class="sbi_pro">
801
+ <th scope="row"><label><?php _e('Icon Color'); ?></label></th>
802
+ <td>
803
+ <input type="text" disabled class="sbi_colorpick" />
804
+ </td>
805
+ </tr>
806
+ <tr valign="top" class="sbi_pro">
807
+ <th scope="row"><label><?php _e('Icon Size'); ?></label></th>
808
+ <td>
809
+ <select disabled name="sb_instagram_meta_size" style="width: 180px;">
810
+ <option value="inherit"><?php _e('Inherit from theme'); ?></option>
811
+ <option value="10" ><?php _e('10px'); ?></option>
812
+ <option value="11" ><?php _e('11px'); ?></option>
813
+ <option value="12" ><?php _e('12px'); ?></option>
814
+ <option value="13" ><?php _e('13px'); ?></option>
815
+ <option value="14" ><?php _e('14px'); ?></option>
816
+ <option value="16" ><?php _e('16px'); ?></option>
817
+ <option value="18" ><?php _e('18px'); ?></option>
818
+ <option value="20" ><?php _e('20px'); ?></option>
819
+ <option value="24" ><?php _e('24px'); ?></option>
820
+ <option value="28" ><?php _e('28px'); ?></option>
821
+ <option value="32" ><?php _e('32px'); ?></option>
822
+ <option value="36" ><?php _e('36px'); ?></option>
823
+ <option value="40" ><?php _e('40px'); ?></option>
824
+ </select>
825
+ </td>
826
+ </tr>
827
+ </tbody>
828
+ </table>
829
+ </div>
830
+
831
+
832
+ <hr />
833
+ <h3><?php _e('Lightbox Comments'); ?></h3>
834
+
835
+ <p style="padding-bottom: 18px;">
836
+ <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Comments</a><br />
837
+ <a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a>
838
+ </p>
839
+
840
+ <div class="sbi-pro-options" style="margin-top: -15px;">
841
+ <table class="form-table">
842
+ <tbody>
843
+
844
+ <tr valign="top" class="sbi_pro">
845
+ <th scope="row"><label><?php _e('Show Comments in Lightbox'); ?></label></th>
846
+ <td style="padding: 5px 10px 0 10px;">
847
+ <input type="checkbox" disabled style="margin-right: 15px;" />
848
+ <input class="button-secondary" style="margin-top: -5px;" disabled value="<?php esc_attr_e( 'Clear Comment Cache' ); ?>" />
849
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
850
+ <p class="sbi_tooltip"><?php _e("This will remove the cached comments saved in the database"); ?></p>
851
+ </td>
852
+ </tr>
853
+ <tr valign="top" class="sbi_pro">
854
+ <th scope="row"><label><?php _e('Number of Comments'); ?></label></th>
855
+ <td>
856
+ <input name="sb_instagram_num_comments" type="text" disabled size="4" />
857
+ <span class="sbi_note"><?php _e('Max number of latest comments.'); ?></span>
858
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
859
+ <p class="sbi_tooltip"><?php _e("This is the maximum number of comments that will be shown in the lightbox. If there are more comments available than the number set, only the latest comments will be shown"); ?></p>
860
+ </td>
861
+ </tr>
862
+
863
+ </tbody>
864
+ </table>
865
+ </div>
866
+
867
 
868
  <hr id="loadmore" />
869
  <h3><?php _e("'Load More' Button", 'instagram-feed'); ?></h3>
880
  <th scope="row"><label><?php _e('Button Background Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> buttoncolor
881
  Eg: buttoncolor=8224e3</code></th>
882
  <td>
883
+ <input name="sb_instagram_btn_background" type="text" value="<?php echo esc_attr( $sb_instagram_btn_background ); ?>" class="sbi_colorpick" />
884
  </td>
885
  </tr>
886
  <tr valign="top">
887
  <th scope="row"><label><?php _e('Button Text Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> buttontextcolor
888
  Eg: buttontextcolor=eeee22</code></th>
889
  <td>
890
+ <input name="sb_instagram_btn_text_color" type="text" value="<?php echo esc_attr( $sb_instagram_btn_text_color ); ?>" class="sbi_colorpick" />
891
  </td>
892
  </tr>
893
  <tr valign="top">
894
  <th scope="row"><label><?php _e('Button Text', 'instagram-feed'); ?></label><code class="sbi_shortcode"> buttontext
895
  Eg: buttontext="Show more.."</code></th>
896
  <td>
897
+ <input name="sb_instagram_btn_text" type="text" value="<?php echo esc_attr( stripslashes( $sb_instagram_btn_text ) ); ?>" size="20" />
898
  </td>
899
  </tr>
900
  </tbody>
914
  </td>
915
  </tr>
916
 
 
 
 
 
 
 
 
 
 
 
917
  <tr valign="top">
918
  <th scope="row"><label><?php _e('Button Background Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> followcolor
919
  Eg: followcolor=28a1bf</code></th>
920
  <td>
921
+ <input name="sb_instagram_folow_btn_background" type="text" value="<?php echo esc_attr( $sb_instagram_folow_btn_background ); ?>" class="sbi_colorpick" />
922
  </td>
923
  </tr>
924
  <tr valign="top">
925
  <th scope="row"><label><?php _e('Button Text Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> followtextcolor
926
  Eg: followtextcolor=000</code></th>
927
  <td>
928
+ <input name="sb_instagram_follow_btn_text_color" type="text" value="<?php echo esc_attr( $sb_instagram_follow_btn_text_color ); ?>" class="sbi_colorpick" />
929
  </td>
930
  </tr>
931
  <tr valign="top">
932
  <th scope="row"><label><?php _e('Button Text', 'instagram-feed'); ?></label><code class="sbi_shortcode"> followtext
933
  Eg: followtext="Follow me"</code></th>
934
  <td>
935
+ <input name="sb_instagram_follow_btn_text" type="text" value="<?php echo esc_attr( stripslashes( $sb_instagram_follow_btn_text ) ); ?>" size="30" />
936
  </td>
937
  </tr>
938
  </tbody>
939
  </table>
940
 
941
+ <hr id="filtering" />
942
+ <h3><?php _e('Post Filtering', 'instagram-feed'); ?></h3>
943
 
944
+ <p style="padding-bottom: 18px;">
945
+ <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Post Filtering options</a><br />
946
+ <a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a>
947
+ </p>
948
 
949
+ <div class="sbi-pro-options" style="margin-top: -15px;">
950
 
951
+ <table class="form-table">
952
+ <tbody>
953
+ <tr valign="top" class="sbi_pro">
954
+ <th scope="row"><label><?php _e('Remove photos containing these words or hashtags', 'instagram-feed'); ?></label></th>
955
+ <td>
956
+ <div class="sb_instagram_apply_labels">
957
+ <p>Apply to:</p>
958
+ <input class="sb_instagram_incex_one_all" type="radio" value="all" disabled /><label>All feeds</label>
959
+ <input class="sb_instagram_incex_one_all" type="radio" value="one" disabled /><label>One feed</label>
960
+ </div>
 
 
 
 
961
 
962
+ <input disabled name="sb_instagram_exclude_words" id="sb_instagram_exclude_words" type="text" style="width: 70%;" value="" />
963
+ <br />
964
+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas', 'instagram-feed'); ?></span>
965
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e( 'What is this?', 'instagram-feed'); ?></a>
966
+ <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.", 'instagram-feed'); ?></p>
967
+ </td>
968
+ </tr>
969
+
970
+ <tr valign="top" class="sbi_pro">
971
+ <th scope="row"><label><?php _e('Show photos containing these words or hashtags', 'instagram-feed'); ?></label></th>
972
+ <td>
973
+ <div class="sb_instagram_apply_labels">
974
+ <p>Apply to:</p>
975
+ <input class="sb_instagram_incex_one_all" type="radio" value="all" disabled /><label>All feeds</label>
976
+ <input class="sb_instagram_incex_one_all" type="radio" value="one" disabled /><label>One feed</label>
977
+ </div>
978
+
979
+ <input disabled name="sb_instagram_include_words" id="sb_instagram_include_words" type="text" style="width: 70%;" value="" />
980
+ <br />
981
+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas', 'instagram-feed'); ?></span>
982
+ &nbsp;<a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e( 'What is this?', 'instagram-feed'); ?></a>
983
+ <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.", 'instagram-feed'); ?></p>
984
+ </td>
985
+ </tr>
986
+ </tbody>
987
+ </table>
988
+ </div>
989
 
990
 
991
  <hr id="moderation" />
992
  <h3><?php _e('Moderation', 'instagram-feed'); ?></h3>
 
 
 
 
 
 
 
 
 
 
 
 
993
 
994
+ <p style="padding-bottom: 18px;">
995
+ <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Moderation options</a><br />
996
+ <a href="javascript:void(0);" class="button button-secondary sbi-show-pro"><b>+</b> Show Pro Options</a>
997
+ </p>
 
 
 
 
 
 
998
 
999
+ <div class="sbi-pro-options" style="margin-top: -15px;">
1000
+ <table class="form-table">
1001
+ <tbody>
1002
+ <tr valign="top" class="sbi_pro">
1003
+ <th scope="row"><label><?php _e('Moderation Type'); ?></label></th>
1004
+ <td>
1005
+ <input class="sb_instagram_moderation_mode" checked="checked" disabled type="radio" value="visual" style="margin-top: 0;" /><label>Visual</label>
1006
+ <input class="sb_instagram_moderation_mode" disabled type="radio" value="manual" style="margin-top: 0; margin-left: 10px;"/><label>Manual</label>
1007
+
1008
+ <p class="sbi_tooltip" style="display: block;"><?php _e("<b>Visual Moderation Mode</b><br />This adds a button to each feed that will allow you to hide posts, block users, and create white lists from the front end using a visual interface. Visit <a href='https://smashballoon.com/guide-to-moderation-mode/' target='_blank'>this page</a> for details"); ?></p>
1009
+
1010
+ </td>
1011
+ </tr>
1012
+
1013
+ <tr valign="top" class="sbi_pro">
1014
+ <th scope="row"><label><?php _e('Only show posts by these users'); ?></label></th>
1015
+ <td>
1016
+ <input type="text" style="width: 70%;" disabled /><br />
1017
+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate usernames using commas'); ?></span>
1018
+
1019
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
1020
+ <p class="sbi_tooltip"><?php _e("You can use this setting to show photos only from certain users in your feed. Just enter the usernames here which you want to show. Separate multiple usernames using commas."); ?></p>
1021
+ </td>
1022
+ </tr>
1023
+ <tr valign="top" class="sbi_pro">
1024
+ <th scope="row"><label><?php _e('White lists'); ?></label></th>
1025
+ <td>
1026
+ <div class="sbi_white_list_names_wrapper">
1027
+ <?php _e("No white lists currently created"); ?>
1028
+ </div>
1029
+
1030
+ <input disabled class="button-secondary" type="submit" value="<?php esc_attr_e( 'Clear White Lists' ); ?>" />
1031
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);" style="display: inline-block; margin-top: 5px;"><?php _e("What is this?"); ?></a>
1032
+ <p class="sbi_tooltip"><?php _e("This will remove all of the white lists from the database"); ?></p>
1033
+ </td>
1034
+ </tr>
1035
+
1036
+ </tbody>
1037
+ </table>
1038
+ </div>
1039
 
1040
 
1041
 
1071
  <tr valign="top">
1072
  <th scope="row"><label><?php _e("Disable Font Awesome", 'instagram-feed'); ?></label></th>
1073
  <td>
1074
+ <input type="checkbox" name="sb_instagram_disable_awesome" id="sb_instagram_disable_awesome" <?php if($sb_instagram_disable_awesome == true) echo 'checked="checked"' ?> /> <?php _e( 'Yes', 'instagram-feed' ); ?>
1075
  </td>
1076
  </tr>
1077
  </tbody>
1083
 
1084
  <p><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp; <?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=display">Display your Feed</a>', 'instagram-feed'); ?></p>
1085
 
1086
+ <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="https://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
1087
 
1088
 
1089
  <?php } //End Customize tab ?>
1099
  <h3 style="padding-top: 10px;"><?php _e( 'Multiple Feeds', 'instagram-feed' ); ?></h3>
1100
  <p><?php _e("If you'd like to display multiple feeds then you can set different settings directly in the shortcode like so:", 'instagram-feed'); ?>
1101
  <code>[instagram-feed num=9 cols=3]</code></p>
1102
+ <p><?php _e( 'You can display as many different feeds as you like, on either the same page or on different pages, by just using the shortcode options below. For example:', 'instagram-feed' ); ?><br />
1103
  <code>[instagram-feed]</code><br />
1104
  <code>[instagram-feed id="ANOTHER_USER_ID"]</code><br />
1105
  <code>[instagram-feed id="ANOTHER_USER_ID, YET_ANOTHER_USER_ID" num=4 cols=4 showfollow=false]</code>
1256
  <td><code>[instagram-feed carouseltime=8000]</code></td>
1257
  </tr>
1258
 
 
1259
  <tr class="sbi_table_header"><td colspan=3><?php _e("Header Options", 'instagram-feed'); ?></td></tr>
1260
  <tr>
1261
  <td>showheader</td>
1262
  <td><?php _e("Whether to show the feed Header. 'true' or 'false'.", 'instagram-feed'); ?></td>
1263
  <td><code>[instagram-feed showheader=false]</code></td>
1264
  </tr>
1265
+ <tr>
1266
+ <td>showbio</td>
1267
+ <td><?php _e("Display the bio in the header. 'true' or 'false'."); ?></td>
1268
+ <td><code>[instagram-feed showbio=true]</code></td>
1269
+ </tr>
1270
  <tr>
1271
  <td>headercolor</td>
1272
  <td><?php _e("The color of the Header text. Any hex color code.", 'instagram-feed'); ?></td>
1371
  </tbody>
1372
  </table>
1373
 
1374
+ <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="https://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
1375
 
1376
  <?php } //End Display tab ?>
1377
 
1378
 
1379
  <?php if( $sbi_active_tab == 'support' ) { //Start Support tab ?>
1380
 
1381
+ <div class="sbi_support">
1382
 
1383
+ <br/>
1384
+ <h3 style="padding-bottom: 10px;">Need help?</h3>
1385
 
1386
+ <p>
1387
+ <span class="sbi-support-title"><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <a
1388
+ href="https://smashballoon.com/instagram-feed/free/"
1389
+ target="_blank"><?php _e( 'Setup Directions' ); ?></a></span>
1390
+ <?php _e( 'A step-by-step guide on how to setup and use the plugin.' ); ?>
1391
+ </p>
1392
 
1393
+ <p>
1394
+ <span class="sbi-support-title"><i class="fa fa-youtube-play" aria-hidden="true"></i>&nbsp; <a
1395
+ href="https://www.youtube.com/embed/V_fJ_vhvQXM" target="_blank"
1396
+ id="sbi-play-support-video"><?php _e( 'Watch a Video' ); ?></a></span>
1397
+ <?php _e( "Watch a short video demonstrating how to set up, customize and use the plugin.<br /><b>Please note</b> that the video shows the set up and use of the <b><a href='https://smashballoon.com/instagram-feed/' target='_blank'>PRO version</a></b> of the plugin, but the process is the same for this free version. The only difference is some of the features available." ); ?>
1398
 
1399
+ <iframe id="sbi-support-video"
1400
+ src="//www.youtube.com/embed/V_fJ_vhvQXM?theme=light&amp;showinfo=0&amp;controls=2" width="960"
1401
+ height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
1402
+ </p>
1403
 
1404
+ <p>
1405
+ <span class="sbi-support-title"><i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp; <a
1406
+ href="https://smashballoon.com/instagram-feed/support/faq/"
1407
+ target="_blank"><?php _e( 'FAQs and Docs' ); ?></a></span>
1408
+ <?php _e( 'View our expansive library of FAQs and documentation to help solve your problem as quickly as possible.' ); ?>
1409
+ </p>
1410
 
1411
+ <div class="sbi-support-faqs">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1412
 
1413
+ <ul>
1414
+ <li><b>FAQs</b></li>
1415
+ <li>&bull;&nbsp; <?php _e( '<a href="https://smashballoon.com/instagram-feed/find-instagram-user-id/" target="_blank">How to find an Instagram User ID</a>' ); ?></li>
1416
+ <li>&bull;&nbsp; <?php _e( '<a href="https://smashballoon.com/my-instagram-access-token-keep-expiring/" target="_blank">My Access Token Keeps Expiring</a>' ); ?></li>
1417
+ <li>&bull;&nbsp; <?php _e( '<a href="https://smashballoon.com/my-photos-wont-load/" target="_blank">My Instagram Feed Won\'t Load</a>' ); ?></li>
1418
+ <li style="margin-top: 8px; font-size: 12px;"><a
1419
+ href="https://smashballoon.com/instagram-feed/support/faq/" target="_blank">See All<i
1420
+ class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
1421
+ </ul>
1422
 
1423
+ <ul>
1424
+ <li><b>Documentation</b></li>
1425
+ <li>&bull;&nbsp; <?php _e( '<a href="https://smashballoon.com/instagram-feed/free" target="_blank">Installation and Configuration</a>' ); ?></li>
1426
+ <li>&bull;&nbsp; <?php _e( '<a href="https://smashballoon.com/display-multiple-instagram-feeds/" target="_blank">Displaying multiple feeds</a>' ); ?></li>
1427
+ <li>&bull;&nbsp; <?php _e( '<a href="https://smashballoon.com/instagram-feed-faq/customization/" target="_blank">Customizing your Feed</a>' ); ?></li>
1428
+ </ul>
1429
+ </div>
1430
 
1431
+ <p>
1432
+ <span class="sbi-support-title"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; <a
1433
+ href="https://smashballoon.com/instagram-feed/support/"
1434
+ target="_blank"><?php _e( 'Request Support' ); ?></a></span>
1435
+ <?php _e( 'Still need help? Submit a ticket and one of our support experts will get back to you as soon as possible.<br /><b>Important:</b> Please include your <b>System Info</b> below with all support requests.' ); ?>
1436
+ </p>
1437
+ </div>
1438
+
1439
+ <hr />
1440
+
1441
+ <h3><?php _e('System Info &nbsp; <i style="color: #666; font-size: 11px; font-weight: normal;">Click the text below to select all</i>'); ?></h3>
1442
 
 
1443
 
 
1444
 
1445
 
1446
  <?php $sbi_options = get_option('sb_instagram_settings'); ?>
1473
  echo "$key => $val\n";
1474
  }
1475
  ?>
1476
+
1477
+ ## API RESPONSE: ##
1478
+ <?php
1479
+ $url = isset( $sbi_options['sb_instagram_at'] ) ? 'https://api.instagram.com/v1/users/self/?access_token=' . $sbi_options['sb_instagram_at'] : 'no_at';
1480
+ if ( $url !== 'no_at' ) {
1481
+ $args = array(
1482
+ 'timeout' => 60,
1483
+ 'sslverify' => false
1484
+ );
1485
+ $result = wp_remote_get( $url, $args );
1486
+
1487
+ $data = json_decode( $result['body'] );
1488
+
1489
+ if ( isset( $data->data->id ) ) {
1490
+ echo 'id: ' . $data->data->id . "\n";
1491
+ echo 'username: ' . $data->data->username . "\n";
1492
+ echo 'posts: ' . $data->data->counts->media . "\n";
1493
+
1494
+ $url = 'https://api.instagram.com/v1/users/13460080?access_token=' . $sbi_options['sb_instagram_at'];
1495
+ $args = array(
1496
+ 'timeout' => 60,
1497
+ 'sslverify' => false
1498
+ );
1499
+ $search_result = wp_remote_get( $url, $args );
1500
+ $search_data = json_decode( $search_result['body'] );
1501
+
1502
+ if ( isset( $data->meta->code ) ) {
1503
+ echo "\n" . 'Instagram Response' . "\n";
1504
+ echo 'code: ' . $search_data->meta->code . "\n";
1505
+ if ( isset( $search_data->meta->error_message ) ) {
1506
+ echo 'error_message: ' . $search_data->meta->error_message . "\n";
1507
+ }
1508
+ }
1509
+
1510
+ } else {
1511
+ echo 'No id returned' . "\n";
1512
+ echo 'code: ' . $data->meta->code . "\n";
1513
+ if ( isset( $data->meta->error_message ) ) {
1514
+ echo 'error_message: ' . $data->meta->error_message . "\n";
1515
+ }
1516
+ }
1517
+
1518
+ } else {
1519
+ echo 'No Access Token';
1520
+ }?>
1521
  </textarea>
1522
 
 
1523
  <?php
1524
  } //End Support tab
1525
  ?>
1526
 
1527
 
1528
+ <div class="sbi_quickstart">
1529
+ <h3><i class="fa fa-rocket" aria-hidden="true"></i>&nbsp; Display your feed</h3>
1530
+ <p>Copy and paste this shortcode directly into the page, post or widget where you'd like to display the feed: <input type="text" value="[instagram-feed]" size="15" readonly="readonly" style="text-align: center;" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p>
1531
+ <p>Find out how to display <a href="?page=sb-instagram-feed&amp;tab=display">multiple feeds</a>.</p>
1532
+ </div>
1533
 
1534
+ <a href="https://smashballoon.com/instagram-feed/demo" target="_blank" class="sbi-pro-notice">
1535
+ <img src="<?php echo plugins_url( 'img/instagram-pro-promo.png' , __FILE__ ) ?>" alt="<?php esc_attr_e( 'Instagram Feed Pro', 'instagram-feed' ); ?>">
1536
  </a>
1537
 
1538
+ <p class="sbi_plugins_promo dashicons-before dashicons-admin-plugins"> <?php _e('Check out our other free plugins:', 'instagram-feed' ); ?> <a href="https://wordpress.org/plugins/custom-facebook-feed/" target="_blank">Facebook</a> and <a href="https://wordpress.org/plugins/custom-twitter-feeds/" target="_blank">Twitter</a>.</p>
1539
 
1540
  <div class="sbi_share_plugin">
1541
+ <h3><?php _e('Like the plugin? Help spread the word!', 'instagram-feed'); ?></h3>
1542
 
1543
  <!-- TWITTER -->
1544
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://wordpress.org/plugins/instagram-feed/" data-text="Display beautifully clean, customizable, and responsive feeds from multiple Instagram accounts" data-via="smashballoon" data-dnt="true">Tweet</a>
1583
  add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_style' );
1584
 
1585
  function sb_instagram_admin_scripts() {
1586
+ wp_enqueue_script( 'sb_instagram_admin_js', plugins_url( 'js/sb-instagram-admin.js' , __FILE__ ), array(), SBIVER );
1587
+ wp_localize_script( 'sb_instagram_admin_js', 'sbiA', array(
1588
+ 'ajax_url' => admin_url( 'admin-ajax.php' ),
1589
+ 'sbi_nonce' => wp_create_nonce( 'sbi-smash-balloon' )
1590
+ )
1591
+ );
1592
  if( !wp_script_is('jquery-ui-draggable') ) {
1593
  wp_enqueue_script(
1594
  array(
1613
 
1614
  //modify the link by unshifting the array
1615
  function sbi_add_settings_link( $links, $file ) {
1616
+ $sbi_settings_link = '<a href="' . admin_url( 'admin.php?page=sb-instagram-feed' ) . '">' . __( 'Settings', 'instagram-feed' ) . '</a>';
1617
  array_unshift( $links, $sbi_settings_link );
1618
 
1619
  return $links;
1681
  }
1682
  }
1683
 
1684
+ /**
1685
+ * Called via ajax to automatically save access token and access token secret
1686
+ * retrieved with the big blue button
1687
+ */
1688
+ function sbi_auto_save_tokens() {
1689
+ if ( current_user_can( 'edit_posts' ) ) {
1690
+ wp_cache_delete ( 'alloptions', 'options' );
1691
+
1692
+ $options = get_option( 'sb_instagram_settings', array() );
1693
+ $options['sb_instagram_at'] = isset( $_POST['access_token'] ) ? sanitize_text_field( $_POST['access_token'] ) : '';
1694
+
1695
+ update_option( 'sb_instagram_settings', $options );
1696
+ echo $_POST['access_token'];
1697
+ }
1698
+ die();
1699
+ }
1700
+ add_action( 'wp_ajax_sbi_auto_save_tokens', 'sbi_auto_save_tokens' );
1701
+
1702
  // variables to define certain terms
1703
  $transient = 'instagram_feed_rating_notice_waiting';
1704
  $option = 'sbi_rating_notice';
1712
  if ( get_transient( $transient ) !== 'waiting' && $notice_status !== 'dismissed' ) {
1713
  add_action( 'admin_notices', 'sbi_rating_notice_html' );
1714
  }
 
 
 
instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Instagram Feed
4
  Plugin URI: https://smashballoon.com/instagram-feed
5
  Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
- Version: 1.4.9
7
  Author: Smash Balloon
8
  Author URI: https://smashballoon.com/
9
  License: GPLv2 or later
@@ -23,7 +23,7 @@ along with this program; if not, write to the Free Software
23
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
24
  */
25
 
26
- define( 'SBIVER', '1.4.9' );
27
 
28
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
29
  //Include admin
@@ -33,7 +33,6 @@ include dirname( __FILE__ ) .'/instagram-feed-admin.php';
33
  add_shortcode('instagram-feed', 'display_instagram');
34
  function display_instagram($atts, $content = null) {
35
 
36
-
37
  /******************* SHORTCODE OPTIONS ********************/
38
 
39
  $options = get_option('sb_instagram_settings');
@@ -64,6 +63,7 @@ function display_instagram($atts, $content = null) {
64
  'followtextcolor' => isset($options[ 'sb_instagram_follow_btn_text_color' ]) ? $options[ 'sb_instagram_follow_btn_text_color' ] : '',
65
  'followtext' => isset($options[ 'sb_instagram_follow_btn_text' ]) ? $options[ 'sb_instagram_follow_btn_text' ] : '',
66
  'showheader' => isset($options[ 'sb_instagram_show_header' ]) ? $options[ 'sb_instagram_show_header' ] : '',
 
67
  'headercolor' => isset($options[ 'sb_instagram_header_color' ]) ? $options[ 'sb_instagram_header_color' ] : '',
68
  'class' => '',
69
  'ajaxtheme' => isset($options[ 'sb_instagram_ajax_theme' ]) ? $options[ 'sb_instagram_ajax_theme' ] : ''
@@ -75,6 +75,12 @@ function display_instagram($atts, $content = null) {
75
  //User ID
76
  $sb_instagram_user_id = trim($atts['id']);
77
 
 
 
 
 
 
 
78
  //Container styles
79
  $sb_instagram_width = $atts['width'];
80
  $sb_instagram_width_unit = $atts['widthunit'];
@@ -106,6 +112,16 @@ function display_instagram($atts, $content = null) {
106
  if( $atts[ 'showheader' ] === 'false' ) $sb_instagram_show_header = false;
107
  $sb_instagram_header_color = str_replace('#', '', $atts['headercolor']);
108
 
 
 
 
 
 
 
 
 
 
 
109
  //Load more button
110
  $sb_instagram_show_btn = $atts['showbutton'];
111
  ( $sb_instagram_show_btn == 'on' || $sb_instagram_show_btn == 'true' || $sb_instagram_show_btn == true ) ? $sb_instagram_show_btn = true : $sb_instagram_show_btn = false;
@@ -124,14 +140,13 @@ function display_instagram($atts, $content = null) {
124
  if( $atts[ 'showfollow' ] === 'false' ) $sb_instagram_show_follow_btn = false;
125
  $sb_instagram_follow_btn_background = str_replace('#', '', $atts['followcolor']);
126
  $sb_instagram_follow_btn_text_color = str_replace('#', '', $atts['followtextcolor']);
127
- $sb_instagram_follow_btn_text = $atts['followtext'];
128
  //Follow button styles
129
  $sb_instagram_follow_btn_styles = 'style="';
130
  if ( !empty($sb_instagram_follow_btn_background) ) $sb_instagram_follow_btn_styles .= 'background: #'.$sb_instagram_follow_btn_background.'; ';
131
  if ( !empty($sb_instagram_follow_btn_text_color) ) $sb_instagram_follow_btn_styles .= 'color: #'.$sb_instagram_follow_btn_text_color.';';
132
  $sb_instagram_follow_btn_styles .= '"';
133
  //Follow button HTML
134
- $sb_instagram_follow_btn_html = '<div class="sbi_follow_btn"><a href="http://instagram.com/" '.$sb_instagram_follow_btn_styles.' target="_blank"><i class="fa fa-instagram"></i>'.$sb_instagram_follow_btn_text.'</a></div>';
135
 
136
 
137
  //Mobile
@@ -154,7 +169,7 @@ function display_instagram($atts, $content = null) {
154
  if ( !empty($sb_instagram_height) ) $sb_instagram_content .= ' sbi_fixed_height ';
155
  $sb_instagram_content .= ' sbi_col_' . trim($sb_instagram_cols);
156
  if ( $sb_instagram_width_resp ) $sb_instagram_content .= ' sbi_width_resp';
157
- $sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '" data-cols="' . trim($sb_instagram_cols) . '" data-options=\'{&quot;sortby&quot;: &quot;'.$atts['sortby'].'&quot;, &quot;headercolor&quot;: &quot;'.$sb_instagram_header_color.'&quot;, &quot;imagepadding&quot;: &quot;'.$sb_instagram_image_padding.'&quot;}\'>';
158
 
159
  //Header
160
  if( $sb_instagram_show_header ) $sb_instagram_content .= '<div class="sb_instagram_header" style="padding: '.(2*intval($sb_instagram_image_padding)) . $sb_instagram_image_padding_unit .'; padding-bottom: 0;"></div>';
@@ -165,11 +180,11 @@ function display_instagram($atts, $content = null) {
165
  //Error messages
166
  $sb_instagram_error = false;
167
  if( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ){
168
- $sb_instagram_content .= '<div class="sb_instagram_error"><p>Please enter a User ID on the Instagram Feed plugin Settings page</p></div>';
169
  $sb_instagram_error = true;
170
  }
171
  if( empty($options[ 'sb_instagram_at' ]) || !isset($options[ 'sb_instagram_at' ]) ){
172
- $sb_instagram_content .= '<div class="sb_instagram_error"><p>Please enter an Access Token on the Instagram Feed plugin Settings page</p></div>';
173
  $sb_instagram_error = true;
174
  }
175
 
@@ -178,11 +193,12 @@ function display_instagram($atts, $content = null) {
178
 
179
  //Load section
180
  $sb_instagram_content .= '</div><div id="sbi_load"';
181
- if($sb_instagram_image_padding == 0 || !isset($sb_instagram_image_padding)) $sb_instagram_content .= ' style="padding-top: 5px"';
 
182
  $sb_instagram_content .= '>';
183
 
184
  //Load More button
185
- if( $sb_instagram_show_btn && !$sb_instagram_error ) $sb_instagram_content .= '<a class="sbi_load_btn" href="javascript:void(0);" '.$sb_instagram_button_styles.'>'.$atts['buttontext'].'</a>';
186
 
187
  //Follow button
188
  if( $sb_instagram_show_follow_btn && !$sb_instagram_error ) $sb_instagram_content .= $sb_instagram_follow_btn_html;
@@ -216,7 +232,7 @@ function sb_instagram_styles_enqueue() {
216
 
217
  $options = get_option('sb_instagram_settings');
218
  if(isset($options['sb_instagram_disable_awesome'])){
219
- if( !$options['sb_instagram_disable_awesome'] || !isset($options['sb_instagram_disable_awesome']) ) wp_enqueue_style( 'sb_instagram_icons', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', array(), '4.6.3' );
220
  }
221
 
222
  }
@@ -301,12 +317,32 @@ function sb_instagram_custom_js() {
301
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
302
  }
303
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
304
  //Run function on plugin activate
305
  function sb_instagram_activate() {
306
  $options = get_option('sb_instagram_settings');
307
  $options[ 'sb_instagram_show_btn' ] = true;
308
  $options[ 'sb_instagram_show_header' ] = true;
309
- $options[ 'sb_instagram_show_follow_btn' ] = true;
310
  update_option( 'sb_instagram_settings', $options );
311
  }
312
  register_activation_hook( __FILE__, 'sb_instagram_activate' );
@@ -326,5 +362,3 @@ function sb_instagram_uninstall()
326
  delete_option( 'sb_instagram_settings' );
327
  }
328
  register_uninstall_hook( __FILE__, 'sb_instagram_uninstall' );
329
-
330
- ?>
3
  Plugin Name: Instagram Feed
4
  Plugin URI: https://smashballoon.com/instagram-feed
5
  Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
+ Version: 1.5
7
  Author: Smash Balloon
8
  Author URI: https://smashballoon.com/
9
  License: GPLv2 or later
23
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
24
  */
25
 
26
+ define( 'SBIVER', '1.5' );
27
 
28
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
29
  //Include admin
33
  add_shortcode('instagram-feed', 'display_instagram');
34
  function display_instagram($atts, $content = null) {
35
 
 
36
  /******************* SHORTCODE OPTIONS ********************/
37
 
38
  $options = get_option('sb_instagram_settings');
63
  'followtextcolor' => isset($options[ 'sb_instagram_follow_btn_text_color' ]) ? $options[ 'sb_instagram_follow_btn_text_color' ] : '',
64
  'followtext' => isset($options[ 'sb_instagram_follow_btn_text' ]) ? $options[ 'sb_instagram_follow_btn_text' ] : '',
65
  'showheader' => isset($options[ 'sb_instagram_show_header' ]) ? $options[ 'sb_instagram_show_header' ] : '',
66
+ 'showbio' => isset($options[ 'sb_instagram_show_bio' ]) ? $options[ 'sb_instagram_show_bio' ] : '',
67
  'headercolor' => isset($options[ 'sb_instagram_header_color' ]) ? $options[ 'sb_instagram_header_color' ] : '',
68
  'class' => '',
69
  'ajaxtheme' => isset($options[ 'sb_instagram_ajax_theme' ]) ? $options[ 'sb_instagram_ajax_theme' ] : ''
75
  //User ID
76
  $sb_instagram_user_id = trim($atts['id']);
77
 
78
+ if ( empty( $sb_instagram_user_id ) ) {
79
+ $sb_instagram_settings = get_option( 'sb_instagram_settings' );
80
+ $at_arr = isset( $sb_instagram_settings[ 'sb_instagram_at' ] ) ? explode( '.', trim( $sb_instagram_settings[ 'sb_instagram_at' ] ), 2) : array();
81
+ $sb_instagram_user_id = $at_arr[0];
82
+ }
83
+
84
  //Container styles
85
  $sb_instagram_width = $atts['width'];
86
  $sb_instagram_width_unit = $atts['widthunit'];
112
  if( $atts[ 'showheader' ] === 'false' ) $sb_instagram_show_header = false;
113
  $sb_instagram_header_color = str_replace('#', '', $atts['headercolor']);
114
 
115
+ $sb_instagram_show_bio = $atts['showbio'];
116
+ ( $sb_instagram_show_bio == 'on' || $sb_instagram_show_bio == 'true' || $sb_instagram_show_bio ) ? $sb_instagram_show_bio = 'true' : $sb_instagram_show_bio = 'false';
117
+ if( $atts[ 'showbio' ] === 'false' ) $sb_instagram_show_bio = false;
118
+
119
+ // button text
120
+ $sb_instagram_follow_btn_text = __( $atts['followtext'], 'instagram-feed' );
121
+ $sb_instagram_load_btn_text = __( $atts['buttontext'], 'instagram-feed' );
122
+
123
+ //As this is a new option in the update then set it to be true if it doesn't exist yet
124
+ if ( !array_key_exists( 'sb_instagram_show_bio', $options ) ) $sb_instagram_show_bio = 'true';
125
  //Load more button
126
  $sb_instagram_show_btn = $atts['showbutton'];
127
  ( $sb_instagram_show_btn == 'on' || $sb_instagram_show_btn == 'true' || $sb_instagram_show_btn == true ) ? $sb_instagram_show_btn = true : $sb_instagram_show_btn = false;
140
  if( $atts[ 'showfollow' ] === 'false' ) $sb_instagram_show_follow_btn = false;
141
  $sb_instagram_follow_btn_background = str_replace('#', '', $atts['followcolor']);
142
  $sb_instagram_follow_btn_text_color = str_replace('#', '', $atts['followtextcolor']);
 
143
  //Follow button styles
144
  $sb_instagram_follow_btn_styles = 'style="';
145
  if ( !empty($sb_instagram_follow_btn_background) ) $sb_instagram_follow_btn_styles .= 'background: #'.$sb_instagram_follow_btn_background.'; ';
146
  if ( !empty($sb_instagram_follow_btn_text_color) ) $sb_instagram_follow_btn_styles .= 'color: #'.$sb_instagram_follow_btn_text_color.';';
147
  $sb_instagram_follow_btn_styles .= '"';
148
  //Follow button HTML
149
+ $sb_instagram_follow_btn_html = '<div class="sbi_follow_btn"><a href="https://instagram.com/" '.$sb_instagram_follow_btn_styles.' target="_blank"><i class="fa fa-instagram"></i>'.esc_html( stripslashes( $sb_instagram_follow_btn_text ) ).'</a></div>';
150
 
151
 
152
  //Mobile
169
  if ( !empty($sb_instagram_height) ) $sb_instagram_content .= ' sbi_fixed_height ';
170
  $sb_instagram_content .= ' sbi_col_' . trim($sb_instagram_cols);
171
  if ( $sb_instagram_width_resp ) $sb_instagram_content .= ' sbi_width_resp';
172
+ $sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '" data-cols="' . trim($sb_instagram_cols) . '" data-options=\'{&quot;sortby&quot;: &quot;'.$atts['sortby'].'&quot;, &quot;showbio&quot;: &quot;'.$sb_instagram_show_bio.'&quot;, &quot;headercolor&quot;: &quot;'.$sb_instagram_header_color.'&quot;, &quot;imagepadding&quot;: &quot;'.$sb_instagram_image_padding.'&quot;}\'>';
173
 
174
  //Header
175
  if( $sb_instagram_show_header ) $sb_instagram_content .= '<div class="sb_instagram_header" style="padding: '.(2*intval($sb_instagram_image_padding)) . $sb_instagram_image_padding_unit .'; padding-bottom: 0;"></div>';
180
  //Error messages
181
  $sb_instagram_error = false;
182
  if( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ){
183
+ $sb_instagram_content .= '<div class="sb_instagram_error"><p>' . __( 'Please enter a User ID on the Instagram Feed plugin Settings page.', 'instagram-feed' ) . '</p></div>';
184
  $sb_instagram_error = true;
185
  }
186
  if( empty($options[ 'sb_instagram_at' ]) || !isset($options[ 'sb_instagram_at' ]) ){
187
+ $sb_instagram_content .= '<div class="sb_instagram_error"><p>' . __( 'Please enter an Access Token on the Instagram Feed plugin Settings page.', 'instagram-feed' ) . '</p></div>';
188
  $sb_instagram_error = true;
189
  }
190
 
193
 
194
  //Load section
195
  $sb_instagram_content .= '</div><div id="sbi_load"';
196
+
197
+ if(($sb_instagram_image_padding == 0 || !isset($sb_instagram_image_padding)) && ($sb_instagram_show_btn || $sb_instagram_show_follow_btn)) $sb_instagram_content .= ' style="padding-top: 5px"';
198
  $sb_instagram_content .= '>';
199
 
200
  //Load More button
201
+ if( $sb_instagram_show_btn && !$sb_instagram_error ) $sb_instagram_content .= '<a class="sbi_load_btn" href="javascript:void(0);" '.$sb_instagram_button_styles.'>' . esc_html( stripslashes( $sb_instagram_load_btn_text ) ).'</a>';
202
 
203
  //Follow button
204
  if( $sb_instagram_show_follow_btn && !$sb_instagram_error ) $sb_instagram_content .= $sb_instagram_follow_btn_html;
232
 
233
  $options = get_option('sb_instagram_settings');
234
  if(isset($options['sb_instagram_disable_awesome'])){
235
+ if( !$options['sb_instagram_disable_awesome'] || !isset($options['sb_instagram_disable_awesome']) ) wp_enqueue_style( 'sb-font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
236
  }
237
 
238
  }
317
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
318
  }
319
 
320
+ if ( ! function_exists( 'sb_remove_style_version' ) ) {
321
+ function sb_remove_style_version( $src, $handle ){
322
+
323
+ if ( $handle === 'sb-font-awesome' ) {
324
+ $parts = explode( '?ver', $src );
325
+ return $parts[0];
326
+ } else {
327
+ return $src;
328
+ }
329
+
330
+ }
331
+ add_filter( 'style_loader_src', 'sb_remove_style_version', 15, 2 );
332
+ }
333
+
334
+ // Load plugin textdomain
335
+ add_action( 'init', 'sb_instagram_load_textdomain' );
336
+ function sb_instagram_load_textdomain() {
337
+ load_plugin_textdomain('instagram-feed', false, basename( dirname(__FILE__) ) . '/languages');
338
+ }
339
+
340
  //Run function on plugin activate
341
  function sb_instagram_activate() {
342
  $options = get_option('sb_instagram_settings');
343
  $options[ 'sb_instagram_show_btn' ] = true;
344
  $options[ 'sb_instagram_show_header' ] = true;
345
+ $options[ 'sb_instagram_show_follow_btn' ] = true;
346
  update_option( 'sb_instagram_settings', $options );
347
  }
348
  register_activation_hook( __FILE__, 'sb_instagram_activate' );
362
  delete_option( 'sb_instagram_settings' );
363
  }
364
  register_uninstall_hook( __FILE__, 'sb_instagram_uninstall' );
 
 
js/sb-instagram-admin.js CHANGED
@@ -2,12 +2,43 @@ jQuery(document).ready(function($) {
2
 
3
  //Autofill the token and id
4
  var hash = window.location.hash,
5
- token = hash.substring(14),
6
- id = token.split('.')[0];
7
- //If there's a hash then autofill the token and id
8
- if(hash){
9
- $('#sbi_config').append('<div id="sbi_config_info"><p><b>Access Token: </b><input type="text" size=58 readonly value="'+token+'" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p><p><b>User ID: </b><input type="text" size=12 readonly value="'+id+'" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p><p><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp; <b><span style="color: red;">Important:</span> Copy and paste</b> these into the fields below and click <b>"Save Changes"</b>.</p></div>');
10
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
 
12
  //Tooltips
13
  jQuery('#sbi_admin .sbi_tooltip_link').click(function(){
@@ -86,10 +117,14 @@ jQuery(document).ready(function($) {
86
  }
87
  });
88
 
89
- //Support tab show video
90
- jQuery('#sbi-play-support-video').on('click', function(e){
91
- e.preventDefault();
92
- jQuery('#sbi-support-video').show().attr('src', jQuery('#sbi-support-video').attr('src')+'&amp;autoplay=1' );
93
- });
 
 
 
 
94
 
95
  });
2
 
3
  //Autofill the token and id
4
  var hash = window.location.hash,
5
+ token = hash.substring(14),
6
+ id = token.split('.')[0];
7
+
8
+ function sbSaveToken(token) {
9
+ jQuery.ajax({
10
+ url: sbiA.ajax_url,
11
+ type: 'post',
12
+ data: {
13
+ action: 'sbi_auto_save_tokens',
14
+ access_token: token,
15
+ just_tokens: true
16
+ },
17
+ success: function (data) {
18
+ jQuery('.sb_get_token').append('<span class="sbi-success"><i class="fa fa-check-circle"></i> saved</span>');
19
+ jQuery('#sb_instagram_at').after('<span class="sbi-success"><i class="fa fa-check-circle"></i> saved</span>');
20
+ }
21
+ });
22
+ }
23
+ //If there's a hash then autofill the token and id
24
+ if(hash && !jQuery('#sbi_just_saved').length){
25
+ //$('#sbi_config').append('<div id="sbi_config_info"><p><b>Access Token: </b><input type="text" size=58 readonly value="'+token+'" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p><p><b>User ID: </b><input type="text" size=12 readonly value="'+id+'" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p><p><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp; <b><span style="color: red;">Important:</span> Copy and paste</b> these into the fields below and click <b>"Save Changes"</b>.</p></div>');
26
+ $('#sbi_config').append('<div id="sbi_config_info"><p class="sb_get_token"><b>Access Token: </b><input type="text" size=58 readonly value="'+token+'" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p><p><b>User ID: </b><input type="text" size=12 readonly value="'+id+'" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p></div>');
27
+ if(jQuery('#sb_instagram_at').val() == '' && token.length > 40) {
28
+ jQuery('#sb_instagram_at').val(token);
29
+ sbSaveToken(token);
30
+ } else {
31
+ jQuery('.sb_get_token').append('<p class="submit"><input type="submit" name="submit" id="submit" class="button button-primary" value="Use This Token"></p>');
32
+ }
33
+
34
+ }
35
+
36
+ $('.sb_get_token #submit').click(function(event) {
37
+ event.preventDefault();
38
+ $(this).closest('.submit').fadeOut();
39
+ jQuery('#sb_instagram_at').val(token);
40
+ sbSaveToken(token);
41
+ });
42
 
43
  //Tooltips
44
  jQuery('#sbi_admin .sbi_tooltip_link').click(function(){
117
  }
118
  });
119
 
120
+ //Support tab show video
121
+ jQuery('#sbi-play-support-video').on('click', function(e){
122
+ e.preventDefault();
123
+ jQuery('#sbi-support-video').show().attr('src', jQuery('#sbi-support-video').attr('src')+'&amp;autoplay=1' );
124
+ });
125
+
126
+ jQuery('#sbi_admin .sbi-show-pro').on('click', function(){
127
+ jQuery(this).parent().next('.sbi-pro-options').toggle();
128
+ });
129
 
130
  });
js/sb-instagram.js CHANGED
@@ -10,25 +10,33 @@ if(!sbi_js_exists){
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
  function sbi_init(){
 
 
13
 
14
- jQuery('#sb_instagram.sbi').each(function(){
15
 
16
  var $self = jQuery(this),
17
  $target = $self.find('#sbi_images'),
18
  $loadBtn = $self.find("#sbi_load .sbi_load_btn"),
19
  imgRes = 'standard_resolution',
20
  cols = parseInt( this.getAttribute('data-cols'), 10 ),
21
- num = this.getAttribute('data-num'),
22
  //Convert styles JSON string to an object
23
  feedOptions = JSON.parse( this.getAttribute('data-options') ),
24
  getType = 'user',
25
  sortby = 'none',
26
  user_id = this.getAttribute('data-id'),
27
  num = this.getAttribute('data-num'),
28
- posts_arr = [],
29
  $header = '',
30
  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.
31
 
 
 
 
 
 
 
 
 
32
  if( feedOptions.sortby !== '' ) sortby = feedOptions.sortby;
33
 
34
  switch( this.getAttribute('data-res') ) {
@@ -83,27 +91,32 @@ if(!sbi_js_exists){
83
  url: sbi_page_url,
84
  dataType: "jsonp",
85
  success: function(data) {
86
- $header = '<a href="http://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link">';
87
- $header += '<div class="sbi_header_text">';
88
- $header += '<h3 ' + headerStyles;
89
- if( data.data.bio.length == 0 ) $header += ' class="sbi_no_bio"';
90
- $header += '>@'+data.data.username+'</h3>';
91
- if( data.data.bio.length ) $header += '<p class="sbi_bio" '+headerStyles+'>'+data.data.bio+'</p>';
92
- $header += '</div>';
93
- $header += '<div class="sbi_header_img">';
94
- $header += '<div class="sbi_header_img_hover"><i></i></div>';
95
- $header += '<img src="'+data.data.profile_picture+'" alt="'+data.data.full_name+'" width="50" height="50">';
96
- $header += '</div>';
97
- $header += '</a>';
98
- //Add the header
99
- $self.find('.sb_instagram_header').prepend( $header );
100
- //Change the URL of the follow button
101
- if( $self.find('.sbi_follow_btn').length ) $self.find('.sbi_follow_btn a').attr('href', 'http://instagram.com/' + data.data.username )
 
 
 
 
102
  }
103
  });
104
 
105
  //Loop through User IDs
106
  jQuery.each( looparray, function( index, entry ) {
 
107
 
108
  var userFeed = new instagramfeed({
109
  target: $target,
@@ -277,18 +290,35 @@ if(!sbi_js_exists){
277
  }, // End 'after' function
278
  error: function(data) {
279
  var sbiErrorMsg = '',
280
- sbiErrorDir = '';
 
281
 
282
- if( data.indexOf('access_token') > -1 ){
283
- sbiErrorMsg += '<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';
284
  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.<br />If you continue to have an issue with your Access Token then please see <a href='https://smashballoon.com/my-instagram-access-token-keep-expiring/' target='_blank'>this FAQ</a> for more information.";
285
- } else if( data.indexOf('user does not exist') > -1 ){
286
- sbiErrorMsg += '<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';
287
- 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>";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
288
  }
289
-
290
- //Add the error message to the page unless the user is displaying multiple ids or hashtags
291
- 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>');
292
  }
293
  });
294
 
@@ -299,7 +329,6 @@ if(!sbi_js_exists){
299
  userFeed.run();
300
 
301
  }); //End User ID array loop
302
-
303
 
304
  });
305
 
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
  function sbi_init(){
13
+ // used to track multiple feeds on the page
14
+ window.sbiFeedMeta = {};
15
 
16
+ jQuery('#sb_instagram.sbi').each(function($i){
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
  //Convert styles JSON string to an object
24
  feedOptions = JSON.parse( this.getAttribute('data-options') ),
25
  getType = 'user',
26
  sortby = 'none',
27
  user_id = this.getAttribute('data-id'),
28
  num = this.getAttribute('data-num'),
 
29
  $header = '',
30
  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.
31
 
32
+ jQuery(this).attr('data-sbi-index', $i);
33
+ // setting up some global objects to keep track of various statuses used for the caching system
34
+ feedOptions.feedIndex = $i;
35
+ window.sbiFeedMeta[$i] = {
36
+ 'error' : {},
37
+ 'idsInFeed' : []
38
+ };
39
+
40
  if( feedOptions.sortby !== '' ) sortby = feedOptions.sortby;
41
 
42
  switch( this.getAttribute('data-res') ) {
91
  url: sbi_page_url,
92
  dataType: "jsonp",
93
  success: function(data) {
94
+ var sbiErrorResponse = data.meta.error_message;
95
+ if (typeof sbiErrorResponse === 'undefined') {
96
+ $header = '<a href="https://instagram.com/' + data.data.username + '" target="_blank" title="@' + data.data.username + '" class="sbi_header_link">';
97
+ $header += '<div class="sbi_header_text">';
98
+ $header += '<h3 ' + headerStyles;
99
+ if (data.data.bio.length == 0 || feedOptions.showbio !== "true") $header += ' class="sbi_no_bio"';
100
+ $header += '>@' + data.data.username + '</h3>';
101
+ if (data.data.bio.length && feedOptions.showbio === "true") $header += '<p class="sbi_bio" ' + headerStyles + '>' + data.data.bio + '</p>';
102
+ $header += '</div>';
103
+ $header += '<div class="sbi_header_img">';
104
+ $header += '<div class="sbi_header_img_hover"><i></i></div>';
105
+ $header += '<img src="' + data.data.profile_picture + '" alt="' + data.data.full_name + '" width="50" height="50">';
106
+ $header += '</div>';
107
+ $header += '</a>';
108
+ //Add the header
109
+ $self.find('.sb_instagram_header').prepend($header);
110
+ //Change the URL of the follow button
111
+ if ($self.find('.sbi_follow_btn').length) $self.find('.sbi_follow_btn a').attr('href', 'https://instagram.com/' + data.data.username)
112
+
113
+ }
114
  }
115
  });
116
 
117
  //Loop through User IDs
118
  jQuery.each( looparray, function( index, entry ) {
119
+ window.sbiFeedMeta[$i].idsInFeed.push(entry);
120
 
121
  var userFeed = new instagramfeed({
122
  target: $target,
290
  }, // End 'after' function
291
  error: function(data) {
292
  var sbiErrorMsg = '',
293
+ sbiErrorDir = '',
294
+ sbiErrorResponse = data;
295
 
296
+ if( sbiErrorResponse.indexOf('access_token') > -1 ){
297
+ sbiErrorMsg += '<p><b>Error: Access Token is not valid or has expired</b><br /><span>This error message is only visible to WordPress admins</span>';
298
  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.<br />If you continue to have an issue with your Access Token then please see <a href='https://smashballoon.com/my-instagram-access-token-keep-expiring/' target='_blank'>this FAQ</a> for more information.";
299
+ jQuery('#sb_instagram').empty().append( '<p style="text-align: center;">Unable to show Instagram photos</p><div id="sbi_mod_error">' + sbiErrorMsg + sbiErrorDir + '</div>');
300
+ return;
301
+ } else if( sbiErrorResponse.indexOf('user does not exist') > -1 || sbiErrorResponse.indexOf('you cannot view this resource') > -1 ){
302
+ window.sbiFeedMeta[$i].error = {
303
+ errorMsg : '<p><b>Error: User ID <span class="sbiErrorIds">'+window.sbiFeedMeta[$i].idsInFeed[index]+'</span> does not exist, is invalid, or is private</b><br /><span>This error is only visible to WordPress admins</span>',
304
+ errorDir : "<p>Please double check the Instagram User ID that you are using and ensure that it is valid and not from a private account. To find your User ID simply enter your Instagram user name into this <a href='https://smashballoon.com/instagram-feed/find-instagram-user-id/' target='_blank'>tool</a>.</p>"
305
+ };
306
+ if (!$self.find('#sbi_mod_error').length) {
307
+ $self.prepend('<div id="sbi_mod_error">'+window.sbiFeedMeta[$i].error.errorMsg+window.sbiFeedMeta[$i].error.errorDir+'</div>');
308
+ } else if ($self.find('.sbiErrorIds').text().indexOf(window.sbiFeedMeta[$i].idsInFeed[index]) == -1) {
309
+ $self.find('.sbiErrorIds').append(','+window.sbiFeedMeta[$i].idsInFeed[index]);
310
+ }
311
+ } else if (sbiErrorResponse.indexOf('No images were returned') > -1) {
312
+ window.sbiFeedMeta[$i].error = {
313
+ errorMsg : '<p><b>Error: User ID <span class="sbiErrorNone">'+window.sbiFeedMeta[$i].idsInFeed[index]+'</span> has no posts</b><br /><span>This error is only visible to WordPress admins</span>',
314
+ errorDir : "<p>If you are the owner of this account, make a post on Instagram to see it in your feed.</p>"
315
+ };
316
+ if (!$self.find('#sbi_mod_error.sbi_error_none').length) {
317
+ $self.prepend('<div id="sbi_mod_error" class="sbi_error_none">'+window.sbiFeedMeta[$i].error.errorMsg+window.sbiFeedMeta[$i].error.errorDir+'</div>');
318
+ } else if ($self.find('.sbiErrorNone').text().indexOf(window.sbiFeedMeta[$i].idsInFeed[index]) == -1) {
319
+ $self.find('.sbiErrorNone').append(','+window.sbiFeedMeta[$i].idsInFeed[index]);
320
+ }
321
  }
 
 
 
322
  }
323
  });
324
 
329
  userFeed.run();
330
 
331
  }); //End User ID array loop
 
332
 
333
  });
334
 
js/sb-instagram.min.js CHANGED
@@ -1,14 +1,13 @@
1
  var sbi_js_exists=(typeof sbi_js_exists!=='undefined')?!0:!1;if(!sbi_js_exists){(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);(function(){"use strict";var e=Array.prototype.slice;try{e.call(document.documentElement)}catch(t){Array.prototype.slice=function(t,n){n=typeof n!=="undefined"?n:this.length;if(Object.prototype.toString.call(this)==="[object Array]"){return e.call(this,t,n)}var r,i=[],s,o=this.length;var u=t||0;u=u>=0?u:o+u;var a=n?n:o;if(n<0){a=o+n}s=a-u;if(s>0){i=new Array(s);if(this.charAt){for(r=0;r<s;r++){i[r]=this.charAt(u+r)}}else{for(r=0;r<s;r++){i[r]=this[u+r]}}}return i}}})()
2
- 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}}
3
- function sbi_init(){jQuery('#sb_instagram.sbi').each(function(){var $self=jQuery(this),$target=$self.find('#sbi_images'),$loadBtn=$self.find("#sbi_load .sbi_load_btn"),imgRes='standard_resolution',cols=parseInt(this.getAttribute('data-cols'),10),num=this.getAttribute('data-num'),feedOptions=JSON.parse(this.getAttribute('data-options')),getType='user',sortby='none',user_id=this.getAttribute('data-id'),num=this.getAttribute('data-num'),posts_arr=[],$header='',morePosts=[];if(feedOptions.sortby!=='')sortby=feedOptions.sortby;switch(this.getAttribute('data-res')){case 'auto':var feedWidth=$self.innerWidth(),colWidth=$self.innerWidth()/cols;var sbiWindowWidth=jQuery(window).width();if(sbiWindowWidth<640){if(feedWidth<640&&$self.is('.sbi_col_3, .sbi_col_4, .sbi_col_5, .sbi_col_6'))colWidth=300;if(feedWidth<640&&$self.is('.sbi_col_7, .sbi_col_8, .sbi_col_9, .sbi_col_10'))colWidth=100;if((feedWidth>320&&feedWidth<480)&&sbiWindowWidth<480)colWidth=480;if(feedWidth<320&&sbiWindowWidth<480)colWidth=300}
4
- if(colWidth<150){imgRes='thumbnail'}else if(colWidth<320){imgRes='low_resolution'}else{imgRes='standard_resolution'}
5
- if(feedWidth<=100)imgRes='low_resolution';break;case 'thumb':imgRes='thumbnail';break;case 'medium':imgRes='low_resolution';break;default:imgRes='standard_resolution'}
6
- var ids_arr=user_id.replace(/ /g,'').split(",");var looparray=ids_arr;var headerStyles='',sbi_page_url='https://api.instagram.com/v1/users/'+ids_arr[0]+'?access_token='+sb_instagram_js_options.sb_instagram_at;if(feedOptions.headercolor.length)headerStyles='style="color: #'+feedOptions.headercolor+'"';jQuery.ajax({method:"GET",url:sbi_page_url,dataType:"jsonp",success:function(data){$header='<a href="http://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link">';$header+='<div class="sbi_header_text">';$header+='<h3 '+headerStyles;if(data.data.bio.length==0)$header+=' class="sbi_no_bio"';$header+='>@'+data.data.username+'</h3>';if(data.data.bio.length)$header+='<p class="sbi_bio" '+headerStyles+'>'+data.data.bio+'</p>';$header+='</div>';$header+='<div class="sbi_header_img">';$header+='<div class="sbi_header_img_hover"><i></i></div>';$header+='<img src="'+data.data.profile_picture+'" alt="'+data.data.full_name+'" width="50" height="50">';$header+='</div>';$header+='</a>';$self.find('.sb_instagram_header').prepend($header);if($self.find('.sbi_follow_btn').length)$self.find('.sbi_follow_btn a').attr('href','http://instagram.com/'+data.data.username)}});jQuery.each(looparray,function(index,entry){var userFeed=new instagramfeed({target:$target,get:getType,sortBy:sortby,resolution:imgRes,limit:parseInt(num,10),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}}" width="200" height="200" /></a></div></div>',filter:function(image){var date=new Date(image.created_time*1000),time=date.getTime();image.created_time_raw=time;if(image.caption!=null)image.caption.text=image.caption.text.replace(/[^a-zA-Z ]/g,"");image.images.thumbnail.url=image.images.thumbnail.url.split("?ig_cache_key")[0];image.images.standard_resolution.url=image.images.standard_resolution.url.split("?ig_cache_key")[0];image.images.low_resolution.url=image.images.low_resolution.url.split("?ig_cache_key")[0];return !0},userId:parseInt(entry,10),accessToken:sb_instagram_js_options.sb_instagram_at,after:function(){$self.find('.sbi_loader').remove();if(this.hasNext())morePosts.push('1');if(morePosts.length>0){$loadBtn.show()}else{$loadBtn.hide();$self.css('padding-bottom',0)}
7
- if(typeof sbi_custom_js=='function')setTimeout(function(){sbi_custom_js()},100);if(imgRes!=='thumbnail'){var sbi_imgLiquid=sbi_imgLiquid||{VER:"0.9.944"};sbi_imgLiquid.bgs_Available=!1,sbi_imgLiquid.bgs_CheckRunned=!1,function(i){function t(){if(!sbi_imgLiquid.bgs_CheckRunned){sbi_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&&(sbi_imgLiquid.bgs_Available="cover"===e.backgroundSize)}}(),t.remove()}}i.fn.extend({sbi_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("sbi_imgLiquid_bgSize"),u.addClass("sbi_imgLiquid_ready"),l()}function o(){function e(){c.data("sbi_imgLiquid_error")||c.data("sbi_imgLiquid_loaded")||c.data("sbi_imgLiquid_oldProcessed")||(u.is(":visible")&&c[0].complete&&c[0].width>0&&c[0].height>0?(c.data("sbi_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("sbi_imgLiquid_settings",c.data("sbi_imgLiquid_settings")),c.parent().prepend(a),c.remove(),c=a,c[0].width=0,void setTimeout(o,10)}return c.data("sbi_imgLiquid_oldProcessed")?void r():(c.data("sbi_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("sbi_imgLiquid_oldProcessed"))&&c.data("sbi_imgLiquid_settings")&&(g=c.data("sbi_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("sbi_imgLiquid_error",!0),u.addClass("sbi_imgLiquid_error"),g.onItemError&&g.onItemError(t,u,c),l()}function s(){var i={};if(a.settings.useDataHtmlAttr){var t=u.attr("data-sbi_imgLiquid-fill"),e=u.attr("data-sbi_imgLiquid-horizontalAlign"),o=u.attr("data-sbi_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 sbi_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("sbi_imgLiquid_oldProcessed")||(c.fadeTo(g.fadeInTime,1),c.data("sbi_imgLiquid_oldProcessed",!0),g.removeBoxBackground&&u.css("background-image","none"),u.addClass("sbi_imgLiquid_nobgSize"),u.addClass("sbi_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("sbi_imgLiquid_settings")?(u.removeClass("sbi_imgLiquid_error").removeClass("sbi_imgLiquid_ready"),g=i.extend({},c.data("sbi_imgLiquid_settings"),a.options)):g=i.extend({},a.settings,s()),c.data("sbi_imgLiquid_settings",g),g.onItemStart&&g.onItemStart(t,u,c),void(sbi_imgLiquid.bgs_Available&&g.useBackgroundSize?e():o())):void n()})}})}(jQuery);!function(){var css=sbi_imgLiquid.injectCss,head=document.getElementsByTagName('head')[0],style=document.createElement('style');style.type='text/css';if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}
8
- head.appendChild(style)}();$self.find(".sbi_photo").sbi_imgLiquid({fill:!0})}
9
- var sbi_delay=(function(){var sbi_timer=0;return function(sbi_callback,sbi_ms){clearTimeout(sbi_timer);sbi_timer=setTimeout(sbi_callback,sbi_ms)}})();jQuery(window).resize(function(){sbi_delay(function(){sbiSetPhotoHeight()},500)});function sbiSetPhotoHeight(){if(imgRes!=='thumbnail'){var sbi_photo_width=$self.find('.sbi_photo').eq(0).innerWidth();var sbi_num_cols=parseInt(cols);if(!$self.hasClass('sbi_disable_mobile')){var sbiWindowWidth=jQuery(window).width();if(sbiWindowWidth<640&&(parseInt(cols)>2&&parseInt(cols)<7))sbi_num_cols=2;if(sbiWindowWidth<640&&(parseInt(cols)>6&&parseInt(cols)<11))sbi_num_cols=4;if(sbiWindowWidth<=480&&parseInt(cols)>2)sbi_num_cols=1}
10
- var sbi_photo_width_manual=($self.find('#sbi_images').width()/sbi_num_cols)-(feedOptions.imagepadding*2);if(sbi_photo_width<=(sbi_photo_width_manual))sbi_photo_width=sbi_photo_width_manual;$self.find('.sbi_photo').css('height',sbi_photo_width)}}
11
- sbiSetPhotoHeight();!function(i){var n={callback:function(){},runOnLoad:!0,frequency:100,sbiPreviousVisibility:null},c={};c.sbiCheckVisibility=function(i,n){if(jQuery.contains(document,i[0])){var e=n.sbiPreviousVisibility,t=i.is(":visible");n.sbiPreviousVisibility=t,null==e?n.runOnLoad&&n.callback(i,t):e!==t&&n.callback(i,t),setTimeout(function(){c.sbiCheckVisibility(i,n)},n.frequency)}},i.fn.sbiVisibilityChanged=function(e){var t=i.extend({},n,e);return this.each(function(){c.sbiCheckVisibility(i(this),t)})}}(jQuery);jQuery(".sbi").filter(':hidden').sbiVisibilityChanged({callback:function(element,visible){sbiSetPhotoHeight()},runOnLoad:!1});jQuery('#sb_instagram .sbi_photo').each(function(){$sbi_photo=jQuery(this);$sbi_photo.hover(function(){jQuery(this).fadeTo(200,0.85)},function(){jQuery(this).stop().fadeTo(500,1)});if($sbi_photo.closest('.sbi_item').hasClass('sbi_type_video')){if(!$sbi_photo.find('.sbi_playbtn').length)$sbi_photo.append('<i class="fa fa-play sbi_playbtn"></i>')}});$self.find('#sbi_images .sbi_item.sbi_new').sort(function(a,b){var aComp=jQuery(a).data('date'),bComp=jQuery(b).data('date');if(sortby=='none'){return bComp-aComp}else{return(Math.round(Math.random())-0.5)}}).appendTo($self.find("#sbi_images"));setTimeout(function(){jQuery('#sbi_images .sbi_item.sbi_new').removeClass('sbi_new');morePosts=[]},500);function sbiGetItemSize(){$self.removeClass('sbi_small sbi_medium');var sbiItemWidth=$self.find('.sbi_item').innerWidth();if(sbiItemWidth>120&&sbiItemWidth<240){$self.addClass('sbi_medium')}else if(sbiItemWidth<=120){$self.addClass('sbi_small')}}
12
- sbiGetItemSize()},error:function(data){var sbiErrorMsg='',sbiErrorDir='';if(data.indexOf('access_token')>-1){sbiErrorMsg+='<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';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.<br />If you continue to have an issue with your Access Token then please see <a href='https://smashballoon.com/my-instagram-access-token-keep-expiring/' target='_blank'>this FAQ</a> for more information."}else if(data.indexOf('user does not exist')>-1){sbiErrorMsg+='<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';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>"}
13
- 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>')}});$loadBtn.click(function(){userFeed.next()});userFeed.run()})})}
14
- jQuery(document).ready(function(){sbi_init()})}
1
  var sbi_js_exists=(typeof sbi_js_exists!=='undefined')?!0:!1;if(!sbi_js_exists){(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);(function(){"use strict";var e=Array.prototype.slice;try{e.call(document.documentElement)}catch(t){Array.prototype.slice=function(t,n){n=typeof n!=="undefined"?n:this.length;if(Object.prototype.toString.call(this)==="[object Array]"){return e.call(this,t,n)}var r,i=[],s,o=this.length;var u=t||0;u=u>=0?u:o+u;var a=n?n:o;if(n<0){a=o+n}s=a-u;if(s>0){i=new Array(s);if(this.charAt){for(r=0;r<s;r++){i[r]=this.charAt(u+r)}}else{for(r=0;r<s;r++){i[r]=this[u+r]}}}return i}}})()
2
+ 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}}
3
+ function sbi_init(){window.sbiFeedMeta={};jQuery('#sb_instagram.sbi').each(function($i){var $self=jQuery(this),$target=$self.find('#sbi_images'),$loadBtn=$self.find("#sbi_load .sbi_load_btn"),imgRes='standard_resolution',cols=parseInt(this.getAttribute('data-cols'),10),feedOptions=JSON.parse(this.getAttribute('data-options')),getType='user',sortby='none',user_id=this.getAttribute('data-id'),num=this.getAttribute('data-num'),$header='',morePosts=[];jQuery(this).attr('data-sbi-index',$i);feedOptions.feedIndex=$i;window.sbiFeedMeta[$i]={'error':{},'idsInFeed':[]};if(feedOptions.sortby!=='')sortby=feedOptions.sortby;switch(this.getAttribute('data-res')){case 'auto':var feedWidth=$self.innerWidth(),colWidth=$self.innerWidth()/cols;var sbiWindowWidth=jQuery(window).width();if(sbiWindowWidth<640){if(feedWidth<640&&$self.is('.sbi_col_3, .sbi_col_4, .sbi_col_5, .sbi_col_6'))colWidth=300;if(feedWidth<640&&$self.is('.sbi_col_7, .sbi_col_8, .sbi_col_9, .sbi_col_10'))colWidth=100;if((feedWidth>320&&feedWidth<480)&&sbiWindowWidth<480)colWidth=480;if(feedWidth<320&&sbiWindowWidth<480)colWidth=300}
4
+ if(colWidth<150){imgRes='thumbnail'}else if(colWidth<320){imgRes='low_resolution'}else{imgRes='standard_resolution'}
5
+ if(feedWidth<=100)imgRes='low_resolution';break;case 'thumb':imgRes='thumbnail';break;case 'medium':imgRes='low_resolution';break;default:imgRes='standard_resolution'}
6
+ var ids_arr=user_id.replace(/ /g,'').split(",");var looparray=ids_arr;var headerStyles='',sbi_page_url='https://api.instagram.com/v1/users/'+ids_arr[0]+'?access_token='+sb_instagram_js_options.sb_instagram_at;if(feedOptions.headercolor.length)headerStyles='style="color: #'+feedOptions.headercolor+'"';jQuery.ajax({method:"GET",url:sbi_page_url,dataType:"jsonp",success:function(data){var sbiErrorResponse=data.meta.error_message;if(typeof sbiErrorResponse==='undefined'){$header='<a href="https://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link">';$header+='<div class="sbi_header_text">';$header+='<h3 '+headerStyles;if(data.data.bio.length==0||feedOptions.showbio!=="true")$header+=' class="sbi_no_bio"';$header+='>@'+data.data.username+'</h3>';if(data.data.bio.length&&feedOptions.showbio==="true")$header+='<p class="sbi_bio" '+headerStyles+'>'+data.data.bio+'</p>';$header+='</div>';$header+='<div class="sbi_header_img">';$header+='<div class="sbi_header_img_hover"><i></i></div>';$header+='<img src="'+data.data.profile_picture+'" alt="'+data.data.full_name+'" width="50" height="50">';$header+='</div>';$header+='</a>';$self.find('.sb_instagram_header').prepend($header);if($self.find('.sbi_follow_btn').length)$self.find('.sbi_follow_btn a').attr('href','https://instagram.com/'+data.data.username)}}});jQuery.each(looparray,function(index,entry){window.sbiFeedMeta[$i].idsInFeed.push(entry);var userFeed=new instagramfeed({target:$target,get:getType,sortBy:sortby,resolution:imgRes,limit:parseInt(num,10),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}}" width="200" height="200" /></a></div></div>',filter:function(image){var date=new Date(image.created_time*1000),time=date.getTime();image.created_time_raw=time;if(image.caption!=null)image.caption.text=image.caption.text.replace(/[^a-zA-Z ]/g,"");image.images.thumbnail.url=image.images.thumbnail.url.split("?ig_cache_key")[0];image.images.standard_resolution.url=image.images.standard_resolution.url.split("?ig_cache_key")[0];image.images.low_resolution.url=image.images.low_resolution.url.split("?ig_cache_key")[0];return!0},userId:parseInt(entry,10),accessToken:sb_instagram_js_options.sb_instagram_at,after:function(){$self.find('.sbi_loader').remove();if(this.hasNext())morePosts.push('1');if(morePosts.length>0){$loadBtn.show()}else{$loadBtn.hide();$self.css('padding-bottom',0)}
7
+ if(typeof sbi_custom_js=='function')setTimeout(function(){sbi_custom_js()},100);if(imgRes!=='thumbnail'){var sbi_imgLiquid=sbi_imgLiquid||{VER:"0.9.944"};sbi_imgLiquid.bgs_Available=!1,sbi_imgLiquid.bgs_CheckRunned=!1,function(i){function t(){if(!sbi_imgLiquid.bgs_CheckRunned){sbi_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&&(sbi_imgLiquid.bgs_Available="cover"===e.backgroundSize)}}(),t.remove()}}i.fn.extend({sbi_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("sbi_imgLiquid_bgSize"),u.addClass("sbi_imgLiquid_ready"),l()}function o(){function e(){c.data("sbi_imgLiquid_error")||c.data("sbi_imgLiquid_loaded")||c.data("sbi_imgLiquid_oldProcessed")||(u.is(":visible")&&c[0].complete&&c[0].width>0&&c[0].height>0?(c.data("sbi_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("sbi_imgLiquid_settings",c.data("sbi_imgLiquid_settings")),c.parent().prepend(a),c.remove(),c=a,c[0].width=0,void setTimeout(o,10)}return c.data("sbi_imgLiquid_oldProcessed")?void r():(c.data("sbi_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("sbi_imgLiquid_oldProcessed"))&&c.data("sbi_imgLiquid_settings")&&(g=c.data("sbi_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("sbi_imgLiquid_error",!0),u.addClass("sbi_imgLiquid_error"),g.onItemError&&g.onItemError(t,u,c),l()}function s(){var i={};if(a.settings.useDataHtmlAttr){var t=u.attr("data-sbi_imgLiquid-fill"),e=u.attr("data-sbi_imgLiquid-horizontalAlign"),o=u.attr("data-sbi_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 sbi_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("sbi_imgLiquid_oldProcessed")||(c.fadeTo(g.fadeInTime,1),c.data("sbi_imgLiquid_oldProcessed",!0),g.removeBoxBackground&&u.css("background-image","none"),u.addClass("sbi_imgLiquid_nobgSize"),u.addClass("sbi_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("sbi_imgLiquid_settings")?(u.removeClass("sbi_imgLiquid_error").removeClass("sbi_imgLiquid_ready"),g=i.extend({},c.data("sbi_imgLiquid_settings"),a.options)):g=i.extend({},a.settings,s()),c.data("sbi_imgLiquid_settings",g),g.onItemStart&&g.onItemStart(t,u,c),void(sbi_imgLiquid.bgs_Available&&g.useBackgroundSize?e():o())):void n()})}})}(jQuery);!function(){var css=sbi_imgLiquid.injectCss,head=document.getElementsByTagName('head')[0],style=document.createElement('style');style.type='text/css';if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}
8
+ head.appendChild(style)}();$self.find(".sbi_photo").sbi_imgLiquid({fill:!0})}
9
+ var sbi_delay=(function(){var sbi_timer=0;return function(sbi_callback,sbi_ms){clearTimeout(sbi_timer);sbi_timer=setTimeout(sbi_callback,sbi_ms)}})();jQuery(window).resize(function(){sbi_delay(function(){sbiSetPhotoHeight()},500)});function sbiSetPhotoHeight(){if(imgRes!=='thumbnail'){var sbi_photo_width=$self.find('.sbi_photo').eq(0).innerWidth();var sbi_num_cols=parseInt(cols);if(!$self.hasClass('sbi_disable_mobile')){var sbiWindowWidth=jQuery(window).width();if(sbiWindowWidth<640&&(parseInt(cols)>2&&parseInt(cols)<7))sbi_num_cols=2;if(sbiWindowWidth<640&&(parseInt(cols)>6&&parseInt(cols)<11))sbi_num_cols=4;if(sbiWindowWidth<=480&&parseInt(cols)>2)sbi_num_cols=1}
10
+ var sbi_photo_width_manual=($self.find('#sbi_images').width()/sbi_num_cols)-(feedOptions.imagepadding*2);if(sbi_photo_width<=(sbi_photo_width_manual))sbi_photo_width=sbi_photo_width_manual;$self.find('.sbi_photo').css('height',sbi_photo_width)}}
11
+ sbiSetPhotoHeight();!function(i){var n={callback:function(){},runOnLoad:!0,frequency:100,sbiPreviousVisibility:null},c={};c.sbiCheckVisibility=function(i,n){if(jQuery.contains(document,i[0])){var e=n.sbiPreviousVisibility,t=i.is(":visible");n.sbiPreviousVisibility=t,null==e?n.runOnLoad&&n.callback(i,t):e!==t&&n.callback(i,t),setTimeout(function(){c.sbiCheckVisibility(i,n)},n.frequency)}},i.fn.sbiVisibilityChanged=function(e){var t=i.extend({},n,e);return this.each(function(){c.sbiCheckVisibility(i(this),t)})}}(jQuery);jQuery(".sbi").filter(':hidden').sbiVisibilityChanged({callback:function(element,visible){sbiSetPhotoHeight()},runOnLoad:!1});jQuery('#sb_instagram .sbi_photo').each(function(){$sbi_photo=jQuery(this);$sbi_photo.hover(function(){jQuery(this).fadeTo(200,0.85)},function(){jQuery(this).stop().fadeTo(500,1)});if($sbi_photo.closest('.sbi_item').hasClass('sbi_type_video')){if(!$sbi_photo.find('.sbi_playbtn').length)$sbi_photo.append('<i class="fa fa-play sbi_playbtn"></i>')}});$self.find('#sbi_images .sbi_item.sbi_new').sort(function(a,b){var aComp=jQuery(a).data('date'),bComp=jQuery(b).data('date');if(sortby=='none'){return bComp-aComp}else{return(Math.round(Math.random())-0.5)}}).appendTo($self.find("#sbi_images"));setTimeout(function(){jQuery('#sbi_images .sbi_item.sbi_new').removeClass('sbi_new');morePosts=[]},500);function sbiGetItemSize(){$self.removeClass('sbi_small sbi_medium');var sbiItemWidth=$self.find('.sbi_item').innerWidth();if(sbiItemWidth>120&&sbiItemWidth<240){$self.addClass('sbi_medium')}else if(sbiItemWidth<=120){$self.addClass('sbi_small')}}
12
+ sbiGetItemSize()},error:function(data){var sbiErrorMsg='',sbiErrorDir='',sbiErrorResponse=data;if(sbiErrorResponse.indexOf('access_token')>-1){sbiErrorMsg+='<p><b>Error: Access Token is not valid or has expired</b><br /><span>This error message is only visible to WordPress admins</span>';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.<br />If you continue to have an issue with your Access Token then please see <a href='https://smashballoon.com/my-instagram-access-token-keep-expiring/' target='_blank'>this FAQ</a> for more information.";jQuery('#sb_instagram').empty().append('<p style="text-align: center;">Unable to show Instagram photos</p><div id="sbi_mod_error">'+sbiErrorMsg+sbiErrorDir+'</div>');return}else if(sbiErrorResponse.indexOf('user does not exist')>-1||sbiErrorResponse.indexOf('you cannot view this resource')>-1){window.sbiFeedMeta[$i].error={errorMsg:'<p><b>Error: User ID <span class="sbiErrorIds">'+window.sbiFeedMeta[$i].idsInFeed[index]+'</span> does not exist, is invalid, or is private</b><br /><span>This error is only visible to WordPress admins</span>',errorDir:"<p>Please double check the Instagram User ID that you are using and ensure that it is valid and not from a private account. To find your User ID simply enter your Instagram user name into this <a href='https://smashballoon.com/instagram-feed/find-instagram-user-id/' target='_blank'>tool</a>.</p>"};if(!$self.find('#sbi_mod_error').length){$self.prepend('<div id="sbi_mod_error">'+window.sbiFeedMeta[$i].error.errorMsg+window.sbiFeedMeta[$i].error.errorDir+'</div>')}else if($self.find('.sbiErrorIds').text().indexOf(window.sbiFeedMeta[$i].idsInFeed[index])==-1){$self.find('.sbiErrorIds').append(','+window.sbiFeedMeta[$i].idsInFeed[index])}}else if(sbiErrorResponse.indexOf('No images were returned')>-1){window.sbiFeedMeta[$i].error={errorMsg:'<p><b>Error: User ID <span class="sbiErrorNone">'+window.sbiFeedMeta[$i].idsInFeed[index]+'</span> has no posts</b><br /><span>This error is only visible to WordPress admins</span>',errorDir:"<p>If you are the owner of this account, make a post on Instagram to see it in your feed.</p>"};if(!$self.find('#sbi_mod_error.sbi_error_none').length){$self.prepend('<div id="sbi_mod_error" class="sbi_error_none">'+window.sbiFeedMeta[$i].error.errorMsg+window.sbiFeedMeta[$i].error.errorDir+'</div>')}else if($self.find('.sbiErrorNone').text().indexOf(window.sbiFeedMeta[$i].idsInFeed[index])==-1){$self.find('.sbiErrorNone').append(','+window.sbiFeedMeta[$i].idsInFeed[index])}}}});$loadBtn.click(function(){userFeed.next()});userFeed.run()})})}
13
+ jQuery(document).ready(function(){sbi_init()})}
 
languages/instagram-feed-de_DE.mo ADDED
Binary file
languages/instagram-feed-en.mo ADDED
Binary file
languages/instagram-feed-es_ES.mo ADDED
Binary file
languages/instagram-feed-fr_FR.mo ADDED
Binary file
languages/instagram-feed-it_IT.mo ADDED
Binary file
languages/instagram-feed-ru_RU.mo ADDED
Binary file