Instagram Feed - Version 1.4

Version Description

Important: Due to the upcoming Instagram API changes, in order for the Instagram Feed plugin to continue working after June 1st you must update the plugin and obtain a new Access Token on the plugin's Settings page.

=

Download this release

Release Info

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

Code changes from version 1.3.11 to 1.4

README.txt CHANGED
@@ -2,8 +2,8 @@
2
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, Instagram gallery, Instagram photo, Instagram post, Instagram share, Instagram customized, Instagrams, Instagram feeds, Instagram plugins, Instagram responsive, Instagram mobile feed, Instagram accounts, public Instagram feed, Instagram photography, Instagram galleries, multiple Instagram, Instagram widget, Instagram clean, beautiful Instagram, custom Instagram design
4
Requires at least: 3.0
5
- Tested up to: 4.4
6
- Stable tag: 1.3.11
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
@@ -185,7 +185,22 @@ For more FAQs related to the Instagram Feed plugin please visit the [FAQ section
185
6. Just copy and paste the shortcode into any page, post or widget on your site
186
7. The Instagram Feed plugin Settings pages
187
188
== Changelog ==
189
= 1.3.11 =
190
* Fix: Fixed a bug which was causing the height of the photos to be shorter than they should have been in some themes
191
* Fix: Fixed an issue where when a feed was initially hidden (in a tab, for example) then the photo resolution was defaulting to 'thumbnail'
2
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, Instagram gallery, Instagram photo, Instagram post, Instagram share, Instagram customized, Instagrams, Instagram feeds, Instagram plugins, Instagram responsive, Instagram mobile feed, Instagram accounts, public Instagram feed, Instagram photography, Instagram galleries, multiple Instagram, Instagram widget, Instagram clean, beautiful Instagram, custom Instagram design
4
Requires at least: 3.0
5
+ Tested up to: 4.5.1
6
+ Stable tag: 1.4
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
185
6. Just copy and paste the shortcode into any page, post or widget on your site
186
7. The Instagram Feed plugin Settings pages
187
188
+ == Upgrade Notice ==
189
+
190
+ = 1.4 =
191
+ **Important:** Due to the upcoming Instagram API changes, in order for the Instagram Feed plugin to continue working after **June 1st** you must update the plugin and obtain a new Access Token on the plugin's Settings page.
192
+
193
== Changelog ==
194
+
195
+ = 1.4 =
196
+ * **IMPORTANT: Due to the upcoming Instagram API changes, in order for the Instagram Feed plugin to continue working after June 1st you must obtain a new Access Token by using the Instagram button on the plugin's Settings page.**
197
+ * New: Compatible with Instagram's new API changes effective June 1st
198
+ * New: Added video icons to Instagram posts in the feed which contain videos
199
+ * New: Added a setting to allow you to use a fixed pixel width for the feed on desktop but switch to a 100% width responsive layout on mobile
200
+ * Tweak: Added a width and height attribute to the images to help improve Google PageSpeed score
201
+ * Tweak: A few minor UI tweaks on the settings pages
202
+ * Fix: Minified CSS and JS files
203
+
204
= 1.3.11 =
205
* Fix: Fixed a bug which was causing the height of the photos to be shorter than they should have been in some themes
206
* Fix: Fixed an issue where when a feed was initially hidden (in a tab, for example) then the photo resolution was defaulting to 'thumbnail'
css/sb-instagram-admin.css CHANGED
@@ -167,7 +167,34 @@
167
margin: 3px 6px 0 0;
168
}
169
170
171
172
173
/* Error notice */
@@ -206,4 +233,36 @@
206
-moz-border-radius: 3px;
207
-webkit-border-radius: 3px;
208
border-radius: 3px;
209
}
167
margin: 3px 6px 0 0;
168
}
169
170
+ /* Quick links */
171
+ #sbi_admin .sb_instagram_contents_links{
172
+ float: left;
173
+ clear: both;
174
+ width: 100%;
175
+ padding-bottom: 12px;
176
+ border-bottom: 1px solid #ccc;
177
+ margin-bottom: 15px;
178
+ }
179
+ #sbi_admin .sb_instagram_contents_links a,
180
+ #sbi_admin .sb_instagram_contents_links span{
181
+ display: block;
182
+ float: left;
183
+ padding: 2px 5px;
184
+ }
185
+ #sbi_admin .sb_instagram_contents_links span{
186
+ padding-left: 0;
187
+ }
188
189
+ #sbi_admin #sb_instagram_width_options{
190
+ margin-top: 5px;
191
+ display: none;
192
+ }
193
+ #sbi_admin #sb_instagram_width_options label {
194
+ font-size: 13px;
195
+ position: relative;
196
+ top: -2px;
197
+ }
198
199
200
/* Error notice */
233
-moz-border-radius: 3px;
234
-webkit-border-radius: 3px;
235
border-radius: 3px;
236
+ }
237
+
238
+ /* Update notice */
239
+ .sb_instagram_notice{
240
+ position: relative;
241
+ clear: both;
242
+ width: 96%;
243
+ margin: 20px 0;
244
+ background: #F7E6E6;
245
+ padding: 15px 1.5%;
246
+ border: 1px solid #BA7B7B;
247
+ color: #592626;
248
+
249
+ -moz-border-radius: 3px;
250
+ -webkit-border-radius: 3px;
251
+ border-radius: 3px;
252
+ }
253
+ .sb_instagram_notice .sb_instagram_notice_title{
254
+ font-size: 18px;
255
+ padding-bottom: 5px;
256
+ }
257
+ .sb_instagram_notice p{
258
+ padding: 0;
259
+ margin: 0;
260
+ font-size: 14px;
261
+ }
262
+ .sb_instagram_dismiss{
263
+ position: absolute;
264
+ top: 10px;
265
+ right: 10px;
266
+ color: #dd3d36;
267
+ text-decoration: none;
268
}
css/sb-instagram.css CHANGED
@@ -85,6 +85,10 @@
85
display: block;
86
text-decoration: none;
87
}
88
#sb_instagram a,
89
#sb_instagram a:hover,
90
#sb_instagram a:focus,
@@ -137,6 +141,23 @@
137
display: block;
138
}
139
140
/* Loader */
141
#sb_instagram .sbi_loader{
142
position: relative;
@@ -311,18 +332,22 @@
311
margin-left: 5px;
312
}
313
314
315
/* Mod only error msgs */
316
#sbi_mod_error{
317
display: none;
318
- }
319
- #sbi_mod_error{
320
border: 1px solid #ddd;
321
background: #eee;
322
color: #333;
323
margin: 0;
324
padding: 10px 15px;
325
font-size: 13px;
326
327
-moz-border-radius: 4px;
328
-webkit-border-radius: 4px;
@@ -346,6 +371,18 @@
346
font-size: 12px;
347
}
348
349
350
/* Media queries */
351
@media all and (max-width: 640px){
@@ -363,6 +400,10 @@
363
#sb_instagram.sbi_col_10 #sbi_images .sbi_item{
364
width: 25%;
365
}
366
}
367
@media all and (max-width: 480px){
368
/* Make all cols into 1 col */
85
display: block;
86
text-decoration: none;
87
}
88
+ #sb_instagram .sbi_photo img{
89
+ width: 100%;
90
+ height: 100%;
91
+ }
92
#sb_instagram a,
93
#sb_instagram a:hover,
94
#sb_instagram a:focus,
141
display: block;
142
}
143
144
+ /* Videos */
145
+ #sb_instagram .sbi_type_video .sbi_playbtn{
146
+ display: block !important;
147
+ position: absolute;
148
+ z-index: 0;
149
+ top: 50%;
150
+ left: 50%;
151
+ margin-top: -24px;
152
+ margin-left: -19px;
153
+ padding: 0;
154
+ font-size: 48px;
155
+ color: #fff;
156
+ color: rgba(255,255,255,0.9);
157
+ font-style: normal !important;
158
+ text-shadow: 0 0 8px rgba(0,0,0,0.8);
159
+ }
160
+
161
/* Loader */
162
#sb_instagram .sbi_loader{
163
position: relative;
332
margin-left: 5px;
333
}
334
335
+ /* Error messages */
336
+ #sb_instagram .sb_instagram_error{
337
+ width: 100%;
338
+ text-align: center;
339
+ }
340
341
/* Mod only error msgs */
342
#sbi_mod_error{
343
display: none;
344
border: 1px solid #ddd;
345
background: #eee;
346
color: #333;
347
margin: 0;
348
padding: 10px 15px;
349
font-size: 13px;
350
+ text-align: center;
351
352
-moz-border-radius: 4px;
353
-webkit-border-radius: 4px;
371
font-size: 12px;
372
}
373
374
+ /* Medium */
375
+ #sb_instagram.sbi_medium .sbi_playbtn{
376
+ font-size: 23px;
377
+ margin-top: -12px;
378
+ margin-left: -9px;
379
+ }
380
+ /* Small */
381
+ #sb_instagram.sbi_small .sbi_playbtn{
382
+ font-size: 18px;
383
+ margin-top: -9px;
384
+ margin-left: -7px;
385
+ }
386
387
/* Media queries */
388
@media all and (max-width: 640px){
400
#sb_instagram.sbi_col_10 #sbi_images .sbi_item{
401
width: 25%;
402
}
403
+ /* On mobile make the min-width 100% */
404
+ #sb_instagram.sbi_width_resp{
405
+ width: 100% !important;
406
+ }
407
}
408
@media all and (max-width: 480px){
409
/* Make all cols into 1 col */
instagram-feed-admin.php CHANGED
@@ -34,6 +34,7 @@ function sb_instagram_settings_page() {
34
'sb_instagram_ajax_theme' => false,
35
'sb_instagram_width' => '100',
36
'sb_instagram_width_unit' => '%',
37
'sb_instagram_height' => '',
38
'sb_instagram_num' => '20',
39
'sb_instagram_height_unit' => '',
@@ -71,6 +72,7 @@ function sb_instagram_settings_page() {
71
$sb_instagram_ajax_theme = $options[ 'sb_instagram_ajax_theme' ];
72
$sb_instagram_width = $options[ 'sb_instagram_width' ];
73
$sb_instagram_width_unit = $options[ 'sb_instagram_width_unit' ];
74
$sb_instagram_height = $options[ 'sb_instagram_height' ];
75
$sb_instagram_height_unit = $options[ 'sb_instagram_height_unit' ];
76
$sb_instagram_num = $options[ 'sb_instagram_num' ];
@@ -115,6 +117,8 @@ function sb_instagram_settings_page() {
115
if( isset($_POST[ $sb_instagram_customize_hidden_field ]) && $_POST[ $sb_instagram_customize_hidden_field ] == 'Y' ) {
116
$sb_instagram_width = $_POST[ 'sb_instagram_width' ];
117
$sb_instagram_width_unit = $_POST[ 'sb_instagram_width_unit' ];
118
$sb_instagram_height = $_POST[ 'sb_instagram_height' ];
119
$sb_instagram_height_unit = $_POST[ 'sb_instagram_height_unit' ];
120
$sb_instagram_num = $_POST[ 'sb_instagram_num' ];
@@ -145,6 +149,7 @@ function sb_instagram_settings_page() {
145
146
$options[ 'sb_instagram_width' ] = $sb_instagram_width;
147
$options[ 'sb_instagram_width_unit' ] = $sb_instagram_width_unit;
148
$options[ 'sb_instagram_height' ] = $sb_instagram_height;
149
$options[ 'sb_instagram_height_unit' ] = $sb_instagram_height_unit;
150
$options[ 'sb_instagram_num' ] = $sb_instagram_num;
@@ -184,7 +189,7 @@ function sb_instagram_settings_page() {
184
<div id="sbi_admin" class="wrap">
185
186
<div id="header">
187
- <h2><?php _e('Instagram Feed', 'instagram-feed'); ?></h2>
188
</div>
189
190
<form name="form1" method="post" action="">
@@ -206,8 +211,8 @@ function sb_instagram_settings_page() {
206
<h3><?php _e('Configure', 'instagram-feed'); ?></h3>
207
208
<div id="sbi_config">
209
- <!-- <a href="https://instagram.com/oauth/authorize/?client_id=97584dabe06548f99b54d318f8db509d&redirect_uri=https://smashballoon.com/instagram-feed/instagram-token-plugin/?return_uri=<?php echo admin_url('admin.php?page=sb-instagram-feed'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID', 'instagram-feed'); ?></a> -->
210
- <a href="https://instagram.com/oauth/authorize/?client_id=1654d0c81ad04754a898d89315bec227&redirect_uri=https://smashballoon.com/instagram-feed/instagram-token-plugin/?return_uri=<?php echo admin_url('admin.php?page=sb-instagram-feed'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID', 'instagram-feed'); ?></a>
211
212
213
</div>
@@ -255,8 +260,7 @@ function sb_instagram_settings_page() {
255
<p class="sbi_tooltip"><?php _e("Display posts from an Instagram location ID or location coordinates.", 'instagram-feed'); ?></p>
256
</span>
257
258
- <br />
259
- <span class="sbi_note" style="margin: 10px 0 0 0; display: block;"><?php _e('Separate multiple IDs or hashtags using commas', 'instagram-feed'); ?></span>
260
261
</td>
262
</tr>
@@ -286,9 +290,9 @@ function sb_instagram_settings_page() {
286
<?php submit_button(); ?>
287
</form>
288
289
- <p><?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=customize">Customize your Feed</a>', 'instagram-feed'); ?></p>
290
291
- <p><?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
292
293
294
<?php } // End Configure tab ?>
@@ -296,6 +300,18 @@ function sb_instagram_settings_page() {
296
297
298
<?php if( $sbi_active_tab == 'customize' ) { //Start Configure tab ?>
299
<input type="hidden" name="<?php echo $sb_instagram_customize_hidden_field; ?>" value="Y">
300
301
<h3><?php _e('Customize', 'instagram-feed'); ?></h3>
@@ -305,11 +321,16 @@ function sb_instagram_settings_page() {
305
<tr valign="top">
306
<th scope="row"><label><?php _e('Width of Feed', 'instagram-feed'); ?></label></th>
307
<td>
308
- <input name="sb_instagram_width" type="text" value="<?php esc_attr_e( $sb_instagram_width, 'instagram-feed' ); ?>" size="4" />
309
- <select name="sb_instagram_width_unit">
310
<option value="px" <?php if($sb_instagram_width_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
311
<option value="%" <?php if($sb_instagram_width_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
312
</select>
313
</td>
314
</tr>
315
<tr valign="top">
@@ -331,7 +352,7 @@ function sb_instagram_settings_page() {
331
</tbody>
332
</table>
333
334
- <hr />
335
<h3><?php _e('Photos', 'instagram-feed'); ?></h3>
336
337
<table class="form-table">
@@ -429,7 +450,7 @@ function sb_instagram_settings_page() {
429
<h3><?php _e("Carousel", 'instagram-feed'); ?></h3>
430
<p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Carousels</a></p>
431
432
- <hr />
433
<h3><?php _e("Header", 'instagram-feed'); ?></h3>
434
<table class="form-table">
435
<tbody>
@@ -456,7 +477,7 @@ function sb_instagram_settings_page() {
456
<h3><?php _e("Likes &amp; Comments", 'instagram-feed'); ?></h3>
457
<p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Likes &amp; Comments</a></p>
458
459
- <hr />
460
<h3><?php _e("'Load More' Button", 'instagram-feed'); ?></h3>
461
<table class="form-table">
462
<tbody>
@@ -489,7 +510,7 @@ function sb_instagram_settings_page() {
489
490
<?php submit_button(); ?>
491
492
- <hr />
493
<h3><?php _e("'Follow on Instagram' Button", 'instagram-feed'); ?></h3>
494
<table class="form-table">
495
<tbody>
@@ -596,7 +617,7 @@ function sb_instagram_settings_page() {
596
597
598
599
- <hr />
600
<h3><?php _e('Misc', 'instagram-feed'); ?></h3>
601
602
<table class="form-table">
@@ -611,7 +632,7 @@ function sb_instagram_settings_page() {
611
<textarea name="sb_instagram_custom_css" id="sb_instagram_custom_css" style="width: 70%;" rows="7"><?php esc_attr_e( stripslashes($sb_instagram_custom_css), 'instagram-feed' ); ?></textarea>
612
</td>
613
</tr>
614
- <tr valign="top">
615
<td style="padding-bottom: 0;">
616
<?php _e('<strong style="font-size: 15px;">Custom JavaScript</strong><br />Enter your own custom JavaScript/jQuery in the box below', 'instagram-feed'); ?>
617
</td>
@@ -628,9 +649,9 @@ function sb_instagram_settings_page() {
628
629
</form>
630
631
- <p><?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=display">Display your Feed</a>', 'instagram-feed'); ?></p>
632
633
- <p><?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
634
635
636
<?php } //End Customize tab ?>
@@ -643,6 +664,7 @@ function sb_instagram_settings_page() {
643
<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:", 'instagram-feed'); ?></p>
644
<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).', 'instagram-feed'); ?>" />
645
646
<p><?php _e("If you'd like to display multiple feeds then you can set different settings directly in the shortcode like so:", 'instagram-feed'); ?>
647
<code>[instagram-feed num=9 cols=3]</code></p>
648
<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 />
@@ -913,7 +935,7 @@ function sb_instagram_settings_page() {
913
</tbody>
914
</table>
915
916
- <p><?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
917
918
<?php } //End Display tab ?>
919
@@ -921,13 +943,13 @@ function sb_instagram_settings_page() {
921
<?php if( $sbi_active_tab == 'support' ) { //Start Support tab ?>
922
923
<h3><?php _e('Setting up and Customizing the plugin', 'instagram-feed'); ?></h3>
924
- <p><?php _e('<a href="https://smashballoon.com/instagram-feed/free/" target="_blank">Click here for step-by-step setup directions</a>', 'instagram-feed'); ?></p>
925
<p style="max-width: 960px;">See below for a short video demonstrating how to set up, customize and use the plugin. <b>Please note</b> that the video shows the set up and use of the <b><a href="https://smashballoon.com/instagram-feed/" target="_blank">PRO version</a></b> of the plugin, but the process is the same for this free version. The only difference is some of the features available.</p>
926
<iframe class="youtube-video" src="//www.youtube.com/embed/3tc-UvcTcgk?theme=light&amp;showinfo=0&amp;controls=2" width="960" height="540" frameborder="0" allowfullscreen="allowfullscreen" style="border: 1px solid #ddd;"></iframe>
927
928
<br />
929
<br />
930
- <p><?php _e('Still need help? <a href="http://smashballoon.com/instagram-feed/support/" target="_blank">Request support</a>. Please include your <b>System Info</b> below with all support requests.', 'instagram-feed'); ?></p>
931
932
<h3><?php _e('System Info &nbsp; <i style="color: #666; font-size: 11px; font-weight: normal;">Click the text below to select all</i>', 'instagram-feed'); ?></h3>
933
@@ -981,14 +1003,16 @@ while (list($key, $val) = each($sbi_options)) {
981
<?php } //End Settings page
982
983
function sb_instagram_admin_style() {
984
- wp_register_style( 'sb_instagram_admin_css', plugin_dir_url( __FILE__ ) . 'css/sb-instagram-admin.css?2', false, '1.0.0' );
985
wp_enqueue_style( 'sb_instagram_admin_css' );
986
wp_enqueue_style( 'wp-color-picker' );
987
}
988
add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_style' );
989
990
function sb_instagram_admin_scripts() {
991
- wp_enqueue_script( 'sb_instagram_admin_js', plugin_dir_url( __FILE__ ) . 'js/sb-instagram-admin.js?2' );
992
if( !wp_script_is('jquery-ui-draggable') ) {
993
wp_enqueue_script(
994
array(
@@ -1019,4 +1043,39 @@ function sbi_add_settings_link( $links, $file ) {
1019
return $links;
1020
}
1021
1022
?>
34
'sb_instagram_ajax_theme' => false,
35
'sb_instagram_width' => '100',
36
'sb_instagram_width_unit' => '%',
37
+ 'sb_instagram_feed_width_resp' => false,
38
'sb_instagram_height' => '',
39
'sb_instagram_num' => '20',
40
'sb_instagram_height_unit' => '',
72
$sb_instagram_ajax_theme = $options[ 'sb_instagram_ajax_theme' ];
73
$sb_instagram_width = $options[ 'sb_instagram_width' ];
74
$sb_instagram_width_unit = $options[ 'sb_instagram_width_unit' ];
75
+ $sb_instagram_feed_width_resp = $options[ 'sb_instagram_feed_width_resp' ];
76
$sb_instagram_height = $options[ 'sb_instagram_height' ];
77
$sb_instagram_height_unit = $options[ 'sb_instagram_height_unit' ];
78
$sb_instagram_num = $options[ 'sb_instagram_num' ];
117
if( isset($_POST[ $sb_instagram_customize_hidden_field ]) && $_POST[ $sb_instagram_customize_hidden_field ] == 'Y' ) {
118
$sb_instagram_width = $_POST[ 'sb_instagram_width' ];
119
$sb_instagram_width_unit = $_POST[ 'sb_instagram_width_unit' ];
120
+ isset($_POST[ 'sb_instagram_feed_width_resp' ]) ? $sb_instagram_feed_width_resp = $_POST[ 'sb_instagram_feed_width_resp' ] : $sb_instagram_feed_width_resp = '';
121
+
122
$sb_instagram_height = $_POST[ 'sb_instagram_height' ];
123
$sb_instagram_height_unit = $_POST[ 'sb_instagram_height_unit' ];
124
$sb_instagram_num = $_POST[ 'sb_instagram_num' ];
149
150
$options[ 'sb_instagram_width' ] = $sb_instagram_width;
151
$options[ 'sb_instagram_width_unit' ] = $sb_instagram_width_unit;
152
+ $options[ 'sb_instagram_feed_width_resp' ] = $sb_instagram_feed_width_resp;
153
$options[ 'sb_instagram_height' ] = $sb_instagram_height;
154
$options[ 'sb_instagram_height_unit' ] = $sb_instagram_height_unit;
155
$options[ 'sb_instagram_num' ] = $sb_instagram_num;
189
<div id="sbi_admin" class="wrap">
190
191
<div id="header">
192
+ <h1><?php _e('Instagram Feed', 'instagram-feed'); ?></h1>
193
</div>
194
195
<form name="form1" method="post" action="">
211
<h3><?php _e('Configure', 'instagram-feed'); ?></h3>
212
213
<div id="sbi_config">
214
+ <!-- <a href="https://instagram.com/oauth/authorize/?client_id=1654d0c81ad04754a898d89315bec227&redirect_uri=https://smashballoon.com/instagram-feed/instagram-token-plugin/?return_uri=<?php echo admin_url('admin.php?page=sb-instagram-feed'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID', 'instagram-feed'); ?></a> -->
215
+ <a href="https://instagram.com/oauth/authorize/?client_id=3a81a9fa2a064751b8c31385b91cc25c&redirect_uri=https://smashballoon.com/instagram-feed/instagram-token-plugin/?return_uri=<?php echo admin_url('admin.php?page=sb-instagram-feed'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID', 'instagram-feed'); ?></a>
216
217
218
</div>
260
<p class="sbi_tooltip"><?php _e("Display posts from an Instagram location ID or location coordinates.", 'instagram-feed'); ?></p>
261
</span>
262
263
+ <span class="sbi_note" style="margin: 10px 0 0 0; display: block;"><?php _e('Separate multiple IDs using commas', 'instagram-feed'); ?></span>
264
265
</td>
266
</tr>
290
<?php submit_button(); ?>
291
</form>
292
293
+ <p><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp; <?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=customize">Customize your Feed</a>', 'instagram-feed'); ?></p>
294
295
+ <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
296
297
298
<?php } // End Configure tab ?>
300
301
302
<?php if( $sbi_active_tab == 'customize' ) { //Start Configure tab ?>
303
+
304
+ <p class="sb_instagram_contents_links" id="general">
305
+ <span>Quick links: </span>
306
+ <a href="#general">General</a>
307
+ <a href="#photos">Photos</a>
308
+ <a href="#headeroptions">Header</a>
309
+ <a href="#loadmore">'Load More' Button</a>
310
+ <a href="#follow">'Follow' Button</a>
311
+ <a href="#customcss">Custom CSS</a>
312
+ <a href="#customjs">Custom JavaScript</a>
313
+ </p>
314
+
315
<input type="hidden" name="<?php echo $sb_instagram_customize_hidden_field; ?>" value="Y">
316
317
<h3><?php _e('Customize', 'instagram-feed'); ?></h3>
321
<tr valign="top">
322
<th scope="row"><label><?php _e('Width of Feed', 'instagram-feed'); ?></label></th>
323
<td>
324
+ <input name="sb_instagram_width" type="text" value="<?php esc_attr_e( $sb_instagram_width, 'instagram-feed' ); ?>" id="sb_instagram_width" size="4" />
325
+ <select name="sb_instagram_width_unit" id="sb_instagram_width_unit">
326
<option value="px" <?php if($sb_instagram_width_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
327
<option value="%" <?php if($sb_instagram_width_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
328
</select>
329
+ <div id="sb_instagram_width_options">
330
+ <input name="sb_instagram_feed_width_resp" type="checkbox" id="sb_instagram_feed_width_resp" <?php if($sb_instagram_feed_width_resp == true) echo "checked"; ?> /><label for="sb_instagram_feed_width_resp"><?php _e('Set to be 100% width on mobile?'); ?></label>
331
+ <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e('What does this mean?'); ?></a>
332
+ <p class="sbi_tooltip"><?php _e("If you set a width on the feed then this will be used on mobile as well as desktop. Check this setting to set the feed width to be 100% on mobile so that it is responsive."); ?></p>
333
+ </div>
334
</td>
335
</tr>
336
<tr valign="top">
352
</tbody>
353
</table>
354
355
+ <hr id="photos" />
356
<h3><?php _e('Photos', 'instagram-feed'); ?></h3>
357
358
<table class="form-table">
450
<h3><?php _e("Carousel", 'instagram-feed'); ?></h3>
451
<p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Carousels</a></p>
452
453
+ <hr id="headeroptions" />
454
<h3><?php _e("Header", 'instagram-feed'); ?></h3>
455
<table class="form-table">
456
<tbody>
477
<h3><?php _e("Likes &amp; Comments", 'instagram-feed'); ?></h3>
478
<p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Likes &amp; Comments</a></p>
479
480
+ <hr id="loadmore" />
481
<h3><?php _e("'Load More' Button", 'instagram-feed'); ?></h3>
482
<table class="form-table">
483
<tbody>
510
511
<?php submit_button(); ?>
512
513
+ <hr id="follow" />
514
<h3><?php _e("'Follow on Instagram' Button", 'instagram-feed'); ?></h3>
515
<table class="form-table">
516
<tbody>
617
618
619
620
+ <hr id="customcss" />
621
<h3><?php _e('Misc', 'instagram-feed'); ?></h3>
622
623
<table class="form-table">
632
<textarea name="sb_instagram_custom_css" id="sb_instagram_custom_css" style="width: 70%;" rows="7"><?php esc_attr_e( stripslashes($sb_instagram_custom_css), 'instagram-feed' ); ?></textarea>
633
</td>
634
</tr>
635
+ <tr valign="top" id="customjs">
636
<td style="padding-bottom: 0;">
637
<?php _e('<strong style="font-size: 15px;">Custom JavaScript</strong><br />Enter your own custom JavaScript/jQuery in the box below', 'instagram-feed'); ?>
638
</td>
649
650
</form>
651
652
+ <p><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp; <?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=display">Display your Feed</a>', 'instagram-feed'); ?></p>
653
654
+ <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
655
656
657
<?php } //End Customize tab ?>
664
<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:", 'instagram-feed'); ?></p>
665
<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).', 'instagram-feed'); ?>" />
666
667
+ <h3 style="padding-top: 10px;"><?php _e( 'Multiple Feeds', 'custom-twitter-feed' ); ?></h3>
668
<p><?php _e("If you'd like to display multiple feeds then you can set different settings directly in the shortcode like so:", 'instagram-feed'); ?>
669
<code>[instagram-feed num=9 cols=3]</code></p>
670
<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 />
935
</tbody>
936
</table>
937
938
+ <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>', 'instagram-feed'); ?></p>
939
940
<?php } //End Display tab ?>
941
943
<?php if( $sbi_active_tab == 'support' ) { //Start Support tab ?>
944
945
<h3><?php _e('Setting up and Customizing the plugin', 'instagram-feed'); ?></h3>
946
+ <p><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <?php _e('<a href="https://smashballoon.com/instagram-feed/free/" target="_blank">Click here for step-by-step setup directions</a>', 'instagram-feed'); ?></p>
947
<p style="max-width: 960px;">See below for a short video demonstrating how to set up, customize and use the plugin. <b>Please note</b> that the video shows the set up and use of the <b><a href="https://smashballoon.com/instagram-feed/" target="_blank">PRO version</a></b> of the plugin, but the process is the same for this free version. The only difference is some of the features available.</p>
948
<iframe class="youtube-video" src="//www.youtube.com/embed/3tc-UvcTcgk?theme=light&amp;showinfo=0&amp;controls=2" width="960" height="540" frameborder="0" allowfullscreen="allowfullscreen" style="border: 1px solid #ddd;"></iframe>
949
950
<br />
951
<br />
952
+ <p><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; <?php _e('Still need help? <a href="http://smashballoon.com/instagram-feed/support/" target="_blank">Request support</a>. Please include your <b>System Info</b> below with all support requests.', 'instagram-feed'); ?></p>
953
954
<h3><?php _e('System Info &nbsp; <i style="color: #666; font-size: 11px; font-weight: normal;">Click the text below to select all</i>', 'instagram-feed'); ?></h3>
955
1003
<?php } //End Settings page
1004
1005
function sb_instagram_admin_style() {
1006
+ wp_register_style( 'sb_instagram_admin_css', plugins_url('css/sb-instagram-admin.css', __FILE__), array(), SBIVER );
1007
+ wp_enqueue_style( 'sb_instagram_font_awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
1008
wp_enqueue_style( 'sb_instagram_admin_css' );
1009
wp_enqueue_style( 'wp-color-picker' );
1010
}
1011
add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_style' );
1012
1013
function sb_instagram_admin_scripts() {
1014
+ wp_enqueue_script( '', plugins_url( 'js/sb-instagram-admin.js' , __FILE__ ), array(), SBIVER );
1015
+
1016
if( !wp_script_is('jquery-ui-draggable') ) {
1017
wp_enqueue_script(
1018
array(
1043
return $links;
1044
}
1045
1046
+
1047
+ /* Display a notice that can be dismissed regarding updating the Instagram Access Token */
1048
+ add_action('admin_notices', 'sbi_new_token_notice');
1049
+ function sbi_new_token_notice() {
1050
+
1051
+ global $current_user;
1052
+ $user_id = $current_user->ID;
1053
+
1054
+ // Use this to show notice again
1055
+ // delete_user_meta($user_id, 'sb_instagram_ignore_notice');
1056
+
1057
+ /* Check that the user hasn't already clicked to ignore the message */
1058
+ if ( ! get_user_meta($user_id, 'sb_instagram_ignore_notice') ) {
1059
+
1060
+ _e("
1061
+ <div class='sb_instagram_notice'>
1062
+ <p class='sb_instagram_notice_title'><i class='fa fa-exclamation-circle' aria-hidden='true'></i> <b>Important</b></p>
1063
+ <p><b>Just installed the plugin?</b> You can ignore this notice and hide it using the 'Dismiss' button in the top right corner.</p>
1064
+ <p><b>Just updated the plugin?</b> Due to the upcoming Instagram API changes, in order for the Instagram Feed plugin to continue working after <b><u>June 1st</u></b> you must obtain a new Access Token by using the Instagram button on the plugin's <a href='".get_admin_url()."admin.php?page=sb-instagram-feed'>Settings page</a>.</p>
1065
+ <a class='sb_instagram_dismiss' href='" .esc_url( add_query_arg( 'sb_instagram_token_nag_ignore', '0' ) ). "'><i class='fa fa-times-circle' aria-hidden='true'></i> Dismiss</a>
1066
+ </div>
1067
+ ");
1068
+
1069
+ }
1070
+
1071
+ }
1072
+ add_action('admin_init', 'sb_instagram_token_nag_ignore');
1073
+ function sb_instagram_token_nag_ignore() {
1074
+ global $current_user;
1075
+ $user_id = $current_user->ID;
1076
+ if ( isset($_GET['sb_instagram_token_nag_ignore']) && '0' == $_GET['sb_instagram_token_nag_ignore'] ) {
1077
+ add_user_meta($user_id, 'sb_instagram_ignore_notice', 'true', true);
1078
+ }
1079
+ }
1080
+
1081
?>
instagram-feed.php CHANGED
@@ -3,13 +3,13 @@
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.11
7
Author: Smash Balloon
8
Author URI: http://smashballoon.com/
9
License: GPLv2 or later
10
Text Domain: instagram-feed
11
12
- Copyright 2015 Smash Balloon LLC (email : hey@smashballoon.com)
13
This program is free software; you can redistribute it and/or modify
14
it under the terms of the GNU General Public License as published by
15
the Free Software Foundation; either version 2 of the License, or
@@ -23,7 +23,7 @@ along with this program; if not, write to the Free Software
23
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
24
*/
25
26
- define( 'SBIVER', '1.3.11' );
27
28
//Include admin
29
include dirname( __FILE__ ) .'/instagram-feed-admin.php';
@@ -43,6 +43,7 @@ function display_instagram($atts, $content = null) {
43
'id' => isset($options[ 'sb_instagram_user_id' ]) ? $options[ 'sb_instagram_user_id' ] : '',
44
'width' => isset($options[ 'sb_instagram_width' ]) ? $options[ 'sb_instagram_width' ] : '',
45
'widthunit' => isset($options[ 'sb_instagram_width_unit' ]) ? $options[ 'sb_instagram_width_unit' ] : '',
46
'height' => isset($options[ 'sb_instagram_height' ]) ? $options[ 'sb_instagram_height' ] : '',
47
'heightunit' => isset($options[ 'sb_instagram_height_unit' ]) ? $options[ 'sb_instagram_height_unit' ] : '',
48
'sortby' => isset($options[ 'sb_instagram_sort' ]) ? $options[ 'sb_instagram_sort' ] : '',
@@ -82,6 +83,11 @@ function display_instagram($atts, $content = null) {
82
$sb_instagram_image_padding_unit = $atts['imagepaddingunit'];
83
$sb_instagram_background = $atts['background'];
84
85
//Layout options
86
$sb_instagram_cols = $atts['cols'];
87
@@ -146,6 +152,7 @@ function display_instagram($atts, $content = null) {
146
$sb_instagram_content = '<div id="sb_instagram" class="sbi' . $sbi_class . $sb_instagram_disable_mobile;
147
if ( !empty($sb_instagram_height) ) $sb_instagram_content .= ' sbi_fixed_height ';
148
$sb_instagram_content .= ' sbi_col_' . trim($sb_instagram_cols);
149
$sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '" data-cols="' . trim($sb_instagram_cols) . '" data-options=\'{&quot;sortby&quot;: &quot;'.$atts['sortby'].'&quot;, &quot;headercolor&quot;: &quot;'.$sb_instagram_header_color.'&quot;, &quot;imagepadding&quot;: &quot;'.$sb_instagram_image_padding.'&quot;}\'>';
150
151
//Header
@@ -154,13 +161,19 @@ function display_instagram($atts, $content = null) {
154
//Images container
155
$sb_instagram_content .= '<div id="sbi_images" style="padding: '.$sb_instagram_image_padding . $sb_instagram_image_padding_unit .';">';
156
157
- //Loader
158
- $sb_instagram_content .= '<div class="sbi_loader fa-spin"></div>';
159
-
160
//Error messages
161
- if( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ) $sb_instagram_content .= '<p>Please enter a User ID on the Instagram Feed plugin Settings page</p>';
162
163
- 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>';
164
165
//Load section
166
$sb_instagram_content .= '</div><div id="sbi_load"';
@@ -168,10 +181,10 @@ function display_instagram($atts, $content = null) {
168
$sb_instagram_content .= '>';
169
170
//Load More button
171
- if( $sb_instagram_show_btn ) $sb_instagram_content .= '<a class="sbi_load_btn" href="javascript:void(0);" '.$sb_instagram_button_styles.'>'.$atts['buttontext'].'</a>';
172
173
//Follow button
174
- if( $sb_instagram_show_follow_btn ) $sb_instagram_content .= $sb_instagram_follow_btn_html;
175
176
$sb_instagram_content .= '</div>'; //End #sbi_load
177
@@ -180,7 +193,7 @@ function display_instagram($atts, $content = null) {
180
//If using an ajax theme then add the JS to the bottom of the feed
181
if($sb_instagram_ajax_theme){
182
$sb_instagram_content .= '<script type="text/javascript">var sb_instagram_js_options = {"sb_instagram_at":"'.trim($options['sb_instagram_at']).'"};</script>';
183
- $sb_instagram_content .= "<script type='text/javascript' src='".plugins_url( '/js/sb-instagram.js?ver='.SBIVER , __FILE__ )."'></script>";
184
}
185
186
//Return our feed HTML to display
@@ -197,16 +210,16 @@ add_filter('widget_text', 'do_shortcode');
197
//Enqueue stylesheet
198
add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
199
function sb_instagram_styles_enqueue() {
200
- wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.css', __FILE__), array(), SBIVER );
201
wp_enqueue_style( 'sb_instagram_styles' );
202
- wp_enqueue_style( 'sb_instagram_icons', '//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?1', array(), '4.2.0' );
203
}
204
205
//Enqueue scripts
206
add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
207
function sb_instagram_scripts_enqueue() {
208
//Register the script to make it available
209
- wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.js' , __FILE__ ), array('jquery'), SBIVER, true );
210
211
//Options to pass to JS file
212
$sb_instagram_settings = get_option('sb_instagram_settings');
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.4
7
Author: Smash Balloon
8
Author URI: http://smashballoon.com/
9
License: GPLv2 or later
10
Text Domain: instagram-feed
11
12
+ Copyright 2016 Smash Balloon LLC (email : hey@smashballoon.com)
13
This program is free software; you can redistribute it and/or modify
14
it under the terms of the GNU General Public License as published by
15
the Free Software Foundation; either version 2 of the License, or
23
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
24
*/
25
26
+ define( 'SBIVER', '1.4' );
27
28
//Include admin
29
include dirname( __FILE__ ) .'/instagram-feed-admin.php';
43
'id' => isset($options[ 'sb_instagram_user_id' ]) ? $options[ 'sb_instagram_user_id' ] : '',
44
'width' => isset($options[ 'sb_instagram_width' ]) ? $options[ 'sb_instagram_width' ] : '',
45
'widthunit' => isset($options[ 'sb_instagram_width_unit' ]) ? $options[ 'sb_instagram_width_unit' ] : '',
46
+ 'widthresp' => isset($options[ 'sb_instagram_feed_width_resp' ]) ? $options[ 'sb_instagram_feed_width_resp' ] : '',
47
'height' => isset($options[ 'sb_instagram_height' ]) ? $options[ 'sb_instagram_height' ] : '',
48
'heightunit' => isset($options[ 'sb_instagram_height_unit' ]) ? $options[ 'sb_instagram_height_unit' ] : '',
49
'sortby' => isset($options[ 'sb_instagram_sort' ]) ? $options[ 'sb_instagram_sort' ] : '',
83
$sb_instagram_image_padding_unit = $atts['imagepaddingunit'];
84
$sb_instagram_background = $atts['background'];
85
86
+ //Set to be 100% width on mobile?
87
+ $sb_instagram_width_resp = $atts[ 'widthresp' ];
88
+ ( $sb_instagram_width_resp == 'on' || $sb_instagram_width_resp == 'true' || $sb_instagram_width_resp == true ) ? $sb_instagram_width_resp = true : $sb_instagram_width_resp = false;
89
+ if( $atts[ 'widthresp' ] == 'false' ) $sb_instagram_width_resp = false;
90
+
91
//Layout options
92
$sb_instagram_cols = $atts['cols'];
93
152
$sb_instagram_content = '<div id="sb_instagram" class="sbi' . $sbi_class . $sb_instagram_disable_mobile;
153
if ( !empty($sb_instagram_height) ) $sb_instagram_content .= ' sbi_fixed_height ';
154
$sb_instagram_content .= ' sbi_col_' . trim($sb_instagram_cols);
155
+ if ( $sb_instagram_width_resp ) $sb_instagram_content .= ' sbi_width_resp';
156
$sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '" data-cols="' . trim($sb_instagram_cols) . '" data-options=\'{&quot;sortby&quot;: &quot;'.$atts['sortby'].'&quot;, &quot;headercolor&quot;: &quot;'.$sb_instagram_header_color.'&quot;, &quot;imagepadding&quot;: &quot;'.$sb_instagram_image_padding.'&quot;}\'>';
157
158
//Header
161
//Images container
162
$sb_instagram_content .= '<div id="sbi_images" style="padding: '.$sb_instagram_image_padding . $sb_instagram_image_padding_unit .';">';
163
164
//Error messages
165
+ $sb_instagram_error = false;
166
+ if( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ){
167
+ $sb_instagram_content .= '<div class="sb_instagram_error"><p>Please enter a User ID on the Instagram Feed plugin Settings page</p></div>';
168
+ $sb_instagram_error = true;
169
+ }
170
+ if( empty($options[ 'sb_instagram_at' ]) || !isset($options[ 'sb_instagram_at' ]) ){
171
+ $sb_instagram_content .= '<div class="sb_instagram_error"><p>Please enter an Access Token on the Instagram Feed plugin Settings page</p></div>';
172
+ $sb_instagram_error = true;
173
+ }
174
175
+ //Loader
176
+ if( !$sb_instagram_error ) $sb_instagram_content .= '<div class="sbi_loader fa-spin"></div>';
177
178
//Load section
179
$sb_instagram_content .= '</div><div id="sbi_load"';
181
$sb_instagram_content .= '>';
182
183
//Load More button
184
+ if( $sb_instagram_show_btn && !$sb_instagram_error ) $sb_instagram_content .= '<a class="sbi_load_btn" href="javascript:void(0);" '.$sb_instagram_button_styles.'>'.$atts['buttontext'].'</a>';
185
186
//Follow button
187
+ if( $sb_instagram_show_follow_btn && !$sb_instagram_error ) $sb_instagram_content .= $sb_instagram_follow_btn_html;
188
189
$sb_instagram_content .= '</div>'; //End #sbi_load
190
193
//If using an ajax theme then add the JS to the bottom of the feed
194
if($sb_instagram_ajax_theme){
195
$sb_instagram_content .= '<script type="text/javascript">var sb_instagram_js_options = {"sb_instagram_at":"'.trim($options['sb_instagram_at']).'"};</script>';
196
+ $sb_instagram_content .= "<script type='text/javascript' src='".plugins_url( '/js/sb-instagram.min.js?ver='.SBIVER , __FILE__ )."'></script>";
197
}
198
199
//Return our feed HTML to display
210
//Enqueue stylesheet
211
add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
212
function sb_instagram_styles_enqueue() {
213
+ wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.min.css', __FILE__), array(), SBIVER );
214
wp_enqueue_style( 'sb_instagram_styles' );
215
+ wp_enqueue_style( 'sb_instagram_icons', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css', array(), '4.2.0' );
216
}
217
218
//Enqueue scripts
219
add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
220
function sb_instagram_scripts_enqueue() {
221
//Register the script to make it available
222
+ wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.min.js' , __FILE__ ), array('jquery'), SBIVER, true );
223
224
//Options to pass to JS file
225
$sb_instagram_settings = get_option('sb_instagram_settings');
js/sb-instagram-admin.js CHANGED
@@ -31,4 +31,41 @@ jQuery(document).ready(function($) {
31
32
});
33
34
});
31
32
});
33
34
+ //Mobile width
35
+ var sb_instagram_feed_width = jQuery('#sbi_admin #sb_instagram_width').val(),
36
+ sb_instagram_width_unit = jQuery('#sbi_admin #sb_instagram_width_unit').val(),
37
+ $sb_instagram_width_options = jQuery('#sbi_admin #sb_instagram_width_options');
38
+
39
+ if (typeof sb_instagram_feed_width !== 'undefined') {
40
+
41
+ //Show initially if a width is set
42
+ if( (sb_instagram_feed_width.length > 1 && sb_instagram_width_unit == 'px') || (sb_instagram_feed_width !== '100' && sb_instagram_width_unit == '%') ) $sb_instagram_width_options.show();
43
+
44
+ jQuery('#sbi_admin #sb_instagram_width, #sbi_admin #sb_instagram_width_unit').change(function(){
45
+ sb_instagram_feed_width = jQuery('#sbi_admin #sb_instagram_width').val();
46
+ sb_instagram_width_unit = jQuery('#sbi_admin #sb_instagram_width_unit').val();
47
+
48
+ if( sb_instagram_feed_width.length < 2 || (sb_instagram_feed_width == '100' && sb_instagram_width_unit == '%') ) {
49
+ $sb_instagram_width_options.slideUp();
50
+ } else {
51
+ $sb_instagram_width_options.slideDown();
52
+ }
53
+ });
54
+
55
+ }
56
+
57
+ //Scroll to hash for quick links
58
+ jQuery('#sbi_admin a').click(function() {
59
+ if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
60
+ var target = jQuery(this.hash);
61
+ target = target.length ? target : this.hash.slice(1);
62
+ if (target.length) {
63
+ jQuery('html,body').animate({
64
+ scrollTop: target.offset().top
65
+ }, 500);
66
+ return false;
67
+ }
68
+ }
69
+ });
70
+
71
});
js/sb-instagram.js CHANGED
@@ -111,7 +111,7 @@ if(!sbi_js_exists){
111
sortBy: sortby,
112
resolution: imgRes,
113
limit: parseInt( num, 10 ),
114
- 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}}" /></a></div></div>',
115
filter: function(image) {
116
//Create time for sorting
117
var date = new Date(image.created_time*1000),
@@ -162,7 +162,7 @@ if(!sbi_js_exists){
162
}
163
head.appendChild(style);
164
}();
165
- $self.find(".sbi_photo").sbi_imgLiquid({fill:true});
166
} // End: ( imgRes !== 'thumbnail' ) check
167
168
//Only check the width once the resize event is over
@@ -222,11 +222,17 @@ if(!sbi_js_exists){
222
223
//Fade photos on hover
224
jQuery('#sb_instagram .sbi_photo').each(function(){
225
- jQuery(this).hover(function(){
226
jQuery(this).fadeTo(200, 0.85);
227
}, function(){
228
jQuery(this).stop().fadeTo(500, 1);
229
});
230
});
231
232
//Sort posts by date
@@ -252,6 +258,16 @@ if(!sbi_js_exists){
252
morePosts = [];
253
}, 500);
254
255
256
}, // End 'after' function
257
error: function(data) {
@@ -260,7 +276,7 @@ if(!sbi_js_exists){
260
261
if( data.indexOf('access_token') > -1 ){
262
sbiErrorMsg += '<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';
263
- sbiErrorDir = "<p>There's an issue with the Instagram Access Token that you are using. Please obtain a new Access Token on the plugin's Settings page.";
264
} else if( data.indexOf('user does not exist') > -1 ){
265
sbiErrorMsg += '<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';
266
sbiErrorDir = "<p>Please double check the Instagram User ID that you are using. To find your User ID simply enter your Instagram user name into this <a href='http://www.otzberg.net/iguserid/' target='_blank'>tool</a>.</p>";
111
sortBy: sortby,
112
resolution: imgRes,
113
limit: parseInt( num, 10 ),
114
+ template: '<div class="sbi_item sbi_type_{{model.type}} sbi_new" id="sbi_{{id}}" data-date="{{model.created_time_raw}}"><div class="sbi_photo_wrap"><a class="sbi_photo" href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}" width="200" height="200" /></a></div></div>',
115
filter: function(image) {
116
//Create time for sorting
117
var date = new Date(image.created_time*1000),
162
}
163
head.appendChild(style);
164
}();
165
+ // $self.find(".sbi_photo").sbi_imgLiquid({fill:true});
166
} // End: ( imgRes !== 'thumbnail' ) check
167
168
//Only check the width once the resize event is over
222
223
//Fade photos on hover
224
jQuery('#sb_instagram .sbi_photo').each(function(){
225
+ $sbi_photo = jQuery(this);
226
+ $sbi_photo.hover(function(){
227
jQuery(this).fadeTo(200, 0.85);
228
}, function(){
229
jQuery(this).stop().fadeTo(500, 1);
230
});
231
+
232
+ //Add video icon to videos
233
+ if( $sbi_photo.closest('.sbi_item').hasClass('sbi_type_video') ){
234
+ if( !$sbi_photo.find('.sbi_playbtn').length ) $sbi_photo.append('<i class="fa fa-play sbi_playbtn"></i>');
235
+ }
236
});
237
238
//Sort posts by date
258
morePosts = [];
259
}, 500);
260
261
+ function sbiGetItemSize(){
262
+ $self.removeClass('sbi_small sbi_medium');
263
+ var sbiItemWidth = $self.find('.sbi_item').innerWidth();
264
+ if( sbiItemWidth > 120 && sbiItemWidth < 240 ){
265
+ $self.addClass('sbi_medium');
266
+ } else if( sbiItemWidth <= 120 ){
267
+ $self.addClass('sbi_small');
268
+ }
269
+ }
270
+ sbiGetItemSize();
271
272
}, // End 'after' function
273
error: function(data) {
276
277
if( data.indexOf('access_token') > -1 ){
278
sbiErrorMsg += '<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';
279
+ sbiErrorDir = "<p>There's an issue with the Instagram Access Token that you are using. Please obtain a new Access Token on the plugin's Settings page.<br />If you continue to have an issue with your Access Token then please see <a href='https://smashballoon.com/my-instagram-access-token-keep-expiring/' target='_blank'>this FAQ</a> for more information.";
280
} else if( data.indexOf('user does not exist') > -1 ){
281
sbiErrorMsg += '<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';
282
sbiErrorDir = "<p>Please double check the Instagram User ID that you are using. To find your User ID simply enter your Instagram user name into this <a href='http://www.otzberg.net/iguserid/' target='_blank'>tool</a>.</p>";