Instagram Feed - Version 1.3.4

Version Description

  • Fix: Used the photo caption to add a more descriptive alt tag to the images
  • Fix: Images are now only displayed once they're fully loaded
  • Fix: Added a stricter CSS implementation for some elements to prevent styles being overridden by themes
  • Fix: Added CSS opacity property to images to prevent issues with lazy loading in some themes
  • Fix: Removed a line of code which was disabling WordPress Debug/Error Reporting. If needed, this can be disabled again by using the setting at the bottom of the plugin's 'Customize' settings page.
  • Fix: Made some JavaScript improvements to the core plugin code
Download this release

Release Info

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

Code changes from version 1.3.3 to 1.3.4

Files changed (5) hide show
  1. README.txt +31 -16
  2. css/sb-instagram.css +17 -1
  3. instagram-feed-admin.php +23 -6
  4. instagram-feed.php +35 -26
  5. js/sb-instagram.js +15 -18
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.3
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -34,10 +34,10 @@ Display Instagram photos from any non-private Instagram accounts, either in the
34
  * **Keep Your Site Looking Fresh** - Automatically push your new Instagram content straight to your site to keep it looking fresh and keeping your audience engaged.
35
  * **Super simple to set up** - Once installed, you can be displaying your Instagram photos within 30 seconds! No confusing steps or Instagram Developer account needed.
36
 
37
- = Featured Review =
38
- "**Simple and concise** - Excellent plugin. Simple and non-bloated. I had a couple small issues with the plugin when I first started using it, but a quick comment on the support forums got a new version pushed out the next day with the fix.
39
 
40
- Awesome support!" - [Josh Jones](https://wordpress.org/support/topic/simple-and-concise-3 'Simple and concise Instagram plugin')
41
 
42
  = Feedback or Support =
43
  We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
@@ -56,7 +56,7 @@ For simple step-by-step directions on how to set up the Instagram Feed plugin pl
56
 
57
  = Shortcode Options =
58
  * **General Options**
59
- * **id** - An Instagram User ID - Example: `[instagram-feed id=1234567]`
60
  * **width** - The width of your feed. Any number - Example: `[instagram-feed width=50]`
61
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
62
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
@@ -67,7 +67,9 @@ For simple step-by-step directions on how to set up the Instagram Feed plugin pl
67
  * **Photo Options**
68
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
69
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
 
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]`
@@ -80,7 +82,7 @@ For simple step-by-step directions on how to set up the Instagram Feed plugin pl
80
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
81
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
82
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
83
- * **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
84
  *
85
  * **'Follow on Instagram' Button Options**
86
  * **showfollow** - Whether to show the 'Follow on Instagram' button. 'true' or 'false' - Example: `[instagram-feed showfollow=true]`
@@ -106,21 +108,22 @@ We've made it super easy. Simply click on the big blue button on the Instagram F
106
 
107
  You can also display photos from other peoples Instagram accounts. To find their Instagram User ID you can use [this tool](http://www.otzberg.net/iguserid/).
108
 
109
- = Are there any security issues with using an Access Token on my site? =
110
-
111
- Nope. The Access Token used in the plugin is a "read only" token, which means that it could never be used maliciously to manipulate your Instagram account.
112
-
113
  = My Instagram feed isn't displaying. Why not!? =
114
 
115
  There are a few common reasons for this:
116
 
117
- * Your Instagram account may be set to private. Instagram doesn't allow photos from private Instagram accounts to be displayed publicly.
118
- * Your Access Token may not be valid. Try clicking on the blue Instagram login button on the plugin's Settings page again and copy and paste the Instagram token it gives you into the plugin's Access Token field.
119
- * Your User ID may not be valid. Be sure you're not using your Instagram username instead of your User ID. You can find your Instagram User ID by using [this tool](http://www.otzberg.net/iguserid/).
120
- * Your website may contain a JavaScript error which is preventing JavaScript from running. The plugin uses JavaScript to load the Instagram photos into your page and so needs JavaScript to be running in order to work. You would need to remove any existing JavaScript errors on your website for the plugin to be able to load in your feed.
 
121
 
122
  If you're still having an issue displaying your feed then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum') with a link to the page where you're trying to display the Instagram feed and, if possible, a link to your Instagram account.
123
 
 
 
 
 
124
  = Can I view the full-size photos or play Instagram videos directly on my website? =
125
 
126
  This is a feature of the [Pro version](http://smashballoon.com/instagram-feed/ 'Instagram Feed Pro') of the plugin, which allows you to view the photos in a pop-up lightbox, support videos, display captions, display photos by hashtag + more!
@@ -134,7 +137,7 @@ You can embed your Instagram feed directly into a template file by using the Wor
134
  The below options are available on the Instagram Feed Settings page but can also be used directly in the `[instagram-feed]` shortcode to customize individual Instagram feeds on a feed-by-feed basis.
135
 
136
  * **General Options**
137
- * **id** - An Instagram User ID - Example: `[instagram-feed id=1234567]`
138
  * **width** - The width of your feed. Any number - Example: `[instagram-feed width=50]`
139
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
140
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
@@ -145,7 +148,9 @@ The below options are available on the Instagram Feed Settings page but can also
145
  * **Photo Options**
146
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
147
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
 
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]`
@@ -158,7 +163,7 @@ The below options are available on the Instagram Feed Settings page but can also
158
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
159
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
160
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
161
- * **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
162
  *
