Instagram Feed - Version 1.1

Version Description

  • New: Added an option to set the number of photos to be initially displayed
  • New: Added an option to show or hide the 'Load More' button
  • New: Added 'Step 3' to the Settings page explaining how to display your feed using the [instagram-feed] shortcode
  • New: Added a full list of all available shortcode options to help you if customizing multiple feeds
Download this release

Release Info

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

Code changes from version 1.0.2 to 1.1

Files changed (5) hide show
  1. README.txt +14 -8
  2. css/sb-instagram-admin.css +21 -1
  3. instagram-feed-admin.php +111 -0
  4. instagram-feed.php +11 -4
  5. js/sb-instagram.js +1 -0
README.txt CHANGED
@@ -1,9 +1,9 @@
1
  === Instagram Feed ===
2
  Contributors: smashballoon
3
- Tags: Instagram, Instagram feed, Instagram photos
4
  Requires at least: 3.0
5
  Tested up to: 3.9.1
6
- Stable tag: 1.0.2
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -17,7 +17,7 @@ Display the Instagram photo feed of any non-private Instagram account.
17
  * Super simple to set up
18
  * Completely responsive and mobile ready
19
  * Display multiple Instagram feeds on the same page or on different pages throughout your site
20
- * Customize the width, height, number of columns, image size, background color, image spacing and more!
21
 
22
  Lots more features coming soon!
23
 
@@ -27,19 +27,19 @@ Lots more features coming soon!
27
  2. Activate the plugin through the 'Plugins' menu in WordPress.
28
  3. Navigate to the 'Instagram Feed' settings page to configure your Instagram feed.
29
  4. Use the shortcode `[instagram-feed]` in your page, post or widget to display your photos.
30
- 5. You can display multiple Instagram feeds by using shortcode options, for example: `[instagram-feed id=1234567 cols=3 width=50%]`
31
 
32
  == Frequently Asked Questions ==
33
 
34
  = Can I display multiple Instagram feeds on my site? =
35
 
36
- Yep. You can display multiple Instagram feeds by using shortcode options, for example: `[instagram-feed id=1234567 cols=3 width=50%]`.
37
 
38
  = How do I find my Instagram Access Token and User ID =
39
 
40
- We've made it super easy. Simply click on the big blue button on the Instagram plugins Settings page and log into your Instagram account. The plugin will then retrieve and display both your Access Token and User ID.
41
 
