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	Instagram Feed
Version	1.4
Comparing to
See all releases

Code changes from version 1.3.11 to 1.4

Files changed (7) hide show

README.txt +17 -2
css/sb-instagram-admin.css +59 -0
css/sb-instagram.css +43 -2
instagram-feed-admin.php +81 -22
instagram-feed.php +27 -14
js/sb-instagram-admin.js +37 -0
js/sb-instagram.js +20 -4

README.txt CHANGED Viewed

	@@ -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 Viewed

@@ -167,7 +167,34 @@
             	margin: 3px 6px 0 0;
+            }
             /* Error notice */
@@ -206,4 +233,36 @@
             	-moz-border-radius: 3px;
             	-webkit-border-radius: 3px;
             	border-radius: 3px;
+            }


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 Viewed

	@@ -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 Viewed

	@@ -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 & 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 & 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&showinfo=0&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   <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>  <?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>  <?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 & 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 & 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>  <?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>  <?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>  <?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>  <?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&showinfo=0&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>  <?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   <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 Viewed

	@@ -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=\'{"sortby": "'.$atts['sortby'].'", "headercolor": "'.$sb_instagram_header_color.'", "imagepadding": "'.$sb_instagram_image_padding.'"}\'>';
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=\'{"sortby": "'.$atts['sortby'].'", "headercolor": "'.$sb_instagram_header_color.'", "imagepadding": "'.$sb_instagram_image_padding.'"}\'>';
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 Viewed

@@ -31,4 +31,41 @@ jQuery(document).ready(function($) {
             	});
             });


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 Viewed

	@@ -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>";