163
  * **'Follow on Instagram' Button Options**
164
  * **showfollow** - Whether to show the 'Follow on Instagram' button. 'true' or 'false' - Example: `[instagram-feed showfollow=true]`
@@ -168,6 +173,8 @@ The below options are available on the Instagram Feed Settings page but can also
168
 
169
  For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/ 'Instagram Feed Pro').
170
 
 
 
171
  == Screenshots ==
172
 
173
  1. Default plugin styling
@@ -179,6 +186,14 @@ For more shortcode options, check out the [Pro version](http://smashballoon.com/
179
  7. The Instagram Feed plugin Settings pages
180
 
181
  == Changelog ==
 
 
 
 
 
 
 
 
182
  = 1.3.3 =
183
  * Fix: Fixed an issue with the 'Load more' button not always showing when displaying Instagram photos from multiple User IDs
184
  * Fix: Moved the initiating sbi_init function outside of the jQuery ready function so that it can be called externally if needed by Ajax powered themes/plugins
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.4
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
34
  * **Keep Your Site Looking Fresh** - Automatically push your new Instagram content straight to your site to keep it looking fresh and keeping your audience engaged.
35
  * **Super simple to set up** - Once installed, you can be displaying your Instagram photos within 30 seconds! No confusing steps or Instagram Developer account needed.
36
 
37
+ = Featured Reviews =
38
+ "**Simple and concise** - Excellent plugin. Simple and non-bloated. I had a couple small issues with the plugin when I first started using it, but a quick comment on the support forums got a new version pushed out the next day with the fix. Awesome support!" - [Josh Jones](https://wordpress.org/support/topic/simple-and-concise-3 'Simple and concise Instagram plugin')
39
 
40
+ "**Great plugin, greater support!** - I've definitely noticed an increase in followers on Instagram since I added this plugin to my sidebar. Thanks for the help in making some adjustments...looks and works great!" - [BNOTP](https://wordpress.org/support/topic/thanks-for-a-great-plugin-6 'Great plugin, greater Support!')
41
 
42
  = Feedback or Support =
43
  We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
56
 
57
  = Shortcode Options =
58
  * **General Options**
59
+ * **id** - An Instagram User ID - Example: `[instagram-feed id=AN_INSTAGRAM_USER_ID]`
60
  * **width** - The width of your feed. Any number - Example: `[instagram-feed width=50]`
61
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
62
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
67
  * **Photo Options**
68
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
69
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
70
+
71
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
72
+ * **imageres** - The resolution/size of the photos. 'auto', full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
73
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
74
  * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
75
  * **disablemobile** - Disable the mobile layout. 'true' or 'false' - Example: `[instagram-feed disablemobile=true]`
82
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
83
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
84
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
85
+ * **buttontext** - The text used for the button - Example: `[instagram-feed buttontext="Load More Photos"]`
86
  *
87
  * **'Follow on Instagram' Button Options**
88
  * **showfollow** - Whether to show the 'Follow on Instagram' button. 'true' or 'false' - Example: `[instagram-feed showfollow=true]`
108
 
109
  You can also display photos from other peoples Instagram accounts. To find their Instagram User ID you can use [this tool](http://www.otzberg.net/iguserid/).
110
 
 
 
 
 
111
  = My Instagram feed isn't displaying. Why not!? =
112
 
113
  There are a few common reasons for this:
114
 
115
+ * **Your Access Token may not be valid.** Try clicking on the blue Instagram login button on the plugin's Settings page again and copy and paste the Instagram token it gives you into the plugin's Access Token field.
116
+ * **Your Instagram account may be set to private.** Your Instagram account may be set to private. Instagram doesn't allow photos from private Instagram accounts to be displayed publicly.
117
+ * **Your User ID may not be valid**. Be sure you're not using your Instagram username instead of your User ID. You can find your Instagram User ID by using [this tool](http://www.otzberg.net/iguserid/).
118
+ * **The plugin’s JavaScript file isn’t being included in your page.** This is most likely because your WordPress theme is missing the WordPress [wp_footer](http://codex.wordpress.org/Function_Reference/wp_footer) function which is required for plugins to be able to add their JavaScript files to your page. You can fix this by opening your theme's **footer.php** file and adding the following directly before the closing </body> tag: `<?php wp_footer(); ?>`
119
+ * **Your website may contain a JavaScript error which is preventing JavaScript from running.** The plugin uses JavaScript to load the Instagram photos into your page and so needs JavaScript to be running in order to work. You would need to remove any existing JavaScript errors on your website for the plugin to be able to load in your feed.
120
 
121
  If you're still having an issue displaying your feed then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum') with a link to the page where you're trying to display the Instagram feed and, if possible, a link to your Instagram account.
122
 
123
+ = Are there any security issues with using an Access Token on my site? =
124
+
125
+ Nope. The Access Token used in the plugin is a "read only" token, which means that it could never be used maliciously to manipulate your Instagram account.
126
+
127
  = Can I view the full-size photos or play Instagram videos directly on my website? =
128
 
129
  This is a feature of the [Pro version](http://smashballoon.com/instagram-feed/ 'Instagram Feed Pro') of the plugin, which allows you to view the photos in a pop-up lightbox, support videos, display captions, display photos by hashtag + more!
137
  The below options are available on the Instagram Feed Settings page but can also be used directly in the `[instagram-feed]` shortcode to customize individual Instagram feeds on a feed-by-feed basis.
138
 
139
  * **General Options**
140
+ * **id** - An Instagram User ID - Example: `[instagram-feed id=AN_INSTAGRAM_USER_ID]`
141
  * **width** - The width of your feed. Any number - Example: `[instagram-feed width=50]`
142
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
143
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
148
  * **Photo Options**
149
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
150
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
151
+
152
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
153
+ * **imageres** - The resolution/size of the photos. 'auto', full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
154
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
155
  * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
156
  * **disablemobile** - Disable the mobile layout. 'true' or 'false' - Example: `[instagram-feed disablemobile=true]`
163
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
164
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
165
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
166
+ * **buttontext** - The text used for the button - Example: `[instagram-feed buttontext="Load More Photos"]`
167
  *
168
  * **'Follow on Instagram' Button Options**
169
  * **showfollow** - Whether to show the 'Follow on Instagram' button. 'true' or 'false' - Example: `[instagram-feed showfollow=true]`
173
 
174
  For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/ 'Instagram Feed Pro').
175
 
176
+ For more FAQs related to the Instagram Feed plugin please visit the [FAQ section](https://smashballoon.com/instagram-feed/support/faq/ 'Instagram Feed plugin FAQs') on our website.
177
+
178
  == Screenshots ==
179
 
180
  1. Default plugin styling
186
  7. The Instagram Feed plugin Settings pages
187
 
188
  == Changelog ==
189
+ = 1.3.4 =
190
+ * Fix: Used the photo caption to add a more descriptive alt tag to the images
191
+ * Fix: Images are now only displayed once they're fully loaded
192
+ * Fix: Added a stricter CSS implementation for some elements to prevent styles being overridden by themes
193
+ * Fix: Added CSS opacity property to images to prevent issues with lazy loading in some themes
194
+ * Fix: Removed a line of code which was disabling WordPress Debug/Error Reporting. If needed, this can be disabled again by using the setting at the bottom of the plugin's 'Customize' settings page.
195
+ * Fix: Made some JavaScript improvements to the core plugin code
196
+
197
  = 1.3.3 =
198
  * Fix: Fixed an issue with the 'Load more' button not always showing when displaying Instagram photos from multiple User IDs
199
  * Fix: Moved the initiating sbi_init function outside of the jQuery ready function so that it can be called externally if needed by Ajax powered themes/plugins
css/sb-instagram.css CHANGED
@@ -95,6 +95,10 @@
95
  padding: 0 !important;
96
  margin: 0 !important;
97
  max-width: 100% !important;
 
 
 
 
98
  }
99
  #sb_instagram .sbi_link{
100
  display: none;
@@ -180,7 +184,6 @@
180
  }
181
  /* Profile pic hover */
182
  #sb_instagram .sbi_header_img_hover{
183
- display: none;
184
  position: absolute;
185
  width: 100%;
186
  top: 0;
@@ -189,6 +192,19 @@
189
  text-align: center;
190
  color: #fff;
191
  background: rgba(0,0,0,0.75);
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  }
193
  #sb_instagram .sbi_header_img_hover .fa{
194
  position: absolute;
95
  padding: 0 !important;
96
  margin: 0 !important;
97
  max-width: 100% !important;
98
+ opacity: 1 !important;
99
+ }
100
+ #sb_instagram img.sbi_hide{
101
+ display: none;
102
  }
