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

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) {