42
- You can also display photos from other peoples Instagram accounts. To find their User ID you can use [this tool](http://jelled.com/instagram/lookup-user-id).
43
 
44
  = Are there any security issues with using an Access Token on my site? =
45
 
@@ -48,12 +48,18 @@ Nope. The Access Token used in the plugin is a "read only" token, which means th
48
  == Screenshots ==
49
 
50
  1. Display your Instagram photos in multiple columns and with a scrollbar if desired.
51
- 2. Customize the number of columns, colors and size of the feed.
52
  3. An example of two columns with no space between photos.
53
  4. The Instagram Settings page. Super simple to set up and customize.
54
 
55
  == Changelog ==
56
 
 
 
 
 
 
 
57
  = 1.0.2 =
58
  * Fix: Fixed an issue with the Instagram login URL on the Settings page
59
 
1
  === Instagram Feed ===
2
  Contributors: smashballoon
3
+ Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin
4
  Requires at least: 3.0
5
  Tested up to: 3.9.1
6
+ Stable tag: 1.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
17
  * Super simple to set up
18
  * Completely responsive and mobile ready
19
  * Display multiple Instagram feeds on the same page or on different pages throughout your site
20
+ * Customize the width, height, number of phtos, number of columns, image size, background color, image spacing and more!
21
 
22
  Lots more features coming soon!
23
 
27
  2. Activate the plugin through the 'Plugins' menu in WordPress.
28
  3. Navigate to the 'Instagram Feed' settings page to configure your Instagram feed.
29
  4. Use the shortcode `[instagram-feed]` in your page, post or widget to display your photos.
30
+ 5. You can display multiple Instagram feeds by using shortcode options, for example: `[instagram-feed id=1234567 cols=3 width=50 widthunit=%]`
31
 
32
  == Frequently Asked Questions ==
33
 
34
  = Can I display multiple Instagram feeds on my site? =
35
 
36
+ Yep. You can display multiple Instagram feeds by using shortcode options, for example: `[instagram-feed id=1234567 cols=3 width=50 widthunit=%]`.
37
 
38
  = How do I find my Instagram Access Token and User ID =
39
 
40
+ We've made it super easy. Simply click on the big blue button on the Instagram plugins Settings page and log into your Instagram account. The plugin will then retrieve and display both your Access Token and User ID from Instagram.
41
 
42
+ You can also display photos from other peoples Instagram accounts. To find their Instagram User ID you can use [this tool](http://jelled.com/instagram/lookup-user-id).
43
 
44
  = Are there any security issues with using an Access Token on my site? =
45
 
48
  == Screenshots ==
49
 
50
  1. Display your Instagram photos in multiple columns and with a scrollbar if desired.
51
+ 2. Customize the number of columns, colors and size of the Instagram feed.
52
  3. An example of two columns with no space between photos.
53
  4. The Instagram Settings page. Super simple to set up and customize.
54
 
55
  == Changelog ==
56
 
57
+ = 1.1 =
58
+ * New: Added an option to set the number of photos to be initially displayed
59
+ * New: Added an option to show or hide the 'Load More' button
60
+ * New: Added 'Step 3' to the Settings page explaining how to display your feed using the [instagram-feed] shortcode
61
+ * New: Added a full list of all available shortcode options to help you if customizing multiple feeds
62
+
63
  = 1.0.2 =
64
  * Fix: Fixed an issue with the Instagram login URL on the Settings page
65
 
css/sb-instagram-admin.css CHANGED
@@ -31,7 +31,7 @@
31
  }
32
  #sbi_admin hr{
33
  border: none;
34
- margin: 25px 0;
35
  border-bottom: 1px solid #ccc;
36
  }
37
  /* Instagram btn */
@@ -62,6 +62,26 @@
62
  background-color: #487aa9;
63
  color: #fff;
64
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
 
66
  /* Config info */
67
  #sbi_config{
31
  }
32
  #sbi_admin hr{
33
  border: none;
34
+ margin: 15px 0 30px 0;
35
  border-bottom: 1px solid #ccc;
36
  }
37
  /* Instagram btn */
62
  background-color: #487aa9;
63
  color: #fff;
64
  }
65
+ #sbi_admin .sbi_note{
66
+ font-size: 12px;
67
+ font-style: italic;
68
+ margin-left: 10px;
69
+ }
70
+ #sbi_admin table.sbi_shortcode_table{
71
+ border-collapse: collapse;
72
+ }
73
+ #sbi_admin table.sbi_shortcode_table th,
74
+ #sbi_admin table.sbi_shortcode_table td{
75
+ border: 1px solid #999;
76
+ padding: 0.5rem;
77
+ text-align: left;
78
+ }
79
+ #sbi_admin table.sbi_shortcode_table th{
80
+ background: rgba(0,0,0,0.1);
81
+ }
82
+ #sbi_admin table.sbi_shortcode_table td{
83
+ background: rgba(255,255,255,0.5);
84
+ }
85
 
86
  /* Config info */
87
  #sbi_config{