103
  #sb_instagram .sbi_link{
104
  display: none;
184
  }
185
  /* Profile pic hover */
186
  #sb_instagram .sbi_header_img_hover{
 
187
  position: absolute;
188
  width: 100%;
189
  top: 0;
192
  text-align: center;
193
  color: #fff;
194
  background: rgba(0,0,0,0.75);
195
+
196
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
197
+ filter: alpha(opacity=0);
198
+ -moz-opacity: 0;
199
+ -khtml-opacity: 0;
200
+ opacity: 0;
201
+ border-radius: 40px;
202
+ transition: opacity 0.2s;
203
+ }
204
+ /* Fade the Instagram icon in when hovering on the header */
205
+ #sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
206
+ #sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
207
+ opacity: 1;
208
  }
209
  #sb_instagram .sbi_header_img_hover .fa{
210
  position: absolute;
instagram-feed-admin.php CHANGED
@@ -58,7 +58,8 @@ function sb_instagram_settings_page() {
58
  'sb_instagram_follow_btn_text' => 'Follow on Instagram',
59
  //Misc
60
  'sb_instagram_custom_css' => '',
61
- 'sb_instagram_custom_js' => ''
 
62
  );
63
  //Save defaults in an array
64
  $options = wp_parse_args(get_option('sb_instagram_settings'), $sb_instagram_settings_defaults);
