Instagram Feed - Version 1.3.2

Version Description

  • New: Added an option to disable the mobile layout
  • New: Added an setting which allows you to use the plugin with an Ajax powered theme
  • New: Added a 'class' shortcode option which allows you to add a CSS to class to each individual feed: [instagram-feed class=feedOne]
  • New: Added a Support tab which contains System Info to help with troubleshooting
  • New: Added friendly error messages which display only to WordPress admins
  • New: Added validation to the User ID field to prevent usernames being entered instead of IDs
  • Tweak: Made the Access Token field slightly wider to prevent tokens being copy and pasted incorrectly
  • Fix: Fixed a JavaScript bug which caused the feed not to load photos correctly in IE8
Download this release

Release Info

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

Code changes from version 1.3.1 to 1.3.2

Files changed (7) hide show
  1. README.txt +15 -1
  2. css/sb-instagram-admin.css +41 -0
  3. css/sb-instagram.css +46 -0
  4. instagram-feed-admin.php +104 -2
  5. instagram-feed.php +70 -20
  6. js/sb-instagram-admin.js +15 -1
  7. js/sb-instagram.js +20 -3
README.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: smashballoon
3
  Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
  Requires at least: 3.0
5
  Tested up to: 4.1
6
- Stable tag: 1.3.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -62,6 +62,7 @@ For simple step-by-step directions on how to set up the Instagram Feed plugin pl
62
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
63
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
64
  * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
 
65
  *
66
  * **Photo Options**
67
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
@@ -69,6 +70,7 @@ For simple step-by-step directions on how to set up the Instagram Feed plugin pl
69
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
70
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
71
  * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
 
72
  *
73
  * **Header Options**
74
  * **showheader** - Whether to show the feed Header. 'true' or 'false' - Example: `[instagram-feed showheader=false]`
@@ -138,6 +140,7 @@ The below options are available on the Instagram Feed Settings page but can also
138
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
139
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
140
  * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
 
141
  *
142
  * **Photo Options**
143
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
@@ -145,6 +148,7 @@ The below options are available on the Instagram Feed Settings page but can also
145
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
146
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
147
  * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
 
148
  *
149
  * **Header Options**
150
  * **showheader** - Whether to show the feed Header. 'true' or 'false' - Example: `[instagram-feed showheader=false]`
@@ -175,6 +179,16 @@ For more shortcode options, check out the [Pro version](http://smashballoon.com/
175
  7. The Instagram Feed plugin Settings pages
176
 
177
  == Changelog ==
 
 
 
 
 
 
 
 
 
 
178
  = 1.3.1 =
179
  * Fix: Fixed an issue with the Instagram icon not appearing in the 'Follow on Instagram' button or in the header
180
  * Fix: Addressed a few CSS issues which were causing some minor formatting issues on certain themes
3
  Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
  Requires at least: 3.0
5
  Tested up to: 4.1
6
+ Stable tag: 1.3.2
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
62
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
63
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
64
  * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
65
+ * **class** - Add a CSS class to the feed container - Example: `[instagram-feed class=feedOne]`
66
  *
67
  * **Photo Options**
68
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
70
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
71
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
72
  * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
73
+ * **disablemobile** - Disable the mobile layout. 'true' or 'false' - Example: `[instagram-feed disablemobile=true]`
74
  *
75
  * **Header Options**
76
  * **showheader** - Whether to show the feed Header. 'true' or 'false' - Example: `[instagram-feed showheader=false]`
140
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
141
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
142
  * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
143
+ * **class** - Add a CSS class to the feed container - Example: `[instagram-feed class=feedOne]`
144
  *
145
  * **Photo Options**
146
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
148
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
149
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
150
  * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
151
+ * **disablemobile** - Disable the mobile layout. 'true' or 'false' - Example: `[instagram-feed disablemobile=true]`
152
  *
153
  * **Header Options**
154
  * **showheader** - Whether to show the feed Header. 'true' or 'false' - Example: `[instagram-feed showheader=false]`
179
  7. The Instagram Feed plugin Settings pages
180
 
181
  == Changelog ==
182
+ = 1.3.2 =
183
+ * New: Added an option to disable the mobile layout
184
+ * New: Added an setting which allows you to use the plugin with an Ajax powered theme
185
+ * New: Added a 'class' shortcode option which allows you to add a CSS to class to each individual feed: `[instagram-feed class=feedOne]`
186
+ * New: Added a Support tab which contains System Info to help with troubleshooting
187
+ * New: Added friendly error messages which display only to WordPress admins
188
+ * New: Added validation to the User ID field to prevent usernames being entered instead of IDs
189
+ * Tweak: Made the Access Token field slightly wider to prevent tokens being copy and pasted incorrectly
190
+ * Fix: Fixed a JavaScript bug which caused the feed not to load photos correctly in IE8
191
+
192
  = 1.3.1 =
193
  * Fix: Fixed an issue with the Instagram icon not appearing in the 'Follow on Instagram' button or in the header
194
  * Fix: Addressed a few CSS issues which were causing some minor formatting issues on certain themes
css/sb-instagram-admin.css CHANGED
@@ -161,4 +161,45 @@
161
  border: 1px solid #999;
162
  background: #eacccc;
163
  margin: 3px 6px 0 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  }
161
  border: 1px solid #999;
162
  background: #eacccc;
163
  margin: 3px 6px 0 0;