instagram-feed-admin.php CHANGED
@@ -32,12 +32,14 @@ function sb_instagram_settings_page() {
32
  'sb_instagram_width' => '100',
33
  'sb_instagram_width_unit' => '%',
34
  'sb_instagram_height' => '',
 
35
  'sb_instagram_height_unit' => '',
36
  'sb_instagram_cols' => '',
37
  'sb_instagram_image_padding' => '',
38
  'sb_instagram_image_padding_unit' => '',
39
  // 'sb_instagram_sort' => '',
40
  'sb_instagram_background' => '',
 
41
  'sb_instagram_btn_background' => '',
42
  'sb_instagram_btn_text_color' => '',
43
  'sb_instagram_image_res' => 'full'
@@ -53,11 +55,13 @@ function sb_instagram_settings_page() {
53
  $sb_instagram_width_unit = $options[ 'sb_instagram_width_unit' ];
54
  $sb_instagram_height = $options[ 'sb_instagram_height' ];
55
  $sb_instagram_height_unit = $options[ 'sb_instagram_height_unit' ];
 
56
  $sb_instagram_cols = $options[ 'sb_instagram_cols' ];
57
  $sb_instagram_image_padding = $options[ 'sb_instagram_image_padding' ];
58
  $sb_instagram_image_padding_unit = $options[ 'sb_instagram_image_padding_unit' ];
59
  // $sb_instagram_sort = $options[ 'sb_instagram_sort' ];
60
  $sb_instagram_background = $options[ 'sb_instagram_background' ];
 
61
  $sb_instagram_btn_background = $options[ 'sb_instagram_btn_background' ];
62
  $sb_instagram_btn_text_color = $options[ 'sb_instagram_btn_text_color' ];
63
  $sb_instagram_image_res = $options[ 'sb_instagram_image_res' ];
@@ -71,11 +75,13 @@ function sb_instagram_settings_page() {
71
  $sb_instagram_width_unit = $_POST[ 'sb_instagram_width_unit' ];
72
  $sb_instagram_height = $_POST[ 'sb_instagram_height' ];
73
  $sb_instagram_height_unit = $_POST[ 'sb_instagram_height_unit' ];
 
74
  $sb_instagram_cols = $_POST[ 'sb_instagram_cols' ];
75
  $sb_instagram_image_padding = $_POST[ 'sb_instagram_image_padding' ];
76
  $sb_instagram_image_padding_unit = $_POST[ 'sb_instagram_image_padding_unit' ];
77
  // $sb_instagram_sort = $_POST[ 'sb_instagram_sort' ];
78
  $sb_instagram_background = $_POST[ 'sb_instagram_background' ];
 
79
  $sb_instagram_btn_background = $_POST[ 'sb_instagram_btn_background' ];
80
  $sb_instagram_btn_text_color = $_POST[ 'sb_instagram_btn_text_color' ];
81
  $sb_instagram_image_res = $_POST[ 'sb_instagram_image_res' ];
@@ -86,11 +92,13 @@ function sb_instagram_settings_page() {
86
  $options[ 'sb_instagram_width_unit' ] = $sb_instagram_width_unit;
87
  $options[ 'sb_instagram_height' ] = $sb_instagram_height;
88
  $options[ 'sb_instagram_height_unit' ] = $sb_instagram_height_unit;
 
89
  $options[ 'sb_instagram_cols' ] = $sb_instagram_cols;
90
  $options[ 'sb_instagram_image_padding' ] = $sb_instagram_image_padding;
91
  $options[ 'sb_instagram_image_padding_unit' ] = $sb_instagram_image_padding_unit;
92
  // $options[ 'sb_instagram_sort' ] = $sb_instagram_sort;
93
  $options[ 'sb_instagram_background' ] = $sb_instagram_background;
 
94
  $options[ 'sb_instagram_btn_background' ] = $sb_instagram_btn_background;
95
  $options[ 'sb_instagram_btn_text_color' ] = $sb_instagram_btn_text_color;
96
  $options[ 'sb_instagram_image_res' ] = $sb_instagram_image_res;
@@ -135,6 +143,7 @@ function sb_instagram_settings_page() {
135
  </tbody>
136
  </table>
137
 
 
138
  <hr />
139
 
140
  <table class="form-table">
@@ -160,6 +169,13 @@ function sb_instagram_settings_page() {
160
  </select>
161
  </td>
162
  </tr>
 
 
 
 
 
 
 
163
  <tr valign="top">
164
  <th scope="row"><label><?php _e('Number of Columns'); ?></label></th>
165
  <td>
@@ -222,6 +238,12 @@ function sb_instagram_settings_page() {
222
  <input name="sb_instagram_background" type="text" value="<?php esc_attr_e( $sb_instagram_background ); ?>" class="sbi_colorpick" />
223
  </td>
224
  </tr>
 
 
 
 
 
 
225
  <tr valign="top">
226
  <th scope="row"><label><?php _e('Button Background Color'); ?></label></th>
227
  <td>
@@ -241,6 +263,95 @@ function sb_instagram_settings_page() {
241
  <?php submit_button(); ?>
242
 
243
  </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
244
  </div> <!-- end #admin -->
245
 
246
  <?php
32
  'sb_instagram_width' => '100',
33
  'sb_instagram_width_unit' => '%',
34
  'sb_instagram_height' => '',
35
+ 'sb_instagram_num' => '20',
36
  'sb_instagram_height_unit' => '',
37
  'sb_instagram_cols' => '',
38
  'sb_instagram_image_padding' => '',
39
  'sb_instagram_image_padding_unit' => '',
40
  // 'sb_instagram_sort' => '',
41
  'sb_instagram_background' => '',
42
+ 'sb_instagram_show_btn' => true,
43
  'sb_instagram_btn_background' => '',
44
  'sb_instagram_btn_text_color' => '',
45
  'sb_instagram_image_res' => 'full'
55
  $sb_instagram_width_unit = $options[ 'sb_instagram_width_unit' ];
56
  $sb_instagram_height = $options[ 'sb_instagram_height' ];
57
  $sb_instagram_height_unit = $options[ 'sb_instagram_height_unit' ];
58
+ $sb_instagram_num = $options[ 'sb_instagram_num' ];
59
  $sb_instagram_cols = $options[ 'sb_instagram_cols' ];
60
  $sb_instagram_image_padding = $options[ 'sb_instagram_image_padding' ];
61
  $sb_instagram_image_padding_unit = $options[ 'sb_instagram_image_padding_unit' ];
62
  // $sb_instagram_sort = $options[ 'sb_instagram_sort' ];
63
  $sb_instagram_background = $options[ 'sb_instagram_background' ];
64
+ $sb_instagram_show_btn = $options[ 'sb_instagram_show_btn' ];
65
  $sb_instagram_btn_background = $options[ 'sb_instagram_btn_background' ];
66
  $sb_instagram_btn_text_color = $options[ 'sb_instagram_btn_text_color' ];
67
  $sb_instagram_image_res = $options[ 'sb_instagram_image_res' ];
75
  $sb_instagram_width_unit = $_POST[ 'sb_instagram_width_unit' ];
76
  $sb_instagram_height = $_POST[ 'sb_instagram_height' ];
77
  $sb_instagram_height_unit = $_POST[ 'sb_instagram_height_unit' ];
78
+ $sb_instagram_num = $_POST[ 'sb_instagram_num' ];
79
  $sb_instagram_cols = $_POST[ 'sb_instagram_cols' ];
80
  $sb_instagram_image_padding = $_POST[ 'sb_instagram_image_padding' ];
81
  $sb_instagram_image_padding_unit = $_POST[ 'sb_instagram_image_padding_unit' ];
82
  // $sb_instagram_sort = $_POST[ 'sb_instagram_sort' ];
83
  $sb_instagram_background = $_POST[ 'sb_instagram_background' ];
84
+ $sb_instagram_show_btn = $_POST[ 'sb_instagram_show_btn' ];
85
  $sb_instagram_btn_background = $_POST[ 'sb_instagram_btn_background' ];
86
  $sb_instagram_btn_text_color = $_POST[ 'sb_instagram_btn_text_color' ];
87
  $sb_instagram_image_res = $_POST[ 'sb_instagram_image_res' ];
92
  $options[ 'sb_instagram_width_unit' ] = $sb_instagram_width_unit;
93
  $options[ 'sb_instagram_height' ] = $sb_instagram_height;
94
  $options[ 'sb_instagram_height_unit' ] = $sb_instagram_height_unit;
95
+ $options[ 'sb_instagram_num' ] = $sb_instagram_num;
96
  $options[ 'sb_instagram_cols' ] = $sb_instagram_cols;
97
  $options[ 'sb_instagram_image_padding' ] = $sb_instagram_image_padding;
98
  $options[ 'sb_instagram_image_padding_unit' ] = $sb_instagram_image_padding_unit;
99
  // $options[ 'sb_instagram_sort' ] = $sb_instagram_sort;
100
  $options[ 'sb_instagram_background' ] = $sb_instagram_background;
101
+ $options[ 'sb_instagram_show_btn' ] = $sb_instagram_show_btn;
102
  $options[ 'sb_instagram_btn_background' ] = $sb_instagram_btn_background;
103
  $options[ 'sb_instagram_btn_text_color' ] = $sb_instagram_btn_text_color;
104
  $options[ 'sb_instagram_image_res' ] = $sb_instagram_image_res;
143
  </tbody>
144
  </table>
145
 
146
+ <?php submit_button(); ?>
147
  <hr />
148
 
149
  <table class="form-table">
169
  </select>
170
  </td>
171
  </tr>
172
+ <tr valign="top">
173
+ <th scope="row"><label><?php _e('Number of Photos'); ?></label></th>
174
+ <td>
175
+ <input name="sb_instagram_num" type="text" value="<?php esc_attr_e( $sb_instagram_num ); ?>" size="4" />
176
+ <span class="sbi_note"><?php _e('Number of photos to show initially. Maximum of 33.'); ?></span>
177
+ </td>
178
+ </tr>
179
  <tr valign="top">
180
  <th scope="row"><label><?php _e('Number of Columns'); ?></label></th>
181
  <td>
238
  <input name="sb_instagram_background" type="text" value="<?php esc_attr_e( $sb_instagram_background ); ?>" class="sbi_colorpick" />
239
  </td>
240
  </tr>
241
+ <tr valign="top">
242
+ <th scope="row"><label><?php _e("Show the 'Load More' button"); ?></label></th>
243
+ <td>
244
+ <input type="checkbox" name="sb_instagram_show_btn" id="sb_instagram_show_btn" <?php if($sb_instagram_show_btn == true) echo 'checked="checked"' ?> />
245
+ </td>
246
+ </tr>
247
  <tr valign="top">
248
  <th scope="row"><label><?php _e('Button Background Color'); ?></label></th>
249
  <td>
263
  <?php submit_button(); ?>
264
 
265
  </form>
266
+
267
+ <hr />
268
+
269
+ <h3><?php _e('Step 3: Displaying your Feed'); ?></h3>
270
+ <p><?php _e("Copy and paste the following shortcode directly into the page, post or widget where you'd like the feed to show up:"); ?></p>
271
+ <input type="text" value="[instagram-feed]" size="16" readonly="readonly" style="text-align: center;" onclick="this.focus();this.select()" title="<?php _e('To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac).'); ?>" />
272
+
273
+ <p><?php _e("If you'd like to display multiple feeds then you can set different settings directly in the shortcode like so:"); ?>
274
+ <code>[instagram-feed num=9 cols=3]</code></p>
275
+ <p><?php _e("See the table below for a full list of available shortcode options:"); ?></p>
276
+
277
+ <table class="sbi_shortcode_table">
278
+ <tbody>
279
+ <tr valign="top">
280
+ <th scope="row"><?php _e('Shortcode option'); ?></th>
281
+ <th scope="row"><?php _e('Description'); ?></th>
282
+ <th scope="row"><?php _e('Example'); ?></th>
283
+ </tr>
284
+ <tr>
285
+ <td>id</td>
286
+ <td><?php _e('An Instagram User ID'); ?></td>
287
+ <td><code>[instagram-feed id=1234567]</code></td>
288
+ </tr>
289
+ <td>width</td>
290
+ <td>The width of your feed. Any number.</td>
291
+ <td><code>[instagram-feed width=50]</code></td>
292
+ </tr>
293
+ <tr>
294
+ <td>widthunit</td>
295
+ <td>The unit of the width. 'px' or '%'</td>
296
+ <td><code>[instagram-feed widthunit=%]</code></td>
297
+ </tr>
298
+ <tr>
299
+ <td>height</td>
300
+ <td>The height of your feed. Any number.</td>
301
+ <td><code>[instagram-feed height=250]</code></td>
302
+ </tr>
303
+ <tr>
304
+ <td>heightunit</td>
305
+ <td>The unit of the height. 'px' or '%'</td>
306
+ <td><code>[instagram-feed heightunit=px]</code></td>
307
+ </tr>
308
+ <tr>
309
+ <td>num</td>
310
+ <td>The number of photos to display initially. Maximum is 33.</td>
311
+ <td><code>[instagram-feed num=10]</code></td>
312
+ </tr>
313
+ <tr>
314
+ <td>cols</td>
315
+ <td>The number of columns in your feed. 1 - 10.</td>
316
+ <td><code>[instagram-feed cols=5]</code></td>
317
+ </tr>
318
+ <tr>
319
+ <td>imagepadding</td>
320
+ <td>The spacing around your photos</td>
321
+ <td><code>[instagram-feed imagepadding=10]</code></td>
322
+ </tr>
323
+ <tr>
324
+ <td>imagepaddingunit</td>
325
+ <td>The unit of the padding. 'px' or '%'</td>
326
+ <td><code>[instagram-feed imagepadding=px]</code></td>
327
+ </tr>
328
+ <tr>
329
+ <td>background</td>
330
+ <td>The background color of the feed. Any hex color code.</td>
331
+ <td><code>[instagram-feed background=#ffff00]</code></td>
332
+ </tr>
333
+ <tr>
334
+ <td>showbutton</td>
335
+ <td>Whether to show the 'Load More' button. 'true' or 'false'.</td>
336
+ <td><code>[instagram-feed showbutton='false']</code></td>
337
+ </tr>
338
+ <tr>
339
+ <td>buttoncolor</td>
340
+ <td>The background color of the button. Any hex color code.</td>
341
+ <td><code>[instagram-feed buttoncolor=#000]</code></td>
342
+ </tr>
343
+ <tr>
344
+ <td>buttontextcolor</td>
345
+ <td>The text color of the button. Any hex color code.</td>
346
+ <td><code>[instagram-feed buttontextcolor=#fff]</code></td>
347
+ </tr>
348
+ <tr>
349
+ <td>imageres</td>
350
+ <td>The resolution/size of the photos. 'full', 'medium' or 'thumb'.</td>
351
+ <td><code>[instagram-feed imageres=full]</code></td>
352
+ </tr>
353
+ </tbody>
354
+ </table>
355
  </div> <!-- end #admin -->
356
 
357
  <?php
instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
  Description: Add a simple customizable Instagram feed to your website
6
- Version: 1.0.2
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
@@ -42,10 +42,12 @@ function display_instagram($atts, $content = null) {
42
  'widthunit' => $options[ 'sb_instagram_width_unit' ],
43
  'height' => $options[ 'sb_instagram_height' ],
44
  'heightunit' => $options[ 'sb_instagram_height_unit' ],
 
45
  'cols' => $options[ 'sb_instagram_cols' ],
46
  'imagepadding' => $options[ 'sb_instagram_image_padding' ],
47
  'imagepaddingunit' => $options[ 'sb_instagram_image_padding_unit' ],
48
  'background' => $options[ 'sb_instagram_background' ],
 
49
  'buttoncolor' => $options[ 'sb_instagram_btn_background' ],
50
  'buttontextcolor' => $options[ 'sb_instagram_btn_text_color' ],
51
  'imageres' => $options[ 'sb_instagram_image_res' ]
@@ -74,6 +76,8 @@ function display_instagram($atts, $content = null) {
74
  $sb_instagram_styles .= '"';
75
 
76
  //Load more button styles
 
 
77
  $sb_instagram_btn_background = $atts['buttoncolor'];
78
  $sb_instagram_btn_text_color = $atts['buttontextcolor'];
79
 
@@ -95,16 +99,19 @@ function display_instagram($atts, $content = null) {
95
 
96
  //Dats attrs
97
  $sb_instagram_content .= 'data-id="' . $sb_instagram_user_id . '"';
 
98
  $sb_instagram_content .= 'data-res="' . trim($atts['imageres']) . '"';
99
 
100
  $sb_instagram_content .= '><div id="sbi_images" style="padding: '.$sb_instagram_image_padding . $sb_instagram_image_padding_unit .';">';
101
 
102
  //Error messages
103
- if( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ) $sb_instagram_content .= '<p>Please enter a User ID either on the Instagram plugins Settings page or directly in the shortcode, like so: [instagram id=1234567]</p>';
104
- if( empty($options[ 'sb_instagram_at' ]) || !isset($options[ 'sb_instagram_at' ]) ) $sb_instagram_content .= '<p>Please enter an Access Token on the Instagram plugins Settings page</p>';
105
 
106
  $sb_instagram_content .= '</div>
107
- <div id="sbi_load"><a href="javascript:void(0);" '.$sb_instagram_button_styles.'>Load More...</a></div>
 
 
108
  </div>';
109
 
110
  //Return our feed HTML to display
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
  Description: Add a simple customizable Instagram feed to your website
6
+ Version: 1.1
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
42
  'widthunit' => $options[ 'sb_instagram_width_unit' ],
43
  'height' => $options[ 'sb_instagram_height' ],
44
  'heightunit' => $options[ 'sb_instagram_height_unit' ],
45
+ 'num' => $options[ 'sb_instagram_num' ],
46
  'cols' => $options[ 'sb_instagram_cols' ],
47
  'imagepadding' => $options[ 'sb_instagram_image_padding' ],
48
  'imagepaddingunit' => $options[ 'sb_instagram_image_padding_unit' ],
49
  'background' => $options[ 'sb_instagram_background' ],
50
+ 'showbutton' => $options[ 'sb_instagram_show_btn' ],
51
  'buttoncolor' => $options[ 'sb_instagram_btn_background' ],
52
  'buttontextcolor' => $options[ 'sb_instagram_btn_text_color' ],
53
  'imageres' => $options[ 'sb_instagram_image_res' ]
76
  $sb_instagram_styles .= '"';
77
 
78
  //Load more button styles
79
+ $sb_instagram_show_btn = $atts['showbutton'];
80
+ if($sb_instagram_show_btn == 'false') $sb_instagram_show_btn = false;
81
  $sb_instagram_btn_background = $atts['buttoncolor'];
82
  $sb_instagram_btn_text_color = $atts['buttontextcolor'];
83
 
99
 
100
  //Dats attrs
101
  $sb_instagram_content .= 'data-id="' . $sb_instagram_user_id . '"';
102
+ $sb_instagram_content .= 'data-num="' . trim($atts['num']) . '"';
103
  $sb_instagram_content .= 'data-res="' . trim($atts['imageres']) . '"';
104
 
105
  $sb_instagram_content .= '><div id="sbi_images" style="padding: '.$sb_instagram_image_padding . $sb_instagram_image_padding_unit .';">';
106
 
107
  //Error messages
108
+ if( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ) $sb_instagram_content .= '<p>Please enter a User ID either on the Instagram plugin Settings page or directly in the shortcode, like so: [instagram-feed id=1234567]</p>';
109
+ if( empty($options[ 'sb_instagram_at' ]) || !isset($options[ 'sb_instagram_at' ]) ) $sb_instagram_content .= '<p>Please enter an Access Token on the Instagram Feed plugin Settings page</p>';
110
 
111
  $sb_instagram_content .= '</div>
112
+ <div id="sbi_load">';
113
+ if( $sb_instagram_show_btn ) $sb_instagram_content .= '<a href="javascript:void(0);" '.$sb_instagram_button_styles.'>Load More...</a>';
114
+ $sb_instagram_content .= '</div>
115
  </div>';
116
 
117
  //Return our feed HTML to display
js/sb-instagram.js CHANGED
@@ -27,6 +27,7 @@
27
  target: $target,
28
  get: "user",
29
  resolution: imgres,
 
30
  // Template option breaks in IE8 and below
31
  // template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a><p>{{caption}}<br />{{comments}}<br />{{likes}}<br />{{location}}<br />{{id}}</p>',
32
  userId: parseInt( this.getAttribute('data-id') ),
27
  target: $target,
28
  get: "user",
29
  resolution: imgres,
30
+ limit: parseInt( this.getAttribute('data-num') ),
31
  // Template option breaks in IE8 and below
32
  // template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a><p>{{caption}}<br />{{comments}}<br />{{likes}}<br />{{location}}<br />{{id}}</p>',
33
  userId: parseInt( this.getAttribute('data-id') ),