@@ -96,6 +97,7 @@ function sb_instagram_settings_page() {
96
  //Misc
97
  $sb_instagram_custom_css = $options[ 'sb_instagram_custom_css' ];
98
  $sb_instagram_custom_js = $options[ 'sb_instagram_custom_js' ];
 
99
 
100
  // See if the user has posted us some information. If they did, this hidden field will be set to 'Y'.
101
  if( isset($_POST[ $sb_instagram_settings_hidden_field ]) && $_POST[ $sb_instagram_settings_hidden_field ] == 'Y' ) {
@@ -141,6 +143,8 @@ function sb_instagram_settings_page() {
141
  //Misc
142
  $sb_instagram_custom_css = $_POST[ 'sb_instagram_custom_css' ];
143
  $sb_instagram_custom_js = $_POST[ 'sb_instagram_custom_js' ];
 
 
144
 
145
  $options[ 'sb_instagram_width' ] = $sb_instagram_width;
146
  $options[ 'sb_instagram_width_unit' ] = $sb_instagram_width_unit;
@@ -169,6 +173,7 @@ function sb_instagram_settings_page() {
169
  //Misc
170
  $options[ 'sb_instagram_custom_css' ] = $sb_instagram_custom_css;
171
  $options[ 'sb_instagram_custom_js' ] = $sb_instagram_custom_js;
 
172
 
173
  } //End customize tab post
174
 
@@ -548,6 +553,18 @@ function sb_instagram_settings_page() {
548
  </tr>
549
  </tbody>
550
  </table>
 
 
 
 
 
 
 
 
 
 
 
 
551
 
552
  <?php submit_button(); ?>
553
 
@@ -572,8 +589,8 @@ function sb_instagram_settings_page() {
572
  <code>[instagram-feed num=9 cols=3]</code></p>
573
  <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 />
574
  <code>[instagram-feed]</code><br />
575
- <code>[instagram-feed id="12986477"]</code><br />
576
- <code>[instagram-feed id="12986477,13460080" num=4 cols=4 showfollow=false]</code>
577
  </p>
578
  <p><?php _e("See the table below for a full list of available shortcode options:"); ?></p>
579
 
@@ -590,8 +607,8 @@ function sb_instagram_settings_page() {
590
  <tr class="sbi_table_header"><td colspan=3><?php _e("Configure Options"); ?></td></tr>
591
  <tr class="sbi_pro">
592
  <td>type</td>
593
- <td><?php _e("Display photos from a User ID (user) or Hashtag (hashtag)"); ?></td>
594
- <td><code>[instagram-feed type=hashtag]</code></td>
595
  </tr>
596
  <tr>
597
  <td>id</td>
@@ -727,7 +744,7 @@ function sb_instagram_settings_page() {
727
  <tr>
728
  <td>showfollow</td>
729
  <td><?php _e("Whether to show the 'Follow on Instagram' button. 'true' or 'false'."); ?></td>
730
- <td><code>[instagram-feed showfollow=true]</code></td>
731
  </tr>
732
  <tr>
733
  <td>followcolor</td>
58
  'sb_instagram_follow_btn_text' => 'Follow on Instagram',
59
  //Misc
60
  'sb_instagram_custom_css' => '',
61
+ 'sb_instagram_custom_js' => '',
62
+ 'sb_instagram_disable_error_reporting' => false,
63
  );
64
  //Save defaults in an array
65
  $options = wp_parse_args(get_option('sb_instagram_settings'), $sb_instagram_settings_defaults);
97
  //Misc
98
  $sb_instagram_custom_css = $options[ 'sb_instagram_custom_css' ];
99
  $sb_instagram_custom_js = $options[ 'sb_instagram_custom_js' ];
100
+ $sb_instagram_disable_error_reporting = $options[ 'sb_instagram_disable_error_reporting' ];
101
 
102
  // See if the user has posted us some information. If they did, this hidden field will be set to 'Y'.
103
  if( isset($_POST[ $sb_instagram_settings_hidden_field ]) && $_POST[ $sb_instagram_settings_hidden_field ] == 'Y' ) {
143
  //Misc
144
  $sb_instagram_custom_css = $_POST[ 'sb_instagram_custom_css' ];
145
  $sb_instagram_custom_js = $_POST[ 'sb_instagram_custom_js' ];
146
+ (isset($_POST[ 'sb_instagram_disable_error_reporting' ])) ? $sb_instagram_disable_error_reporting = $_POST[ 'sb_instagram_disable_error_reporting' ] : $sb_instagram_disable_error_reporting = '';
147
+
148
 
149
  $options[ 'sb_instagram_width' ] = $sb_instagram_width;
150
  $options[ 'sb_instagram_width_unit' ] = $sb_instagram_width_unit;
173
  //Misc
174
  $options[ 'sb_instagram_custom_css' ] = $sb_instagram_custom_css;
175
  $options[ 'sb_instagram_custom_js' ] = $sb_instagram_custom_js;
176
+ $options[ 'sb_instagram_disable_error_reporting' ] = $sb_instagram_disable_error_reporting;
177
 
178
  } //End customize tab post
179
 
553
  </tr>
554
  </tbody>
555
  </table>
556
+ <table class="form-table">
557
+ <tbody>
558
+ <tr valign="top">
559
+ <th class="bump-left"><label for="sb_instagram_disable_error_reporting" class="bump-left"><?php _e("Disable WordPress Debug"); ?></label></th>
560
+ <td>
561
+ <input name="sb_instagram_disable_error_reporting" type="checkbox" id="sb_instagram_disable_error_reporting" <?php if($sb_instagram_disable_error_reporting == true) echo "checked"; ?> />
562
+ <label for="sb_instagram_disable_error_reporting"><?php _e('Yes'); ?></label>
563
+ <i style="color: #666; font-size: 11px; margin-left: 5px;"><?php _e('Not recommended'); ?></i>
564
+ </td>
565
+ </tr>
566
+ </tbody>
567
+ </table>
568
 
569
  <?php submit_button(); ?>
570
 
589
  <code>[instagram-feed num=9 cols=3]</code></p>
590
  <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 />
591
  <code>[instagram-feed]</code><br />
592
+ <code>[instagram-feed id="ANOTHER_USER_ID"]</code><br />
593
+ <code>[instagram-feed id="ANOTHER_USER_ID, YET_ANOTHER_USER_ID" num=4 cols=4 showfollow=false]</code>
594
  </p>
595
  <p><?php _e("See the table below for a full list of available shortcode options:"); ?></p>
596
 
607
  <tr class="sbi_table_header"><td colspan=3><?php _e("Configure Options"); ?></td></tr>
608
  <tr class="sbi_pro">
609
  <td>type</td>
610
+ <td><?php _e("Display photos from a User ID (user)<br />Display posts from a Hashtag (hashtag)"); ?></td>
611
+ <td><code>[instagram-feed type=user]</code><br /><code>[instagram-feed type=hashtag]</code></td>
612
  </tr>
613
  <tr>
614
  <td>id</td>
744
  <tr>
745
  <td>showfollow</td>
746
  <td><?php _e("Whether to show the 'Follow on Instagram' button. 'true' or 'false'."); ?></td>
747
+ <td><code>[instagram-feed showfollow=false]</code></td>
748
  </tr>
749
  <tr>
750
  <td>followcolor</td>
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.3
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
@@ -37,31 +37,31 @@ function display_instagram($atts, $content = null) {
37
  //Pass in shortcode attrbutes
38
  $atts = shortcode_atts(
39
  array(
40
- 'id' => $options[ 'sb_instagram_user_id' ],
41
- 'width' => $options[ 'sb_instagram_width' ],
42
- 'widthunit' => $options[ 'sb_instagram_width_unit' ],
43
- 'height' => $options[ 'sb_instagram_height' ],
44
- 'heightunit' => $options[ 'sb_instagram_height_unit' ],
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' ],
52
- 'showbutton' => $options[ 'sb_instagram_show_btn' ],
53
- 'buttoncolor' => $options[ 'sb_instagram_btn_background' ],
54
- 'buttontextcolor' => $options[ 'sb_instagram_btn_text_color' ],
55
- 'buttontext' => $options[ 'sb_instagram_btn_text' ],
56
- 'imageres' => $options[ 'sb_instagram_image_res' ],
57
- 'showfollow' => $options[ 'sb_instagram_show_follow_btn' ],
58
- 'followcolor' => $options[ 'sb_instagram_folow_btn_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
 
@@ -272,6 +272,8 @@ function sb_instagram_custom_js() {
272
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
273
  if( !empty($sb_instagram_custom_js) ) echo '</script>';
274
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
 
 
275
  }
276
 
277
  //Run function on plugin activate
@@ -300,5 +302,12 @@ function sb_instagram_uninstall()
300
  }
301
  register_uninstall_hook( __FILE__, 'sb_instagram_uninstall' );
302
 
303
- error_reporting(0);
 
 
 
 
 
 
 
304
  ?>
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.4
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
37
  //Pass in shortcode attrbutes
38
  $atts = shortcode_atts(
39
  array(
40
+ 'id' => isset($options[ 'sb_instagram_user_id' ]) ? $options[ 'sb_instagram_user_id' ] : '',
41
+ 'width' => isset($options[ 'sb_instagram_width' ]) ? $options[ 'sb_instagram_width' ] : '',
42
+ 'widthunit' => isset($options[ 'sb_instagram_width_unit' ]) ? $options[ 'sb_instagram_width_unit' ] : '',
43
+ 'height' => isset($options[ 'sb_instagram_height' ]) ? $options[ 'sb_instagram_height' ] : '',
44
+ 'heightunit' => isset($options[ 'sb_instagram_height_unit' ]) ? $options[ 'sb_instagram_height_unit' ] : '',
45
+ 'sortby' => isset($options[ 'sb_instagram_sort' ]) ? $options[ 'sb_instagram_sort' ] : '',
46
+ 'num' => isset($options[ 'sb_instagram_num' ]) ? $options[ 'sb_instagram_num' ] : '',
47
+ 'cols' => isset($options[ 'sb_instagram_cols' ]) ? $options[ 'sb_instagram_cols' ] : '',
48
+ 'disablemobile' => isset($options[ 'sb_instagram_disable_mobile' ]) ? $options[ 'sb_instagram_disable_mobile' ] : '',
49
+ 'imagepadding' => isset($options[ 'sb_instagram_image_padding' ]) ? $options[ 'sb_instagram_image_padding' ] : '',
50
+ 'imagepaddingunit' => isset($options[ 'sb_instagram_image_padding_unit' ]) ? $options[ 'sb_instagram_image_padding_unit' ] : '',
51
+ 'background' => isset($options[ 'sb_instagram_background' ]) ? $options[ 'sb_instagram_background' ] : '',
52
+ 'showbutton' => isset($options[ 'sb_instagram_show_btn' ]) ? $options[ 'sb_instagram_show_btn' ] : '',
53
+ 'buttoncolor' => isset($options[ 'sb_instagram_btn_background' ]) ? $options[ 'sb_instagram_btn_background' ] : '',
54
+ 'buttontextcolor' => isset($options[ 'sb_instagram_btn_text_color' ]) ? $options[ 'sb_instagram_btn_text_color' ] : '',
55
+ 'buttontext' => isset($options[ 'sb_instagram_btn_text' ]) ? $options[ 'sb_instagram_btn_text' ] : '',
56
+ 'imageres' => isset($options[ 'sb_instagram_image_res' ]) ? $options[ 'sb_instagram_image_res' ] : '',
57
+ 'showfollow' => isset($options[ 'sb_instagram_show_follow_btn' ]) ? $options[ 'sb_instagram_show_follow_btn' ] : '',
58
+ 'followcolor' => isset($options[ 'sb_instagram_folow_btn_background' ]) ? $options[ 'sb_instagram_folow_btn_background' ] : '',
59
+ 'followtextcolor' => isset($options[ 'sb_instagram_follow_btn_text_color' ]) ? $options[ 'sb_instagram_follow_btn_text_color' ] : '',
60
+ 'followtext' => isset($options[ 'sb_instagram_follow_btn_text' ]) ? $options[ 'sb_instagram_follow_btn_text' ] : '',
61
+ 'showheader' => isset($options[ 'sb_instagram_show_header' ]) ? $options[ 'sb_instagram_show_header' ] : '',
62
+ 'headercolor' => isset($options[ 'sb_instagram_header_color' ]) ? $options[ 'sb_instagram_header_color' ] : '',
63
  'class' => '',
64
+ 'ajaxtheme' => isset($options[ 'sb_instagram_ajax_theme' ]) ? $options[ 'sb_instagram_ajax_theme' ] : ''
65
  ), $atts);
66
 
67
 
272
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
273
  if( !empty($sb_instagram_custom_js) ) echo '</script>';
274
  if( !empty($sb_instagram_custom_js) ) echo "\r\n";
275
+
276
+
277
  }
278
 
279
  //Run function on plugin activate
302
  }
303
  register_uninstall_hook( __FILE__, 'sb_instagram_uninstall' );
304
 
305
+
306
+ //Toggle PHP Error Reporting
307
+ $options = get_option('sb_instagram_settings');
308
+ isset($options[ 'sb_instagram_disable_error_reporting' ]) ? $sb_instagram_disable_error_reporting = $options[ 'sb_instagram_disable_error_reporting' ] : $sb_instagram_disable_error_reporting = true;
309
+ if( $sb_instagram_disable_error_reporting ){
310
+ error_reporting(0);
311
+ }
312
+
313
  ?>
js/sb-instagram.js CHANGED
@@ -11,7 +11,6 @@
11
 
12
  })(jQuery);
13
 
14
-
15
  function sbi_init(){
16
 
17
  jQuery('#sb_instagram.sbi').each(function(){
@@ -20,7 +19,7 @@ function sbi_init(){
20
  $target = $self.find('#sbi_images'),
21
  $loadBtn = $self.find("#sbi_load .sbi_load_btn"),
22
  imgRes = 'standard_resolution',
23
- cols = parseInt( this.getAttribute('data-cols') ),
24
  num = this.getAttribute('data-num'),
25
  //Convert styles JSON string to an object
26
  feedOptions = JSON.parse( this.getAttribute('data-options') ),
@@ -76,12 +75,12 @@ function sbi_init(){
76
  url: sbi_page_url,
77
  dataType: "jsonp",
78
  success: function(data) {
79
- $header = '<a href="http://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link" '+headerStyles+'>';
80
  $header += '<div class="sbi_header_text">';
81
- $header += '<h3'
82
  if( data.data.bio.length == 0 ) $header += ' class="sbi_no_bio"';
83
  $header += '>@'+data.data.username+'</h3>';
84
- if( data.data.bio.length ) $header += '<p class="sbi_bio">'+data.data.bio+'</p>';
85
  $header += '</div>';
86
  $header += '<div class="sbi_header_img">';
87
  $header += '<div class="sbi_header_img_hover"><i class="fa fa-instagram"></i></div>';
@@ -91,7 +90,7 @@ function sbi_init(){
91
  //Add the header
92
  $self.find('.sb_instagram_header').prepend( $header );
93
  //Change the URL of the follow button
94
- if( $self.find('.sbi_follow_btn').length ) $self.find('.sbi_follow_btn a').attr('href', 'http://instagram.com/' + data.data.username )
95
  }
96
  });
97
 
@@ -104,8 +103,8 @@ function sbi_init(){
104
  get: getType,
105
  sortBy: sortby,
106
  resolution: imgRes,
107
- limit: parseInt( num ),
108
- 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="{{image}}" /></a></div></div>',
109
  filter: function(image) {
110
  //Create time for sorting
111
  var date = new Date(image.created_time*1000),
@@ -114,7 +113,7 @@ function sbi_init(){
114
 
115
  return true;
116
  },
117
- userId: parseInt( entry ),
118
  accessToken: sb_instagram_js_options.sb_instagram_at,
119
  after: function() {
120
 
@@ -142,12 +141,17 @@ function sbi_init(){
142
  });
143
  });
144
 
 
 
 
 
 
145
 
146
  //Sort posts by date
147
  //only sort the new posts that are loaded in, not the whole feed, otherwise some photos will switch positions due to dates
148
  $self.find('#sbi_images .sbi_item.sbi_new').sort(function (a, b) {
149
- var aComp = jQuery(a).attr("data-date"),
150
- bComp = jQuery(b).attr("data-date");
151
 
152
  if(sortby == 'none'){
153
  //Order by date
@@ -166,13 +170,6 @@ function sbi_init(){
166
  morePosts = [];
167
  }, 500);
168
 
169
- //Header profile pic hover
170
- $self.find('.sb_instagram_header a').hover(function(){
171
- $self.find('.sb_instagram_header .sbi_header_img_hover').fadeIn(200);
172
- }, function(){
173
- $self.find('.sb_instagram_header .sbi_header_img_hover').stop().fadeOut(600);
174
- });
175
-
176
 
177
  }, // End 'after' function
178
  error: function(data) {
11
 
12
  })(jQuery);
13
 
 
14
  function sbi_init(){
15
 
16
  jQuery('#sb_instagram.sbi').each(function(){
19
  $target = $self.find('#sbi_images'),
20
  $loadBtn = $self.find("#sbi_load .sbi_load_btn"),
21
  imgRes = 'standard_resolution',
22
+ cols = parseInt( this.getAttribute('data-cols'), 10 ),
23
  num = this.getAttribute('data-num'),
24
  //Convert styles JSON string to an object
25
  feedOptions = JSON.parse( this.getAttribute('data-options') ),
75
  url: sbi_page_url,
76
  dataType: "jsonp",
77
  success: function(data) {
78
+ $header = '<a href="http://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link">';
79
  $header += '<div class="sbi_header_text">';
80
+ $header += '<h3 ' + headerStyles;
81
  if( data.data.bio.length == 0 ) $header += ' class="sbi_no_bio"';
82
  $header += '>@'+data.data.username+'</h3>';
83
+ if( data.data.bio.length ) $header += '<p class="sbi_bio" '+headerStyles+'>'+data.data.bio+'</p>';
84
  $header += '</div>';
85
  $header += '<div class="sbi_header_img">';
86
  $header += '<div class="sbi_header_img_hover"><i class="fa fa-instagram"></i></div>';
90
  //Add the header
91
  $self.find('.sb_instagram_header').prepend( $header );
92
  //Change the URL of the follow button
93
+ if( $self.find('.sbi_follow_btn').length ) $self.find('.sbi_follow_btn a').prop('href', 'http://instagram.com/' + data.data.username )
94
  }
95
  });
96
 
103
  get: getType,
104
  sortBy: sortby,
105
  resolution: imgRes,
106
+ limit: parseInt( num, 10 ),
107
+ template: '<div class="sbi_item sbi_type_{{model.type}} sbi_new" id="sbi_{{id}}" data-date="{{model.created_time_raw}}"><div class="sbi_photo_wrap"><a class="sbi_photo" href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}" class="sbi_hide" /></a></div></div>',
108
  filter: function(image) {
109
  //Create time for sorting
110
  var date = new Date(image.created_time*1000),
113
 
114
  return true;
115
  },
116
+ userId: parseInt( entry, 10 ),
117
  accessToken: sb_instagram_js_options.sb_instagram_at,
118
  after: function() {
119
 
141
  });
142
  });
143
 
144
+ //Only show images once they are fully loaded. Prevents issue in Firefox where alt text is shown initially before images appear.
145
+ jQuery('#sb_instagram .sbi_new img').on('load', function() {
146
+ jQuery(this).removeClass('sbi_hide');
147
+ });
148
+
149
 
150
  //Sort posts by date
151
  //only sort the new posts that are loaded in, not the whole feed, otherwise some photos will switch positions due to dates
152
  $self.find('#sbi_images .sbi_item.sbi_new').sort(function (a, b) {
153
+ var aComp = jQuery(a).data('date'),
154
+ bComp = jQuery(b).data('date');
155
 
156
  if(sortby == 'none'){
157
  //Order by date
170
  morePosts = [];
171
  }, 500);
172
 
 
 
 
 
 
 
 
173
 
174
  }, // End 'after' function
175
  error: function(data) {