164
+ }
165
+
166
+
167
+
168
+
169
+ /* Error notice */
170
+ #sbi_admin .sbi_notice{
171
+ margin-top: 5px;
172
+ background: #f9ecda;
173
+ padding: 5px 10px;
174
+ border: 1px solid #e89a2e;
175
+ color: #cf6100;
176
+
177
+ -moz-border-radius: 3px;
178
+ -webkit-border-radius: 3px;
179
+ border-radius: 3px;
180
+ }
181
+ #sbi_admin .sbi_notice a{
182
+ color: #d85600;
183
+ }
184
+ #sbi_admin .sbi_notice a:hover,
185
+ #sbi_admin .sbi_notice a:focus{
186
+ color: #a34100;
187
+ }
188
+ #sbi_admin .sbi_notice p{
189
+ margin: 0;
190
+ padding: 5px 0;
191
+ font-size: 13px;
192
+ }
193
+ #sbi_admin .sbi_user_id_error{
194
+ display: none;
195
+
196
+ margin: 10px 0;
197
+ background: #F7E6E6;
198
+ padding: 5px 10px;
199
+ border: 1px solid #BA7B7B;
200
+ color: #592626;
201
+
202
+ -moz-border-radius: 3px;
203
+ -webkit-border-radius: 3px;
204
+ border-radius: 3px;
205
  }
css/sb-instagram.css CHANGED
@@ -65,6 +65,18 @@
65
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
66
  #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
67
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  /* Photos */
69
  #sb_instagram .sbi_photo_wrap{
70
  position: relative;
@@ -282,6 +294,40 @@
282
  }
283
 
284
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
285
 
286
  /* Media queries */
287
  @media all and (max-width: 640px){
65
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
66
  #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
67
 
68
+ /* Disable mobile layout */
69
+ #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
70
+ #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
71
+ #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
72
+ #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
73
+ #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
74
+ #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
75
+ #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
76
+ #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
77
+ #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
78
+ #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
79
+
80
  /* Photos */
81
  #sb_instagram .sbi_photo_wrap{
82
  position: relative;
294
  }
295
 
296
 
297
+ /* Mod only error msgs */
298
+ #sbi_mod_error{
299
+ display: none;
300
+ }
301
+ #sbi_mod_error{
302
+ border: 1px solid #ddd;
303
+ background: #eee;
304
+ color: #333;
305
+ margin: 0;
306
+ padding: 10px 15px;
307
+ font-size: 13px;
308
+
309
+ -moz-border-radius: 4px;
310
+ -webkit-border-radius: 4px;
311
+ border-radius: 4px;
312
+ }
313
+ #sbi_mod_error p{
314
+ padding: 5px 0 !important;
315
+ margin: 0 !important;
316
+ line-height: 1.3 !important;
317
+ }
318
+ #sbi_mod_error ol,
319
+ #sbi_mod_error ul{
320
+ padding: 5px 0 5px 20px !important;
321
+ margin: 0 !important;
322
+ }
323
+ #sbi_mod_error li{
324
+ padding: 1px 0 !important;
325
+ margin: 0 !important;
326
+ }
327
+ #sbi_mod_error span{
328
+ font-size: 12px;
329
+ }
330
+
331
 
332
  /* Media queries */
333
  @media all and (max-width: 640px){
instagram-feed-admin.php CHANGED
@@ -31,12 +31,14 @@ function sb_instagram_settings_page() {
31
  'sb_instagram_at' => '',
32
  'sb_instagram_user_id' => '',
33
  'sb_instagram_preserve_settings' => '',
 
34
  'sb_instagram_width' => '100',
35
  'sb_instagram_width_unit' => '%',
36
  'sb_instagram_height' => '',
37
  'sb_instagram_num' => '20',
38
  'sb_instagram_height_unit' => '',
39
  'sb_instagram_cols' => '4',
 
40
  'sb_instagram_image_padding' => '5',
41
  'sb_instagram_image_padding_unit' => 'px',
42
  'sb_instagram_sort' => 'none',
@@ -47,10 +49,10 @@ function sb_instagram_settings_page() {
47
  'sb_instagram_btn_text' => 'Load More...',
48
  'sb_instagram_image_res' => 'auto',
49
  //Header
50
- 'sb_instagram_show_header' => false,
51
  'sb_instagram_header_color' => '',
52
  //Follow button
53
- 'sb_instagram_show_follow_btn' => false,
54
  'sb_instagram_folow_btn_background' => '',
55
  'sb_instagram_follow_btn_text_color' => '',
56
  'sb_instagram_follow_btn_text' => 'Follow on Instagram',
@@ -66,12 +68,14 @@ function sb_instagram_settings_page() {
66
  $sb_instagram_at = $options[ 'sb_instagram_at' ];
67
  $sb_instagram_user_id = $options[ 'sb_instagram_user_id' ];
68
  $sb_instagram_preserve_settings = $options[ 'sb_instagram_preserve_settings' ];
 
69
  $sb_instagram_width = $options[ 'sb_instagram_width' ];
70
  $sb_instagram_width_unit = $options[ 'sb_instagram_width_unit' ];
71
  $sb_instagram_height = $options[ 'sb_instagram_height' ];
72
  $sb_instagram_height_unit = $options[ 'sb_instagram_height_unit' ];
73
  $sb_instagram_num = $options[ 'sb_instagram_num' ];
74
  $sb_instagram_cols = $options[ 'sb_instagram_cols' ];
 
75
  $sb_instagram_image_padding = $options[ 'sb_instagram_image_padding' ];
76
  $sb_instagram_image_padding_unit = $options[ 'sb_instagram_image_padding_unit' ];
77
  $sb_instagram_sort = $options[ 'sb_instagram_sort' ];
@@ -100,10 +104,12 @@ function sb_instagram_settings_page() {
100
  $sb_instagram_at = $_POST[ 'sb_instagram_at' ];
101
  $sb_instagram_user_id = $_POST[ 'sb_instagram_user_id' ];
102
  isset($_POST[ 'sb_instagram_preserve_settings' ]) ? $sb_instagram_preserve_settings = $_POST[ 'sb_instagram_preserve_settings' ] : $sb_instagram_preserve_settings = '';
 
103
 
104
  $options[ 'sb_instagram_at' ] = $sb_instagram_at;
105
  $options[ 'sb_instagram_user_id' ] = $sb_instagram_user_id;
106
  $options[ 'sb_instagram_preserve_settings' ] = $sb_instagram_preserve_settings;
 
107
  } //End config tab post
108
 
109
  if( isset($_POST[ $sb_instagram_customize_hidden_field ]) && $_POST[ $sb_instagram_customize_hidden_field ] == 'Y' ) {
@@ -113,6 +119,8 @@ function sb_instagram_settings_page() {
113
  $sb_instagram_height_unit = $_POST[ 'sb_instagram_height_unit' ];
114
  $sb_instagram_num = $_POST[ 'sb_instagram_num' ];
115
  $sb_instagram_cols = $_POST[ 'sb_instagram_cols' ];
 
 
116
  $sb_instagram_image_padding = $_POST[ 'sb_instagram_image_padding' ];
117
  $sb_instagram_image_padding_unit = $_POST[ 'sb_instagram_image_padding_unit' ];
118
  $sb_instagram_sort = $_POST[ 'sb_instagram_sort' ];
@@ -140,6 +148,7 @@ function sb_instagram_settings_page() {
140
  $options[ 'sb_instagram_height_unit' ] = $sb_instagram_height_unit;
141
  $options[ 'sb_instagram_num' ] = $sb_instagram_num;
142
  $options[ 'sb_instagram_cols' ] = $sb_instagram_cols;
 
143
  $options[ 'sb_instagram_image_padding' ] = $sb_instagram_image_padding;
144
  $options[ 'sb_instagram_image_padding_unit' ] = $sb_instagram_image_padding_unit;
145
  $options[ 'sb_instagram_sort' ] = $sb_instagram_sort;
@@ -185,6 +194,7 @@ function sb_instagram_settings_page() {
185
  <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'); ?></a>
186
  <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'); ?></a>
187
  <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'); ?></a>
 
188
  </h2>
189
 
190
  <?php if( $sbi_active_tab == 'configure' ) { //Start Configure tab ?>
@@ -220,6 +230,10 @@ function sb_instagram_settings_page() {
220
  &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
221
  <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='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>. You can separate multiple IDs using commas."); ?></p><br />
222
  </span>
 
 
 
 
223
 
224
  <span class="sbi_pro">
225
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
@@ -243,6 +257,16 @@ function sb_instagram_settings_page() {
243
  <p class="sbi_tooltip"><?php _e('When removing the plugin your settings are automatically erased. Checking this box will prevent any settings from being deleted. This means that you can uninstall and reinstall the plugin without losing your settings.'); ?></p>
244
  </td>
245
  </tr>
 
 
 
 
 
 
 
 
 
 
246
  </tbody>
247
  </table>
248
 
@@ -375,6 +399,15 @@ function sb_instagram_settings_page() {
375
  </td>
376
  </tr>
377
 
 
 
 
 
 
 
 
 
 
378
  <tr valign="top" class="sbi_pro">
379
  <th scope="row"><label><?php _e('Hide Photos'); ?></label></th>
380
  <td>
@@ -597,6 +630,11 @@ function sb_instagram_settings_page() {
597
  <td><?php _e("The background color of the feed. Any hex color code."); ?></td>
598
  <td><code>[instagram-feed background=#ffff00]</code></td>
599
  </tr>
 
 
 
 
 
600
 
601
  <tr class="sbi_table_header"><td colspan=3><?php _e("Photos Options"); ?></td></tr>
602
  <tr>
@@ -629,6 +667,17 @@ function sb_instagram_settings_page() {
629
  <td><?php _e("The unit of the padding. 'px' or '%'"); ?></td>
630
  <td><code>[instagram-feed imagepaddingunit=px]</code></td>
631
  </tr>
 
 
 
 
 
 
 
 
 
 
 
632
  <tr class="sbi_pro">
633
  <td>hovercolor</td>
634
  <td><?php _e("The background color when hovering over a photo. Any hex color code."); ?></td>
@@ -742,6 +791,59 @@ function sb_instagram_settings_page() {
742
 
743
  <?php } //End Display tab ?>
744
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
745
  <hr />
746
 
747
  <a href="https://smashballoon.com/instagram-feed/demo" target="_blank" style="display: block; margin: 20px 0 0 0; float: left; clear: both;">
31
  'sb_instagram_at' => '',
32
  'sb_instagram_user_id' => '',
33
  'sb_instagram_preserve_settings' => '',
34
+ 'sb_instagram_ajax_theme' => false,
35
  'sb_instagram_width' => '100',
36
  'sb_instagram_width_unit' => '%',
37
  'sb_instagram_height' => '',
38
  'sb_instagram_num' => '20',
39
  'sb_instagram_height_unit' => '',
40
  'sb_instagram_cols' => '4',
41
+ 'sb_instagram_disable_mobile' => false,
42
  'sb_instagram_image_padding' => '5',
43
  'sb_instagram_image_padding_unit' => 'px',
44
  'sb_instagram_sort' => 'none',
49
  'sb_instagram_btn_text' => 'Load More...',
50
  'sb_instagram_image_res' => 'auto',
51
  //Header
52
+ 'sb_instagram_show_header' => true,
53
  'sb_instagram_header_color' => '',
54
  //Follow button
55
+ 'sb_instagram_show_follow_btn' => true,
56
  'sb_instagram_folow_btn_background' => '',
57
  'sb_instagram_follow_btn_text_color' => '',
58
  'sb_instagram_follow_btn_text' => 'Follow on Instagram',
68
  $sb_instagram_at = $options[ 'sb_instagram_at' ];
69
  $sb_instagram_user_id = $options[ 'sb_instagram_user_id' ];
70
  $sb_instagram_preserve_settings = $options[ 'sb_instagram_preserve_settings' ];
71
+ $sb_instagram_ajax_theme = $options[ 'sb_instagram_ajax_theme' ];
72
  $sb_instagram_width = $options[ 'sb_instagram_width' ];
73
  $sb_instagram_width_unit = $options[ 'sb_instagram_width_unit' ];
74
  $sb_instagram_height = $options[ 'sb_instagram_height' ];
75
  $sb_instagram_height_unit = $options[ 'sb_instagram_height_unit' ];
76
  $sb_instagram_num = $options[ 'sb_instagram_num' ];
77
  $sb_instagram_cols = $options[ 'sb_instagram_cols' ];
78
+ $sb_instagram_disable_mobile = $options[ 'sb_instagram_disable_mobile' ];
79
  $sb_instagram_image_padding = $options[ 'sb_instagram_image_padding' ];
80
  $sb_instagram_image_padding_unit = $options[ 'sb_instagram_image_padding_unit' ];
81
  $sb_instagram_sort = $options[ 'sb_instagram_sort' ];
104
  $sb_instagram_at = $_POST[ 'sb_instagram_at' ];
105
  $sb_instagram_user_id = $_POST[ 'sb_instagram_user_id' ];
106
  isset($_POST[ 'sb_instagram_preserve_settings' ]) ? $sb_instagram_preserve_settings = $_POST[ 'sb_instagram_preserve_settings' ] : $sb_instagram_preserve_settings = '';
107
+ isset($_POST[ 'sb_instagram_ajax_theme' ]) ? $sb_instagram_ajax_theme = $_POST[ 'sb_instagram_ajax_theme' ] : $sb_instagram_ajax_theme = '';
108
 
109
  $options[ 'sb_instagram_at' ] = $sb_instagram_at;
110
  $options[ 'sb_instagram_user_id' ] = $sb_instagram_user_id;
111
  $options[ 'sb_instagram_preserve_settings' ] = $sb_instagram_preserve_settings;
112
+ $options[ 'sb_instagram_ajax_theme' ] = $sb_instagram_ajax_theme;
113
  } //End config tab post
114
 
115
  if( isset($_POST[ $sb_instagram_customize_hidden_field ]) && $_POST[ $sb_instagram_customize_hidden_field ] == 'Y' ) {
119
  $sb_instagram_height_unit = $_POST[ 'sb_instagram_height_unit' ];
120
  $sb_instagram_num = $_POST[ 'sb_instagram_num' ];
121
  $sb_instagram_cols = $_POST[ 'sb_instagram_cols' ];
122
+ isset($_POST[ 'sb_instagram_disable_mobile' ]) ? $sb_instagram_disable_mobile = $_POST[ 'sb_instagram_disable_mobile' ] : $sb_instagram_disable_mobile = '';
123
+
124
  $sb_instagram_image_padding = $_POST[ 'sb_instagram_image_padding' ];
125
  $sb_instagram_image_padding_unit = $_POST[ 'sb_instagram_image_padding_unit' ];
126
  $sb_instagram_sort = $_POST[ 'sb_instagram_sort' ];
148
  $options[ 'sb_instagram_height_unit' ] = $sb_instagram_height_unit;
149
  $options[ 'sb_instagram_num' ] = $sb_instagram_num;
150
  $options[ 'sb_instagram_cols' ] = $sb_instagram_cols;
151
+ $options[ 'sb_instagram_disable_mobile' ] = $sb_instagram_disable_mobile;
152
  $options[ 'sb_instagram_image_padding' ] = $sb_instagram_image_padding;
153
  $options[ 'sb_instagram_image_padding_unit' ] = $sb_instagram_image_padding_unit;
154
  $options[ 'sb_instagram_sort' ] = $sb_instagram_sort;
194
  <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'); ?></a>
195
  <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'); ?></a>
196
  <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'); ?></a>
197
+ <a href="?page=sb-instagram-feed&amp;tab=support" class="nav-tab <?php echo $sbi_active_tab == 'support' ? 'nav-tab-active' : ''; ?>"><?php _e('Support'); ?></a>
198
  </h2>
199
 
200
  <?php if( $sbi_active_tab == 'configure' ) { //Start Configure tab ?>
230
  &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
231
  <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='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>. You can separate multiple IDs using commas."); ?></p><br />
232
  </span>
233
+
234
+ <div class="sbi_notice sbi_user_id_error">
235
+ <?php _e("<p>Please be sure to enter your numeric <b>User ID</b> and not your Username. You can find your User ID by clicking the blue Instagram Login button above, or by entering your username into <a href='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>.</p>"); ?>
236
+ </div>
237
 
238
  <span class="sbi_pro">
239
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
257
  <p class="sbi_tooltip"><?php _e('When removing the plugin your settings are automatically erased. Checking this box will prevent any settings from being deleted. This means that you can uninstall and reinstall the plugin without losing your settings.'); ?></p>
258
  </td>
259
  </tr>
260
+
261
+ <tr>
262
+ <th class="bump-left"><label for="sb_instagram_ajax_theme" class="bump-left"><?php _e("Are you using an Ajax powered theme?"); ?></label></th>
263
+ <td>
264
+ <input name="sb_instagram_ajax_theme" type="checkbox" id="sb_instagram_ajax_theme" <?php if($sb_instagram_ajax_theme == true) echo "checked"; ?> />
265
+ <label for="sb_instagram_ajax_theme"><?php _e('Yes'); ?></label>
266
+ <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e('What does this mean?'); ?></a>
267
+ <p class="sbi_tooltip"><?php _e("When navigating your site, if your theme uses Ajax to load content into your pages (meaning your page doesn't refresh) then check this setting. If you're not sure then please check with the theme author."); ?></p>
268
+ </td>
269
+ </tr>
270
  </tbody>
271
  </table>
272
 
399
  </td>
400
  </tr>
401
 
402
+ <tr valign="top">
403
+ <th scope="row"><label><?php _e("Disable mobile layout"); ?></label></th>
404
+ <td>
405
+ <input type="checkbox" name="sb_instagram_disable_mobile" id="sb_instagram_disable_mobile" <?php if($sb_instagram_disable_mobile == true) echo 'checked="checked"' ?> />
406
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What does this mean?"); ?></a>
407
+ <p class="sbi_tooltip"><?php _e("By default on mobile devices the layout automatically changes to use fewer columns. Checking this setting disables the mobile layout."); ?></p>
408
+ </td>
409
+ </tr>
410
+
411
  <tr valign="top" class="sbi_pro">
412
  <th scope="row"><label><?php _e('Hide Photos'); ?></label></th>
413
  <td>
630
  <td><?php _e("The background color of the feed. Any hex color code."); ?></td>
631
  <td><code>[instagram-feed background=#ffff00]</code></td>
632
  </tr>
633
+ <tr>
634
+ <td>class</td>
635
+ <td><?php _e("Add a CSS class to the feed container"); ?></td>
636
+ <td><code>[instagram-feed class=feedOne]</code></td>
637
+ </tr>
638
 
639
  <tr class="sbi_table_header"><td colspan=3><?php _e("Photos Options"); ?></td></tr>
640
  <tr>
667
  <td><?php _e("The unit of the padding. 'px' or '%'"); ?></td>
668
  <td><code>[instagram-feed imagepaddingunit=px]</code></td>
669
  </tr>
670
+ <tr class="sbi_pro">
671
+ <td>disablelightbox</td>
672
+ <td><?php _e("Whether to disable the photo Lightbox. It is enabled by default."); ?></td>
673
+ <td><code>[instagram-feed disablelightbox=true]</code></td>
674
+ </tr>
675
+ <tr>
676
+ <td>disablemobile</td>
677
+ <td><?php _e("Disable the mobile layout. 'true' or 'false'."); ?></td>
678
+ <td><code>[instagram-feed disablemobile=true]</code></td>
679
+ </tr>
680
+
681
  <tr class="sbi_pro">
682
  <td>hovercolor</td>
683
  <td><?php _e("The background color when hovering over a photo. Any hex color code."); ?></td>
791
 
792
  <?php } //End Display tab ?>
793
 
794
+
795
+ <?php if( $sbi_active_tab == 'support' ) { //Start Support tab ?>
796
+
797
+ <h3><?php _e('Setting up and Customizing the plugin'); ?></h3>
798
+ <p><?php _e('<a href="https://smashballoon.com/instagram-feed/free/" target="_blank">Click here for step-by-step setup directions</a>'); ?></p>
799
+ <p style="max-width: 960px;">See below for a short video demonstrating how to set up, customize and use the plugin. <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.</p>
800
+ <iframe class="youtube-video" src="//www.youtube.com/embed/3tc-UvcTcgk?theme=light&amp;showinfo=0&amp;controls=2" width="960" height="540" frameborder="0" allowfullscreen="allowfullscreen" style="border: 1px solid #ddd;"></iframe>
801
+
802
+ <br />
803
+ <br />
804
+ <p><?php _e('Still need help? <a href="http://smashballoon.com/instagram-feed/support/" target="_blank">Request support</a>. Please include your <b>System Info</b> below with all support requests.'); ?></p>
805
+
806
+ <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>
807
+
808
+
809
+ <?php $sbi_options = get_option('sb_instagram_settings'); ?>
810
+ <textarea readonly="readonly" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)." style="width: 100%; max-width: 960px; height: 500px; white-space: pre; font-family: Menlo,Monaco,monospace;">
811
+ ## SITE/SERVER INFO: ##
812
+ Site URL: <?php echo site_url() . "\n"; ?>
813
+ Home URL: <?php echo home_url() . "\n"; ?>
814
+ WordPress Version: <?php echo get_bloginfo( 'version' ) . "\n"; ?>
815
+ PHP Version: <?php echo PHP_VERSION . "\n"; ?>
816
+ Web Server Info: <?php echo $_SERVER['SERVER_SOFTWARE'] . "\n"; ?>
817
+
818
+ ## ACTIVE PLUGINS: ##
819
+ <?php
820
+ $plugins = get_plugins();
821
+ $active_plugins = get_option( 'active_plugins', array() );
822
+
823
+ foreach ( $plugins as $plugin_path => $plugin ) {
824
+ // If the plugin isn't active, don't show it.
825
+ if ( ! in_array( $plugin_path, $active_plugins ) )
826
+ continue;
827
+
828
+ echo $plugin['Name'] . ': ' . $plugin['Version'] ."\n";
829
+ }
830
+ ?>
831
+
832
+ ## PLUGIN SETTINGS: ##
833
+ sb_instagram_plugin_type => Instagram Feed Free
834
+ <?php
835
+ while (list($key, $val) = each($sbi_options)) {
836
+ echo "$key => $val\n";
837
+ }
838
+ ?>
839
+ </textarea>
840
+
841
+
842
+ <?php
843
+ } //End Support tab
844
+ ?>
845
+
846
+
847
  <hr />
848
 
849
  <a href="https://smashballoon.com/instagram-feed/demo" target="_blank" style="display: block; margin: 20px 0 0 0; float: left; clear: both;">
instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
  Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
- Version: 1.3.1
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
@@ -45,6 +45,7 @@ function display_instagram($atts, $content = null) {
45
  'sortby' => $options[ 'sb_instagram_sort' ],
46
  'num' => $options[ 'sb_instagram_num' ],
47
  'cols' => $options[ 'sb_instagram_cols' ],
 
48
  'imagepadding' => $options[ 'sb_instagram_image_padding' ],
49
  'imagepaddingunit' => $options[ 'sb_instagram_image_padding_unit' ],
50
  'background' => $options[ 'sb_instagram_background' ],
@@ -58,7 +59,9 @@ function display_instagram($atts, $content = null) {
58
  'followtextcolor' => $options[ 'sb_instagram_follow_btn_text_color' ],
59
  'followtext' => $options[ 'sb_instagram_follow_btn_text' ],
60
  'showheader' => $options[ 'sb_instagram_show_header' ],
61
- 'headercolor' => $options[ 'sb_instagram_header_color' ]
 
 
62
  ), $atts);
63
 
64
 
@@ -89,12 +92,14 @@ function display_instagram($atts, $content = null) {
89
 
90
  //Header
91
  $sb_instagram_show_header = $atts['showheader'];
92
- if($sb_instagram_show_header == 'false') $sb_instagram_show_header = false;
 
93
  $sb_instagram_header_color = str_replace('#', '', $atts['headercolor']);
94
 
95
  //Load more button
96
  $sb_instagram_show_btn = $atts['showbutton'];
97
- if($sb_instagram_show_btn == 'false') $sb_instagram_show_btn = false;
 
98
  $sb_instagram_btn_background = str_replace('#', '', $atts['buttoncolor']);
99
  $sb_instagram_btn_text_color = str_replace('#', '', $atts['buttontextcolor']);
100
  //Load more button styles
@@ -105,7 +110,8 @@ function display_instagram($atts, $content = null) {
105
 
106
  //Follow button vars
107
  $sb_instagram_show_follow_btn = $atts['showfollow'];
108
- if($sb_instagram_show_follow_btn == 'false') $sb_instagram_show_follow_btn = false;
 
109
  $sb_instagram_follow_btn_background = str_replace('#', '', $atts['followcolor']);
110
  $sb_instagram_follow_btn_text_color = str_replace('#', '', $atts['followtextcolor']);
111
  $sb_instagram_follow_btn_text = $atts['followtext'];
@@ -118,11 +124,25 @@ function display_instagram($atts, $content = null) {
118
  $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>';
119
 
120
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  /******************* CONTENT ********************/
122
 
123
- $sb_instagram_content = '<div id="sb_instagram" class="sbi ';
124
- if ( !empty($sb_instagram_height) ) $sb_instagram_content .= 'sbi_fixed_height ';
125
- $sb_instagram_content .= 'sbi_col_' . trim($sb_instagram_cols);
126
  $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;}\'>';
127
 
128
  //Header
@@ -153,6 +173,12 @@ function display_instagram($atts, $content = null) {
153
  $sb_instagram_content .= '</div>'; //End #sbi_load
154
 
155
  $sb_instagram_content .= '</div>'; //End #sb_instagram
 
 
 
 
 
 
156
 
157
  //Return our feed HTML to display
158
  return $sb_instagram_content;
@@ -168,7 +194,7 @@ add_filter('widget_text', 'do_shortcode');
168
  //Enqueue stylesheet
169
  add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
170
  function sb_instagram_styles_enqueue() {
171
- wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.css?6', __FILE__) );
172
  wp_enqueue_style( 'sb_instagram_styles' );
173
  wp_enqueue_style( 'sb_instagram_icons', '//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?1', array(), '4.2.0' );
174
  }
@@ -177,7 +203,7 @@ function sb_instagram_styles_enqueue() {
177
  add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
178
  function sb_instagram_scripts_enqueue() {
179
  //Register the script to make it available
180
- wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.js?7' , __FILE__ ), array('jquery'), '1.8', true );
181
 
182
  //Options to pass to JS file
183
  $sb_instagram_settings = get_option('sb_instagram_settings');
@@ -185,8 +211,11 @@ function sb_instagram_scripts_enqueue() {
185
  'sb_instagram_at' => trim($sb_instagram_settings['sb_instagram_at'])
186
  );
187
 
 
 
 
188
  //Enqueue it to load it onto the page
189
- wp_enqueue_script('sb_instagram_scripts');
190
 
191
  //Pass option to JS file
192
  wp_localize_script('sb_instagram_scripts', 'sb_instagram_js_options', $data);
@@ -196,16 +225,28 @@ function sb_instagram_scripts_enqueue() {
196
  add_action( 'wp_head', 'sb_instagram_custom_css' );
197
  function sb_instagram_custom_css() {
198
  $options = get_option('sb_instagram_settings');
199
-
200
  $sb_instagram_custom_css = $options[ 'sb_instagram_custom_css' ];
201
- if( !empty($sb_instagram_custom_css) ) echo '<!-- Instagram Feed CSS -->';
202
- if( !empty($sb_instagram_custom_css) ) echo "\r\n";
203
- if( !empty($sb_instagram_custom_css) ) echo '<style type="text/css">';
204
- if( !empty($sb_instagram_custom_css) ) echo "\r\n";
205
- if( !empty($sb_instagram_custom_css) ) echo stripslashes($sb_instagram_custom_css);
206
- if( !empty($sb_instagram_custom_css) ) echo "\r\n";
207
- if( !empty($sb_instagram_custom_css) ) echo '</style>';
208
- if( !empty($sb_instagram_custom_css) ) echo "\r\n";
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  }
210
 
211
 
@@ -233,6 +274,15 @@ function sb_instagram_custom_js() {
233
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
234
  }
235
 
 
 
 
 
 
 
 
 
 
236
 
237
  //Uninstall
238
  function sb_instagram_uninstall()
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
  Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
+ Version: 1.3.2
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
45
  'sortby' => $options[ 'sb_instagram_sort' ],
46
  'num' => $options[ 'sb_instagram_num' ],
47
  'cols' => $options[ 'sb_instagram_cols' ],
48
+ 'disablemobile' => $options[ 'sb_instagram_disable_mobile' ],
49
  'imagepadding' => $options[ 'sb_instagram_image_padding' ],
50
  'imagepaddingunit' => $options[ 'sb_instagram_image_padding_unit' ],
51
  'background' => $options[ 'sb_instagram_background' ],
59
  'followtextcolor' => $options[ 'sb_instagram_follow_btn_text_color' ],
60
  'followtext' => $options[ 'sb_instagram_follow_btn_text' ],
61
  'showheader' => $options[ 'sb_instagram_show_header' ],
62
+ 'headercolor' => $options[ 'sb_instagram_header_color' ],
63
+ 'class' => '',
64
+ 'ajaxtheme' => $options[ 'sb_instagram_ajax_theme' ]
65
  ), $atts);
66
 
67
 
92
 
93
  //Header
94
  $sb_instagram_show_header = $atts['showheader'];
95
+ ( $sb_instagram_show_header == 'on' || $sb_instagram_show_header == 'true' || $sb_instagram_show_header == true ) ? $sb_instagram_show_header = true : $sb_instagram_show_header = false;
96
+ if( $atts[ 'showheader' ] === 'false' ) $sb_instagram_show_header = false;
97
  $sb_instagram_header_color = str_replace('#', '', $atts['headercolor']);
98
 
99
  //Load more button
100
  $sb_instagram_show_btn = $atts['showbutton'];
101
+ ( $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;
102
+ if( $atts[ 'showbutton' ] === 'false' ) $sb_instagram_show_btn = false;
103
  $sb_instagram_btn_background = str_replace('#', '', $atts['buttoncolor']);
104
  $sb_instagram_btn_text_color = str_replace('#', '', $atts['buttontextcolor']);
105
  //Load more button styles
110
 
111
  //Follow button vars
112
  $sb_instagram_show_follow_btn = $atts['showfollow'];
113
+ ( $sb_instagram_show_follow_btn == 'on' || $sb_instagram_show_follow_btn == 'true' || $sb_instagram_show_follow_btn == true ) ? $sb_instagram_show_follow_btn = true : $sb_instagram_show_follow_btn = false;
114
+ if( $atts[ 'showfollow' ] === 'false' ) $sb_instagram_show_follow_btn = false;
115
  $sb_instagram_follow_btn_background = str_replace('#', '', $atts['followcolor']);
116
  $sb_instagram_follow_btn_text_color = str_replace('#', '', $atts['followtextcolor']);
117
  $sb_instagram_follow_btn_text = $atts['followtext'];
124
  $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>';
125
 
126
 
127
+ //Mobile
128
+ $sb_instagram_disable_mobile = $atts['disablemobile'];
129
+ ( $sb_instagram_disable_mobile == 'on' || $sb_instagram_disable_mobile == 'true' || $sb_instagram_disable_mobile == true ) ? $sb_instagram_disable_mobile = ' sbi_disable_mobile' : $sb_instagram_disable_mobile = '';
130
+ if( $atts[ 'disablemobile' ] === 'false' ) $sb_instagram_disable_mobile = '';
131
+
132
+ //Class
133
+ !empty( $atts['class'] ) ? $sbi_class = ' ' . trim($atts['class']) : $sbi_class = '';
134
+
135
+ //Ajax theme
136
+ $sb_instagram_ajax_theme = $atts['ajaxtheme'];
137
+ ( $sb_instagram_ajax_theme == 'on' || $sb_instagram_ajax_theme == 'true' || $sb_instagram_ajax_theme == true ) ? $sb_instagram_ajax_theme = true : $sb_instagram_ajax_theme = false;
138
+ if( $atts[ 'disablemobile' ] === 'false' ) $sb_instagram_ajax_theme = false;
139
+
140
+
141
  /******************* CONTENT ********************/
142
 
143
+ $sb_instagram_content = '<div id="sb_instagram" class="sbi' . $sbi_class . $sb_instagram_disable_mobile;
144
+ if ( !empty($sb_instagram_height) ) $sb_instagram_content .= ' sbi_fixed_height ';
145
+ $sb_instagram_content .= ' sbi_col_' . trim($sb_instagram_cols);
146
  $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;}\'>';
147
 
148
  //Header
173
  $sb_instagram_content .= '</div>'; //End #sbi_load
174
 
175
  $sb_instagram_content .= '</div>'; //End #sb_instagram
176
+
177
+ //If using an ajax theme then add the JS to the bottom of the feed
178
+ if($sb_instagram_ajax_theme){
179
+ $sb_instagram_content .= '<script type="text/javascript">var sb_instagram_js_options = {"sb_instagram_at":"'.trim($options['sb_instagram_at']).'"};</script>';
180
+ $sb_instagram_content .= "<script type='text/javascript' src='".plugins_url( '/js/sb-instagram.js?9' , __FILE__ )."'></script>";
181
+ }
182
 
183
  //Return our feed HTML to display
184
  return $sb_instagram_content;
194
  //Enqueue stylesheet
195
  add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
196
  function sb_instagram_styles_enqueue() {
197
+ wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.css?9', __FILE__) );
198
  wp_enqueue_style( 'sb_instagram_styles' );
199
  wp_enqueue_style( 'sb_instagram_icons', '//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?1', array(), '4.2.0' );
200
  }
203
  add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
204
  function sb_instagram_scripts_enqueue() {
205
  //Register the script to make it available
206
+ wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.js?9' , __FILE__ ), array('jquery'), '1.8', true );
207
 
208
  //Options to pass to JS file
209
  $sb_instagram_settings = get_option('sb_instagram_settings');
211
  'sb_instagram_at' => trim($sb_instagram_settings['sb_instagram_at'])
212
  );
213
 
214
+ $sb_instagram_ajax_theme = $sb_instagram_settings[ 'sb_instagram_ajax_theme' ];
215
+ ( $sb_instagram_ajax_theme == 'on' || $sb_instagram_ajax_theme == 'true' || $sb_instagram_ajax_theme == true ) ? $sb_instagram_ajax_theme = true : $sb_instagram_ajax_theme = false;
216
+
217
  //Enqueue it to load it onto the page
218
+ if( !$sb_instagram_ajax_theme ) wp_enqueue_script('sb_instagram_scripts');
219
 
220
  //Pass option to JS file
221
  wp_localize_script('sb_instagram_scripts', 'sb_instagram_js_options', $data);
225
  add_action( 'wp_head', 'sb_instagram_custom_css' );
226
  function sb_instagram_custom_css() {
227
  $options = get_option('sb_instagram_settings');
 
228
  $sb_instagram_custom_css = $options[ 'sb_instagram_custom_css' ];
229
+
230
+ //Show CSS if an admin (so can see Hide Photos link), if including Custom CSS or if hiding some photos
231
+ ( current_user_can( 'manage_options' ) || !empty($sb_instagram_custom_css) ) ? $sbi_show_css = true : $sbi_show_css = false;
232
+
233
+ if( $sbi_show_css ) echo '<!-- Instagram Feed CSS -->';
234
+ if( $sbi_show_css ) echo "\r\n";
235
+ if( $sbi_show_css ) echo '<style type="text/css">';
236
+
237
+ if( !empty($sb_instagram_custom_css) ){
238
+ echo "\r\n";
239
+ echo stripslashes($sb_instagram_custom_css);
240
+ }
241
+
242
+ if( current_user_can( 'manage_options' ) ){
243
+ echo "\r\n";
244
+ echo "#sbi_mod_error{ display: block; }";
245
+ }
246
+
247
+ if( $sbi_show_css ) echo "\r\n";
248
+ if( $sbi_show_css ) echo '</style>';
249
+ if( $sbi_show_css ) echo "\r\n";
250
  }
251
 
252
 
274
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
275
  }
276
 
277
+ //Run function on plugin activate
278
+ function sb_instagram_activate() {
279
+ $options = get_option('sb_instagram_settings');
280
+ $options[ 'sb_instagram_show_btn' ] = true;
281
+ $options[ 'sb_instagram_show_header' ] = true;
282
+ $options[ 'sb_instagram_show_follow_btn' ] = true;
283
+ update_option( 'sb_instagram_settings', $options );
284
+ }
285
+ register_activation_hook( __FILE__, 'sb_instagram_activate' );
286
 
287
  //Uninstall
288
  function sb_instagram_uninstall()
js/sb-instagram-admin.js CHANGED
@@ -6,7 +6,7 @@ jQuery(document).ready(function($) {
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=50 readonly value="'+token+'"></p><p><b>User ID: </b><input type="text" size=10 readonly value="'+id+'"></p><p>Copy and paste these into the fields below, or use a different Access Token and User ID if you wish.</p></div>');
10
  }
11
 
12
  //Tooltips
@@ -17,4 +17,18 @@ jQuery(document).ready(function($) {
17
  //Add the color picker
18
  if( jQuery('.sbi_colorpick').length > 0 ) jQuery('.sbi_colorpick').wpColorPicker();
19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  });
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>Copy and paste these into the fields below, or use a different Access Token and User ID if you wish.</p></div>');
10
  }
11
 
12
  //Tooltips
17
  //Add the color picker
18
  if( jQuery('.sbi_colorpick').length > 0 ) jQuery('.sbi_colorpick').wpColorPicker();
19
 
20
+ //Check User ID is numeric
21
+ jQuery("#sb_instagram_user_id").change(function() {
22
+
23
+ var sbi_user_id = jQuery('#sb_instagram_user_id').val(),
24
+ $sbi_user_id_error = $(this).closest('td').find('.sbi_user_id_error');
25
+
26
+ if (sbi_user_id.match(/[^0-9, _.-]/)) {
27
+ $sbi_user_id_error.fadeIn();
28
+ } else {
29
+ $sbi_user_id_error.fadeOut();
30
+ }
31
+
32
+ });
33
+
34
  });
js/sb-instagram.js CHANGED
@@ -92,7 +92,9 @@
92
  });
93
 
94
  //Loop through User IDs
95
- looparray.forEach(function(entry) {
 
 
96
 
97
  var userFeed = new instagramfeed({
98
  target: $target,
@@ -165,7 +167,22 @@
165
  });
166
 
167
 
168
- } // End 'after' function
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  });
170
 
171
  $loadBtn.click(function() {
@@ -174,7 +191,7 @@
174
 
175
  userFeed.run();
176
 
177
- }); //End User ID array loop
178
 
179
 
180
  });
92
  });
93
 
94
  //Loop through User IDs
95
+ // looparray.forEach(function(entry) {
96
+ for (var i = 0, len = looparray.length; i < len; i++) {
97
+ var entry = looparray[i];
98
 
99
  var userFeed = new instagramfeed({
100
  target: $target,
167
  });
168
 
169
 
170
+ }, // End 'after' function
171
+ error: function(data) {
172
+ var sbiErrorMsg = '',
173
+ sbiErrorDir = '';
174
+
175
+ if( data.indexOf('access_token') > -1 ){
176
+ sbiErrorMsg += '<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';
177
+ 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.";
178
+ } else if( data.indexOf('user does not exist') > -1 ){
179
+ sbiErrorMsg += '<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';
180
+ 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>";
181
+ }
182
+
183
+ //Add the error message to the page unless the user is displaying multiple ids or hashtags
184
+ if(looparray.length < 2) $('#sb_instagram').empty().append( '<p style="text-align: center;">Unable to show Instagram photos</p><div id="sbi_mod_error">' + sbiErrorMsg + sbiErrorDir + '</div>');
185
+ }
186
  });
187
 
188
  $loadBtn.click(function() {
191
 
192
  userFeed.run();
193
 
194
+ } //End User ID array loop
195
 
196
 
197
  });