Instagram Feed - Version 1.3.11

Version Description

Fix: Fixed a bug which was causing the height of the photos to be shorter than they should have been in some themes
Fix: Fixed an issue where when a feed was initially hidden (in a tab, for example) then the photo resolution was defaulting to 'thumbnail'

Release Info

Developer	smashballoon
Plugin	Instagram Feed
Version	1.3.11
Comparing to
See all releases

Code changes from version 1.3.10 to 1.3.11

Files changed (4) hide show

README.txt +7 -3
instagram-feed-admin.php +206 -206
instagram-feed.php +3 -2
js/sb-instagram.js +23 -17

README.txt CHANGED Viewed

	@@ -1,9 +1,9 @@
1	=== Instagram Feed ===
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
4	Requires at least: 3.0
5	- Tested up to: 4.~~3.1~~
6	- Stable tag: 1.3.10
7	License: GPLv2 or later
8	License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
	@@ -186,6 +186,10 @@ For more FAQs related to the Instagram Feed plugin please visit the [FAQ section
186	7. The Instagram Feed plugin Settings pages
187
188	== Changelog ==




189	= 1.3.10 =
190	* Fix: Fixed an issue which was setting the visibility of some photos to be hidden in certain browsers
191	* Fix: The new square photo cropping is no longer being applied to feeds displaying images at less than 150px wide as the images from Instagram at this size are already square cropped


1	=== Instagram Feed ===
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

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'
192	+
193	= 1.3.10 =
194	* Fix: Fixed an issue which was setting the visibility of some photos to be hidden in certain browsers
195	* Fix: The new square photo cropping is no longer being applied to feeds displaying images at less than 150px wide as the images from Instagram at this size are already square cropped

instagram-feed-admin.php CHANGED Viewed

	@@ -184,7 +184,7 @@ function sb_instagram_settings_page() {
184	<div id="sbi_admin" class="wrap">
185
186	<div id="header">
187	- <h2><?php _e('Instagram Feed'); ?></h2>
188	</div>
189
190	<form name="form1" method="post" action="">
	@@ -192,10 +192,10 @@ function sb_instagram_settings_page() {
192
193	<?php $sbi_active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'configure'; ?>
194	<h2 class="nav-tab-wrapper">
195	- <a href="?page=sb-instagram-feed&tab=configure" class="nav-tab <?php echo $sbi_active_tab == 'configure' ? 'nav-tab-active' : ''; ?>"><?php _e('1. Configure'); ?></a>
196	- <a href="?page=sb-instagram-feed&tab=customize" class="nav-tab <?php echo $sbi_active_tab == 'customize' ? 'nav-tab-active' : ''; ?>"><?php _e('2. Customize'); ?></a>
197	- <a href="?page=sb-instagram-feed&tab=display" class="nav-tab <?php echo $sbi_active_tab == 'display' ? 'nav-tab-active' : ''; ?>"><?php _e('3. Display Your Feed'); ?></a>
198	- <a href="?page=sb-instagram-feed&tab=support" class="nav-tab <?php echo $sbi_active_tab == 'support' ? 'nav-tab-active' : ''; ?>"><?php _e('Support'); ?></a>
199	</h2>
200
201	<?php if( $sbi_active_tab == 'configure' ) { //Start Configure tab ?>
	@@ -203,26 +203,26 @@ function sb_instagram_settings_page() {
203
204	<table class="form-table">
205	<tbody>
206	- <h3><?php _e('Configure'); ?></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'); ?></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'); ?></a>
211
212
213	</div>
214
215	<tr valign="top">
216	- <th scope="row"><label><?php _e('Access Token'); ?></label></th>
217	<td>
218	- <input name="sb_instagram_at" id="sb_instagram_at" type="text" value="<?php esc_attr_e( $sb_instagram_at ); ?>" size="60" placeholder="Click button above to get your Access Token" />
219	-  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
220	- <p class="sbi_tooltip"><?php _e("In order to display your photos you need an Access Token from Instagram. To get yours, simply click the button above and log into Instagram. You can also use the button on <a href='https://smashballoon.com/instagram-feed/token/' target='_blank'>this page</a>."); ?></p>
221	</td>
222	</tr>
223
224	<tr valign="top">
225	- <th scope="row"><label><?php _e('Show Photos From:'); ?>
226
227	</label></th>
228	<td>
	@@ -230,54 +230,54 @@ function sb_instagram_settings_page() {
230	<?php $sb_instagram_type = 'user'; ?>
231	<input type="radio" name="sb_instagram_type" id="sb_instagram_type_user" value="user" <?php if($sb_instagram_type == "user") echo "checked"; ?> />
232	<label class="sbi_radio_label" for="sb_instagram_type_user">User ID(s):</label>
233	- <input name="sb_instagram_user_id" id="sb_instagram_user_id" type="text" value="<?php esc_attr_e( $sb_instagram_user_id ); ?>" size="25" />
234	-  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
235	- <p class="sbi_tooltip"><?php _e("These are the IDs of the Instagram accounts you want to display photos from. To get your ID simply click on the button above and log into Instagram.<br /><br />You can also display photos from other peoples Instagram accounts. To find their User ID you can use <a href='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>. You can separate multiple IDs using commas."); ?></p><br />
236	</span>
237
238	<div class="sbi_notice sbi_user_id_error">
239	- <?php _e("<p>Please be sure to enter your numeric <b>User ID</b> and not your Username. You can find your User ID by clicking the blue Instagram Login button above, or by entering your username into <a href='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>.</p>"); ?>
240	</div>
241
242	<span class="sbi_pro sbi_row">
243	<input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
244	<label class="sbi_radio_label" for="sb_instagram_type_hashtag">Hashtag:</label>
245	<input readonly type="text" size="25" />
246	-  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Hashtag</a></span>
247	- <p class="sbi_tooltip"><?php _e("Display posts from a specific hashtag instead of from a user"); ?></p>
248	</span>
249
250	<span class="sbi_pro sbi_row">
251	<input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_location" value="location" <?php if($sb_instagram_type == "location") echo "checked"; ?> />
252	<label class="sbi_radio_label" for="sb_instagram_type_location">Location:</label>
253	<input readonly type="text" size="25" />
254	-  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Location</a></span>
255	- <p class="sbi_tooltip"><?php _e("Display posts from an Instagram location ID or location coordinates."); ?></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'); ?></span>
260
261	</td>
262	</tr>
263
264	<tr>
265	- <th class="bump-left"><label for="sb_instagram_preserve_settings" class="bump-left"><?php _e("Preserve settings when plugin is removed"); ?></label></th>
266	<td>
267	<input name="sb_instagram_preserve_settings" type="checkbox" id="sb_instagram_preserve_settings" <?php if($sb_instagram_preserve_settings == true) echo "checked"; ?> />
268	- <label for="sb_instagram_preserve_settings"><?php _e('Yes'); ?></label>
269	- <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e('What does this mean?'); ?></a>
270	- <p class="sbi_tooltip"><?php _e('When removing the plugin your settings are automatically erased. Checking this box will prevent any settings from being deleted. This means that you can uninstall and reinstall the plugin without losing your settings.'); ?></p>
271	</td>
272	</tr>
273
274	<tr>
275	- <th class="bump-left"><label for="sb_instagram_ajax_theme" class="bump-left"><?php _e("Are you using an Ajax powered theme?"); ?></label></th>
276	<td>
277	<input name="sb_instagram_ajax_theme" type="checkbox" id="sb_instagram_ajax_theme" <?php if($sb_instagram_ajax_theme == true) echo "checked"; ?> />
278	- <label for="sb_instagram_ajax_theme"><?php _e('Yes'); ?></label>
279	- <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e('What does this mean?'); ?></a>
280	- <p class="sbi_tooltip"><?php _e("When navigating your site, if your theme uses Ajax to load content into your pages (meaning your page doesn't refresh) then check this setting. If you're not sure then please check with the theme author."); ?></p>
281	</td>
282	</tr>
283	</tbody>
	@@ -286,9 +286,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>'); ?></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>'); ?></p>
292
293
294	<?php } // End Configure tab ?>
	@@ -298,126 +298,126 @@ function sb_instagram_settings_page() {
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'); ?></h3>
302
303	<table class="form-table">
304	<tbody>
305	<tr valign="top">
306	- <th scope="row"><label><?php _e('Width of Feed'); ?></label></th>
307	<td>
308	- <input name="sb_instagram_width" type="text" value="<?php esc_attr_e( $sb_instagram_width ); ?>" 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'); ?></option>
311	- <option value="%" <?php if($sb_instagram_width_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
312	</select>
313	</td>
314	</tr>
315	<tr valign="top">
316	- <th scope="row"><label><?php _e('Height of Feed'); ?></label></th>
317	<td>
318	- <input name="sb_instagram_height" type="text" value="<?php esc_attr_e( $sb_instagram_height ); ?>" size="4" />
319	<select name="sb_instagram_height_unit">
320	- <option value="px" <?php if($sb_instagram_height_unit == "px") echo 'selected="selected"' ?> ><?php _e('px'); ?></option>
321	- <option value="%" <?php if($sb_instagram_height_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
322	</select>
323	</td>
324	</tr>
325	<tr valign="top">
326	- <th scope="row"><label><?php _e('Background Color'); ?></label></th>
327	<td>
328	- <input name="sb_instagram_background" type="text" value="<?php esc_attr_e( $sb_instagram_background ); ?>" class="sbi_colorpick" />
329	</td>
330	</tr>
331	</tbody>
332	</table>
333
334	<hr />
335	- <h3><?php _e('Photos'); ?></h3>
336
337	<table class="form-table">
338	<tbody>
339	<tr valign="top">
340	- <th scope="row"><label><?php _e('Sort Photos By'); ?></label></th>
341	<td>
342	<select name="sb_instagram_sort">
343	- <option value="none" <?php if($sb_instagram_sort == "none") echo 'selected="selected"' ?> ><?php _e('Newest to oldest'); ?></option>
344	- <!-- <option value="most-recent" <?php if($sb_instagram_sort == "most-recent") echo 'selected="selected"' ?> ><?php _e('Newest to Oldest'); ?></option>
345	- <option value="least-recent" <?php if($sb_instagram_sort == "least-recent") echo 'selected="selected"' ?> ><?php _e('Oldest to newest'); ?></option>
346	- <option value="most-liked" <?php if($sb_instagram_sort == "most-liked") echo 'selected="selected"' ?> ><?php _e('Most liked first'); ?></option>
347	- <option value="least-liked" <?php if($sb_instagram_sort == "least-liked") echo 'selected="selected"' ?> ><?php _e('Least liked first'); ?></option>
348	- <option value="most-commented" <?php if($sb_instagram_sort == "most-commented") echo 'selected="selected"' ?> ><?php _e('Most commented first'); ?></option>
349	- <option value="least-commented" <?php if($sb_instagram_sort == "least-commented") echo 'selected="selected"' ?> ><?php _e('Least commented first'); ?></option> -->
350	- <option value="random" <?php if($sb_instagram_sort == "random") echo 'selected="selected"' ?> ><?php _e('Random'); ?></option>
351	</select>
352	</td>
353	</tr>
354	<tr valign="top" class="sbi_pro">
355	- <th scope="row"><label><?php _e("Enable Pop-up Lightbox"); ?></label></th>
356	<td>
357	- <span class="sbi_note"><a href="https://smashballoon.com/instagram-feed/" target="_blank"><?php _e('Upgrade to Pro to enable the Pop-up Lightbox.'); ?></a></span>
358	</td>
359	</tr>
360	<tr valign="top">
361	- <th scope="row"><label><?php _e('Number of Photos'); ?></label></th>
362	<td>
363	- <input name="sb_instagram_num" type="text" value="<?php esc_attr_e( $sb_instagram_num ); ?>" size="4" />
364	- <span class="sbi_note"><?php _e('Number of photos to show initially. Maximum of 33.'); ?></span>
365	-  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("Using multiple IDs or hashtags?"); ?></a>
366	- <p class="sbi_tooltip"><?php _e("If you're displaying photos from multiple User IDs or hashtags then this is the number of photos which will be displayed from each."); ?></p>
367	</td>
368	</tr>
369	<tr valign="top">
370	- <th scope="row"><label><?php _e('Number of Columns'); ?></label></th>
371	<td>
372
373	<select name="sb_instagram_cols">
374	- <option value="1" <?php if($sb_instagram_cols == "1") echo 'selected="selected"' ?> ><?php _e('1'); ?></option>
375	- <option value="2" <?php if($sb_instagram_cols == "2") echo 'selected="selected"' ?> ><?php _e('2'); ?></option>
376	- <option value="3" <?php if($sb_instagram_cols == "3") echo 'selected="selected"' ?> ><?php _e('3'); ?></option>
377	- <option value="4" <?php if($sb_instagram_cols == "4") echo 'selected="selected"' ?> ><?php _e('4'); ?></option>
378	- <option value="5" <?php if($sb_instagram_cols == "5") echo 'selected="selected"' ?> ><?php _e('5'); ?></option>
379	- <option value="6" <?php if($sb_instagram_cols == "6") echo 'selected="selected"' ?> ><?php _e('6'); ?></option>
380	- <option value="7" <?php if($sb_instagram_cols == "7") echo 'selected="selected"' ?> ><?php _e('7'); ?></option>
381	- <option value="8" <?php if($sb_instagram_cols == "8") echo 'selected="selected"' ?> ><?php _e('8'); ?></option>
382	- <option value="9" <?php if($sb_instagram_cols == "9") echo 'selected="selected"' ?> ><?php _e('9'); ?></option>
383	- <option value="10" <?php if($sb_instagram_cols == "10") echo 'selected="selected"' ?> ><?php _e('10'); ?></option>
384	</select>
385
386	</td>
387	</tr>
388	<tr valign="top">
389	- <th scope="row"><label><?php _e('Image Resolution'); ?></label></th>
390	<td>
391
392	<select name="sb_instagram_image_res">
393	- <option value="auto" <?php if($sb_instagram_image_res == "auto") echo 'selected="selected"' ?> ><?php _e('Auto-detect (recommended)'); ?></option>
394	- <option value="thumb" <?php if($sb_instagram_image_res == "thumb") echo 'selected="selected"' ?> ><?php _e('Thumbnail (150x150)'); ?></option>
395	- <option value="medium" <?php if($sb_instagram_image_res == "medium") echo 'selected="selected"' ?> ><?php _e('Medium (306x306)'); ?></option>
396	- <option value="full" <?php if($sb_instagram_image_res == "full") echo 'selected="selected"' ?> ><?php _e('Full size (640x640)'); ?></option>
397	</select>
398
399	-  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What does Auto-detect mean?"); ?></a>
400	- <p class="sbi_tooltip"><?php _e("Auto-detect means that the plugin automatically sets the image resolution based on the size of your feed."); ?></p>
401
402	</td>
403	</tr>
404	<tr valign="top">
405	- <th scope="row"><label><?php _e('Padding around Images'); ?></label></th>
406	<td>
407	- <input name="sb_instagram_image_padding" type="text" value="<?php esc_attr_e( $sb_instagram_image_padding ); ?>" size="4" />
408	<select name="sb_instagram_image_padding_unit">
409	- <option value="px" <?php if($sb_instagram_image_padding_unit == "px") echo 'selected="selected"' ?> ><?php _e('px'); ?></option>
410	- <option value="%" <?php if($sb_instagram_image_padding_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
411	</select>
412	</td>
413	</tr>
414
415	<tr valign="top">
416	- <th scope="row"><label><?php _e("Disable mobile layout"); ?></label></th>
417	<td>
418	<input type="checkbox" name="sb_instagram_disable_mobile" id="sb_instagram_disable_mobile" <?php if($sb_instagram_disable_mobile == true) echo 'checked="checked"' ?> />
419	-  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What does this mean?"); ?></a>
420	- <p class="sbi_tooltip"><?php _e("By default on mobile devices the layout automatically changes to use fewer columns. Checking this setting disables the mobile layout."); ?></p>
421	</td>
422	</tr>
423	</tbody>
	@@ -426,62 +426,62 @@ function sb_instagram_settings_page() {
426	<?php submit_button(); ?>
427
428	<hr />
429	- <h3><?php _e("Carousel"); ?></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"); ?></h3>
434	<table class="form-table">
435	<tbody>
436	<tr valign="top">
437	- <th scope="row"><label><?php _e("Show the Header"); ?></label></th>
438	<td>
439	<input type="checkbox" name="sb_instagram_show_header" id="sb_instagram_show_header" <?php if($sb_instagram_show_header == true) echo 'checked="checked"' ?> />
440	</td>
441	</tr>
442	<tr valign="top">
443	- <th scope="row"><label><?php _e('Header Text Color'); ?></label></th>
444	<td>
445	- <input name="sb_instagram_header_color" type="text" value="<?php esc_attr_e( $sb_instagram_header_color ); ?>" class="sbi_colorpick" />
446	</td>
447	</tr>
448	</tbody>
449	</table>
450
451	<hr />
452	- <h3><?php _e("Caption"); ?></h3>
453	<p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Photo Captions</a></p>
454
455	<hr />
456	- <h3><?php _e("Likes & Comments"); ?></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"); ?></h3>
461	<table class="form-table">
462	<tbody>
463	<tr valign="top">
464	- <th scope="row"><label><?php _e("Show the 'Load More' button"); ?></label></th>
465	<td>
466	<input type="checkbox" name="sb_instagram_show_btn" id="sb_instagram_show_btn" <?php if($sb_instagram_show_btn == true) echo 'checked="checked"' ?> />
467	</td>
468	</tr>
469	<tr valign="top">
470	- <th scope="row"><label><?php _e('Button Background Color'); ?></label></th>
471	<td>
472	- <input name="sb_instagram_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_btn_background ); ?>" class="sbi_colorpick" />
473	</td>
474	</tr>
475	<tr valign="top">
476	- <th scope="row"><label><?php _e('Button Text Color'); ?></label></th>
477	<td>
478	- <input name="sb_instagram_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text_color ); ?>" class="sbi_colorpick" />
479	</td>
480	</tr>
481	<tr valign="top">
482	- <th scope="row"><label><?php _e('Button Text'); ?></label></th>
483	<td>
484	- <input name="sb_instagram_btn_text" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text ); ?>" size="20" />
485	</td>
486	</tr>
487	</tbody>
	@@ -490,42 +490,42 @@ function sb_instagram_settings_page() {
490	<?php submit_button(); ?>
491
492	<hr />
493	- <h3><?php _e("'Follow on Instagram' Button"); ?></h3>
494	<table class="form-table">
495	<tbody>
496	<tr valign="top">
497	- <th scope="row"><label><?php _e("Show the Follow button"); ?></label></th>
498	<td>
499	<input type="checkbox" name="sb_instagram_show_follow_btn" id="sb_instagram_show_follow_btn" <?php if($sb_instagram_show_follow_btn == true) echo 'checked="checked"' ?> />
500	</td>
501	</tr>
502
503	<!-- <tr valign="top">
504	- <th scope="row"><label><?php _e("Button Position"); ?></label></th>
505	<td>
506	<select name="sb_instagram_follow_btn_position">
507	- <option value="top" <?php if($sb_instagram_follow_btn_position == "top") echo 'selected="selected"' ?> ><?php _e('Top'); ?></option>
508	- <option value="bottom" <?php if($sb_instagram_follow_btn_position == "bottom") echo 'selected="selected"' ?> ><?php _e('Bottom'); ?></option>
509	</select>
510	</td>
511	</tr> -->
512
513	<tr valign="top">
514	- <th scope="row"><label><?php _e('Button Background Color'); ?></label></th>
515	<td>
516	- <input name="sb_instagram_folow_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_folow_btn_background ); ?>" class="sbi_colorpick" />
517	</td>
518	</tr>
519	<tr valign="top">
520	- <th scope="row"><label><?php _e('Button Text Color'); ?></label></th>
521	<td>
522	- <input name="sb_instagram_follow_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_follow_btn_text_color ); ?>" class="sbi_colorpick" />
523	</td>
524	</tr>
525	<tr valign="top">
526	- <th scope="row"><label><?php _e('Button Text'); ?></label></th>
527	<td>
528	- <input name="sb_instagram_follow_btn_text" type="text" value="<?php esc_attr_e( $sb_instagram_follow_btn_text ); ?>" size="30" />
529	</td>
530	</tr>
531	</tbody>
	@@ -535,28 +535,28 @@ function sb_instagram_settings_page() {
535
536
537	<hr id="filtering" />
538	- <h3><?php _e('Post Filtering'); ?></h3>
539	<table class="form-table">
540	<tbody>
541	<tr valign="top" class="sbi_pro">
542	- <th scope="row"><label><?php _e('Remove photos containing these words or hashtags'); ?></label></th>
543	<td>
544	<input name="sb_instagram_exclude_words" id="sb_instagram_exclude_words" type="text" style="width: 70%;" value="" />
545	<br />
546	- <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas'); ?></span>
547	-  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
548	- <p class="sbi_tooltip"><?php _e("You can use this setting to remove photos which contain certain words or hashtags in the caption. Separate multiple words or hashtags using commas."); ?></p>
549	</td>
550	</tr>
551
552	<tr valign="top" class="sbi_pro">
553	- <th scope="row"><label><?php _e('Show photos containing these words or hashtags'); ?></label></th>
554	<td>
555	<input name="sb_instagram_include_words" id="sb_instagram_include_words" type="text" style="width: 70%;" value="" />
556	<br />
557	- <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas'); ?></span>
558	-  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
559	- <p class="sbi_tooltip"><?php _e("You can use this setting to only show photos which contain certain words or hashtags in the caption. For example, adding <code>sheep, cow, dog</code> will show any photos which contain either the word sheep, cow, or dog. Separate multiple words or hashtags using commas."); ?></p>
560	</td>
561	</tr>
562	</tbody>
	@@ -565,28 +565,28 @@ function sb_instagram_settings_page() {
565
566
567	<hr id="moderation" />
568	- <h3><?php _e('Moderation'); ?></h3>
569	<table class="form-table">
570	<tbody>
571	<tr valign="top" class="sbi_pro">
572	- <th scope="row"><label><?php _e('Hide specific photos'); ?></label></th>
573	<td>
574	<textarea name="sb_instagram_hide_photos" id="sb_instagram_hide_photos" style="width: 70%;" rows="3"></textarea>
575	<br />
576	- <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate IDs using commas'); ?></span>
577	-  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
578	- <p class="sbi_tooltip"><?php _e("You can use this setting to hide specific photos in your feed. Just click the 'Hide Photo' link in the photo pop-up in your feed to get the ID of the photo, then copy and paste it into this text box."); ?></p>
579	</td>
580	</tr>
581
582	<tr valign="top" class="sbi_pro">
583	- <th scope="row"><label><?php _e('Block users'); ?></label></th>
584	<td>
585	<input name="sb_instagram_block_users" id="sb_instagram_block_users" type="text" style="width: 70%;" value="" />
586	<br />
587	- <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate usernames using commas'); ?></span>
588	-  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
589	- <p class="sbi_tooltip"><?php _e("You can use this setting to block photos from certain users in your feed. Just enter the usernames here which you want to block. Separate multiple usernames using commas."); ?></p>
590	</td>
591	</tr>
592
	@@ -597,28 +597,28 @@ function sb_instagram_settings_page() {
597
598
599	<hr />
600	- <h3><?php _e('Misc'); ?></h3>
601
602	<table class="form-table">
603	<tbody>
604	<tr valign="top">
605	<td style="padding-bottom: 0;">
606	- <?php _e('<strong style="font-size: 15px;">Custom CSS</strong><br />Enter your own custom CSS in the box below'); ?>
607	</td>
608	</tr>
609	<tr valign="top">
610	<td>
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) ); ?></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'); ?>
617	</td>
618	</tr>
619	<tr valign="top">
620	<td>
621	- <textarea name="sb_instagram_custom_js" id="sb_instagram_custom_js" style="width: 70%;" rows="7"><?php esc_attr_e( stripslashes($sb_instagram_custom_js) ); ?></textarea>
622	</td>
623	</tr>
624	</tbody>
	@@ -628,9 +628,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>'); ?></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>'); ?></p>
634
635
636	<?php } //End Customize tab ?>
	@@ -639,297 +639,297 @@ function sb_instagram_settings_page() {
639
640	<?php if( $sbi_active_tab == 'display' ) { //Start Display tab ?>
641
642	- <h3><?php _e('Display your Feed'); ?></h3>
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:"); ?></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).'); ?>" />
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:"); ?>
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 />
649	<code>[instagram-feed]</code><br />
650	<code>[instagram-feed id="ANOTHER_USER_ID"]</code><br />
651	<code>[instagram-feed id="ANOTHER_USER_ID, YET_ANOTHER_USER_ID" num=4 cols=4 showfollow=false]</code>
652	</p>
653	- <p><?php _e("See the table below for a full list of available shortcode options:"); ?></p>
654
655	- <p><span class="sbi_table_key"></span><?php _e('Pro version only'); ?></p>
656
657	<table class="sbi_shortcode_table">
658	<tbody>
659	<tr valign="top">
660	- <th scope="row"><?php _e('Shortcode option'); ?></th>
661	- <th scope="row"><?php _e('Description'); ?></th>
662	- <th scope="row"><?php _e('Example'); ?></th>
663	</tr>
664
665	- <tr class="sbi_table_header"><td colspan=3><?php _e("Configure Options"); ?></td></tr>
666	<tr class="sbi_pro">
667	<td>type</td>
668	- <td><?php _e("Display photos from a User ID (user)<br />Display posts from a Hashtag (hashtag)<br />Display posts from a Location (location)<br />Display posts from Coordinates (coordinates)"); ?></td>
669	<td><code>[instagram-feed type=user]</code><br /><code>[instagram-feed type=hashtag]</code><br/><code>[instagram-feed type=location]</code><br /><code>[instagram-feed type=coordinates]</code></td>
670	</tr>
671	<tr>
672	<td>id</td>
673	- <td><?php _e('An Instagram User ID. Separate multiple IDs by commas.'); ?></td>
674	<td><code>[instagram-feed id="1234567"]</code></td>
675	</tr>
676	<tr class="sbi_pro">
677	<td>hashtag</td>
678	- <td><?php _e('Any hashtag. Separate multiple IDs by commas.'); ?></td>
679	<td><code>[instagram-feed hashtag="#awesome"]</code></td>
680	</tr>
681	<tr class="sbi_pro">
682	<td>location</td>
683	- <td><?php _e('The ID of the location. Separate multiple IDs by commas.'); ?></td>
684	<td><code>[instagram-feed location="213456451"]</code></td>
685	</tr>
686	<tr class="sbi_pro">
687	<td>coordinates</td>
688	- <td><?php _e('The coordinates to display photos from. Separate multiple sets of coordinates by commas.<br />The format is (latitude,longitude,distance).'); ?></td>
689	<td><code>[instagram-feed coordinates="(25.76,-80.19,500)"]</code></td>
690	</tr>
691
692	- <tr class="sbi_table_header"><td colspan=3><?php _e("Customize Options"); ?></td></tr>
693	<tr>
694	<td>width</td>
695	- <td><?php _e("The width of your feed. Any number."); ?></td>
696	<td><code>[instagram-feed width=50]</code></td>
697	</tr>
698	<tr>
699	<td>widthunit</td>
700	- <td><?php _e("The unit of the width. 'px' or '%'"); ?></td>
701	<td><code>[instagram-feed widthunit=%]</code></td>
702	</tr>
703	<tr>
704	<td>height</td>
705	- <td><?php _e("The height of your feed. Any number."); ?></td>
706	<td><code>[instagram-feed height=250]</code></td>
707	</tr>
708	<tr>
709	<td>heightunit</td>
710	- <td><?php _e("The unit of the height. 'px' or '%'"); ?></td>
711	<td><code>[instagram-feed heightunit=px]</code></td>
712	</tr>
713	<tr>
714	<td>background</td>
715	- <td><?php _e("The background color of the feed. Any hex color code."); ?></td>
716	<td><code>[instagram-feed background=#ffff00]</code></td>
717	</tr>
718	<tr>
719	<td>class</td>
720	- <td><?php _e("Add a CSS class to the feed container"); ?></td>
721	<td><code>[instagram-feed class=feedOne]</code></td>
722	</tr>
723
724	- <tr class="sbi_table_header"><td colspan=3><?php _e("Photos Options"); ?></td></tr>
725	<tr>
726	<td>sortby</td>
727	- <td><?php _e("Sort the posts by Newest to Oldest (none) or Random (random)"); ?></td>
728	<td><code>[instagram-feed sortby=random]</code></td>
729	</tr>
730	<tr>
731	<td>num</td>
732	- <td><?php _e("The number of photos to display initially. Maximum is 33."); ?></td>
733	<td><code>[instagram-feed num=10]</code></td>
734	</tr>
735	<tr>
736	<td>cols</td>
737	- <td><?php _e("The number of columns in your feed. 1 - 10."); ?></td>
738	<td><code>[instagram-feed cols=5]</code></td>
739	</tr>
740	<tr>
741	<td>imageres</td>
742	- <td><?php _e("The resolution/size of the photos. 'auto', full', 'medium' or 'thumb'."); ?></td>
743	<td><code>[instagram-feed imageres=full]</code></td>
744	</tr>
745	<tr>
746	<td>imagepadding</td>
747	- <td><?php _e("The spacing around your photos"); ?></td>
748	<td><code>[instagram-feed imagepadding=10]</code></td>
749	</tr>
750	<tr>
751	<td>imagepaddingunit</td>
752	- <td><?php _e("The unit of the padding. 'px' or '%'"); ?></td>
753	<td><code>[instagram-feed imagepaddingunit=px]</code></td>
754	</tr>
755	<tr class="sbi_pro">
756	<td>disablelightbox</td>
757	- <td><?php _e("Whether to disable the photo Lightbox. It is enabled by default."); ?></td>
758	<td><code>[instagram-feed disablelightbox=true]</code></td>
759	</tr>
760	<tr>
761	<td>disablemobile</td>
762	- <td><?php _e("Disable the mobile layout. 'true' or 'false'."); ?></td>
763	<td><code>[instagram-feed disablemobile=true]</code></td>
764	</tr>
765
766	<tr class="sbi_pro">
767	<td>hovercolor</td>
768	- <td><?php _e("The background color when hovering over a photo. Any hex color code."); ?></td>
769	<td><code>[instagram-feed hovercolor=#ff0000]</code></td>
770	</tr>
771	<tr class="sbi_pro">
772	<td>hovertextcolor</td>
773	- <td><?php _e("The text/icon color when hovering over a photo. Any hex color code."); ?></td>
774	<td><code>[instagram-feed hovertextcolor=#fff]</code></td>
775	</tr>
776
777
778	- <tr class="sbi_table_header"><td colspan=3><?php _e("Carousel Options"); ?></td></tr>
779	<tr class="sbi_pro">
780	<td>carousel</td>
781	- <td><?php _e("Display this feed as a carousel"); ?></td>
782	<td><code>[instagram-feed carousel=true]</code></td>
783	</tr>
784	<tr class="sbi_pro">
785	<td>carouselarrows</td>
786	- <td><?php _e("Display directional arrows on the carousel"); ?></td>
787	<td><code>[instagram-feed carouselarrows=true]</code></td>
788	</tr>
789	<tr class="sbi_pro">
790	<td>carouselpag</td>
791	- <td><?php _e("Display pagination links below the carousel"); ?></td>
792	<td><code>[instagram-feed carouselpag=true]</code></td>
793	</tr>
794	<tr class="sbi_pro">
795	<td>carouselautoplay</td>
796	- <td><?php _e("Make the carousel autoplay"); ?></td>
797	<td><code>[instagram-feed carouselautoplay=true]</code></td>
798	</tr>
799	<tr class="sbi_pro">
800	<td>carouseltime</td>
801	- <td><?php _e("The interval time between slides for autoplay. Time in miliseconds."); ?></td>
802	<td><code>[instagram-feed carouseltime=8000]</code></td>
803	</tr>
804
805
806	- <tr class="sbi_table_header"><td colspan=3><?php _e("Header Options"); ?></td></tr>
807	<tr>
808	<td>showheader</td>
809	- <td><?php _e("Whether to show the feed Header. 'true' or 'false'."); ?></td>
810	<td><code>[instagram-feed showheader=false]</code></td>
811	</tr>
812	<tr>
813	<td>headercolor</td>
814	- <td><?php _e("The color of the Header text. Any hex color code."); ?></td>
815	<td><code>[instagram-feed headercolor=#333]</code></td>
816	</tr>
817
818	- <tr class="sbi_table_header"><td colspan=3><?php _e("'Load More' Button Options"); ?></td></tr>
819	<tr>
820	<td>showbutton</td>
821	- <td><?php _e("Whether to show the 'Load More' button. 'true' or 'false'."); ?></td>
822	<td><code>[instagram-feed showbutton=false]</code></td>
823	</tr>
824	<tr>
825	<td>buttoncolor</td>
826	- <td><?php _e("The background color of the button. Any hex color code."); ?></td>
827	<td><code>[instagram-feed buttoncolor=#000]</code></td>
828	</tr>
829	<tr>
830	<td>buttontextcolor</td>
831	- <td><?php _e("The text color of the button. Any hex color code."); ?></td>
832	<td><code>[instagram-feed buttontextcolor=#fff]</code></td>
833	</tr>
834	<tr>
835	<td>buttontext</td>
836	- <td><?php _e("The text used for the button."); ?></td>
837	<td><code>[instagram-feed buttontext="Load More Photos"]</code></td>
838	</tr>
839
840	- <tr class="sbi_table_header"><td colspan=3><?php _e("'Follow on Instagram' Button Options"); ?></td></tr>
841	<tr>
842	<td>showfollow</td>
843	- <td><?php _e("Whether to show the 'Follow on Instagram' button. 'true' or 'false'."); ?></td>
844	<td><code>[instagram-feed showfollow=false]</code></td>
845	</tr>
846	<tr>
847	<td>followcolor</td>
848	- <td><?php _e("The background color of the button. Any hex color code."); ?></td>
849	<td><code>[instagram-feed followcolor=#ff0000]</code></td>
850	</tr>
851	<tr>
852	<td>followtextcolor</td>
853	- <td><?php _e("The text color of the button. Any hex color code."); ?></td>
854	<td><code>[instagram-feed followtextcolor=#fff]</code></td>
855	</tr>
856	<tr>
857	<td>followtext</td>
858	- <td><?php _e("The text used for the button."); ?></td>
859	<td><code>[instagram-feed followtext="Follow me"]</code></td>
860	</tr>
861
862	- <tr class="sbi_table_header"><td colspan=3><?php _e("Caption Options"); ?></td></tr>
863	<tr class="sbi_pro">
864	<td>showcaption</td>
865	- <td><?php _e("Whether to show the photo caption. 'true' or 'false'."); ?></td>
866	<td><code>[instagram-feed showcaption=false]</code></td>
867	</tr>
868	<tr class="sbi_pro">
869	<td>captionlength</td>
870	- <td><?php _e("The number of characters of the caption to display"); ?></td>
871	<td><code>[instagram-feed captionlength=50]</code></td>
872	</tr>
873	<tr class="sbi_pro">
874	<td>captioncolor</td>
875	- <td><?php _e("The text color of the caption. Any hex color code."); ?></td>
876	<td><code>[instagram-feed captioncolor=#000]</code></td>
877	</tr>
878	<tr class="sbi_pro">
879	<td>captionsize</td>
880	- <td><?php _e("The size of the caption text. Any number."); ?></td>
881	<td><code>[instagram-feed captionsize=24]</code></td>
882	</tr>
883
884	- <tr class="sbi_table_header"><td colspan=3><?php _e("Likes & Comments Options"); ?></td></tr>
885	<tr class="sbi_pro">
886	<td>showlikes</td>
887	- <td><?php _e("Whether to show the Likes & Comments. 'true' or 'false'."); ?></td>
888	<td><code>[instagram-feed showlikes=false]</code></td>
889	</tr>
890	<tr class="sbi_pro">
891	<td>likescolor</td>
892	- <td><?php _e("The color of the Likes & Comments. Any hex color code."); ?></td>
893	<td><code>[instagram-feed likescolor=#FF0000]</code></td>
894	</tr>
895	<tr class="sbi_pro">
896	<td>likessize</td>
897	- <td><?php _e("The size of the Likes & Comments. Any number."); ?></td>
898	<td><code>[instagram-feed likessize=14]</code></td>
899	</tr>
900
901	- <tr class="sbi_table_header"><td colspan=3><?php _e("Post Filtering Options"); ?></td></tr>
902	<tr class="sbi_pro">
903	<td>excludewords</td>
904	- <td><?php _e("Remove posts which contain certain words or hashtags in the caption."); ?></td>
905	<td><code>[instagram-feed excludewords="bad, words"]</code></td>
906	</tr>
907	<tr class="sbi_pro">
908	<td>includewords</td>
909	- <td><?php _e("Only display posts which contain certain words or hashtags in the caption."); ?></td>
910	<td><code>[instagram-feed includewords="sunshine"]</code></td>
911	</tr>
912
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>'); ?></p>
917
918	<?php } //End Display tab ?>
919
920
921	<?php if( $sbi_active_tab == 'support' ) { //Start Support tab ?>
922
923	- <h3><?php _e('Setting up and Customizing the plugin'); ?></h3>
924	- <p><?php _e('<a href="https://smashballoon.com/instagram-feed/free/" target="_blank">Click here for step-by-step setup directions</a>'); ?></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.'); ?></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>'); ?></h3>
933
934
935	<?php $sbi_options = get_option('sb_instagram_settings'); ?>
	@@ -1013,7 +1013,7 @@ add_filter( "plugin_action_links_{$sbi_plugin_file}", 'sbi_add_settings_link', 1
1013
1014	//modify the link by unshifting the array
1015	function sbi_add_settings_link( $links, $file ) {
1016	- $sbi_settings_link = '<a href="' . admin_url( 'admin.php?page=sb-instagram-feed' ) . '">' . __( 'Settings', 'sb-instagram-feed' ) . '</a>';
1017	array_unshift( $links, $sbi_settings_link );
1018
1019	return $links;


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="">

192
193	<?php $sbi_active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'configure'; ?>
194	<h2 class="nav-tab-wrapper">
195	+ <a href="?page=sb-instagram-feed&tab=configure" class="nav-tab <?php echo $sbi_active_tab == 'configure' ? 'nav-tab-active' : ''; ?>"><?php _e('1. Configure', 'instagram-feed'); ?></a>
196	+ <a href="?page=sb-instagram-feed&tab=customize" class="nav-tab <?php echo $sbi_active_tab == 'customize' ? 'nav-tab-active' : ''; ?>"><?php _e('2. Customize', 'instagram-feed'); ?></a>
197	+ <a href="?page=sb-instagram-feed&tab=display" class="nav-tab <?php echo $sbi_active_tab == 'display' ? 'nav-tab-active' : ''; ?>"><?php _e('3. Display Your Feed', 'instagram-feed'); ?></a>
198	+ <a href="?page=sb-instagram-feed&tab=support" class="nav-tab <?php echo $sbi_active_tab == 'support' ? 'nav-tab-active' : ''; ?>"><?php _e('Support', 'instagram-feed'); ?></a>
199	</h2>
200
201	<?php if( $sbi_active_tab == 'configure' ) { //Start Configure tab ?>

203
204	<table class="form-table">
205	<tbody>
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>
214
215	<tr valign="top">
216	+ <th scope="row"><label><?php _e('Access Token', 'instagram-feed'); ?></label></th>
217	<td>
218	+ <input name="sb_instagram_at" id="sb_instagram_at" type="text" value="<?php esc_attr_e( $sb_instagram_at, 'instagram-feed' ); ?>" size="60" placeholder="Click button above to get your Access Token" />
219	+  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
220	+ <p class="sbi_tooltip"><?php _e("In order to display your photos you need an Access Token from Instagram. To get yours, simply click the button above and log into Instagram. You can also use the button on <a href='https://smashballoon.com/instagram-feed/token/' target='_blank'>this page</a>.", 'instagram-feed'); ?></p>
221	</td>
222	</tr>
223
224	<tr valign="top">
225	+ <th scope="row"><label><?php _e('Show Photos From:', 'instagram-feed'); ?>
226
227	</label></th>
228	<td>

230	<?php $sb_instagram_type = 'user'; ?>
231	<input type="radio" name="sb_instagram_type" id="sb_instagram_type_user" value="user" <?php if($sb_instagram_type == "user") echo "checked"; ?> />
232	<label class="sbi_radio_label" for="sb_instagram_type_user">User ID(s):</label>
233	+ <input name="sb_instagram_user_id" id="sb_instagram_user_id" type="text" value="<?php esc_attr_e( $sb_instagram_user_id, 'instagram-feed' ); ?>" size="25" />
234	+  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
235	+ <p class="sbi_tooltip"><?php _e("These are the IDs of the Instagram accounts you want to display photos from. To get your ID simply click on the button above and log into Instagram.<br /><br />You can also display photos from other peoples Instagram accounts. To find their User ID you can use <a href='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>. You can separate multiple IDs using commas.", 'instagram-feed'); ?></p><br />
236	</span>
237
238	<div class="sbi_notice sbi_user_id_error">
239	+ <?php _e("<p>Please be sure to enter your numeric <b>User ID</b> and not your Username. You can find your User ID by clicking the blue Instagram Login button above, or by entering your username into <a href='http://www.otzberg.net/iguserid/' target='_blank'>this tool</a>.</p>", 'instagram-feed'); ?>
240	</div>
241
242	<span class="sbi_pro sbi_row">
243	<input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
244	<label class="sbi_radio_label" for="sb_instagram_type_hashtag">Hashtag:</label>
245	<input readonly type="text" size="25" />
246	+  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Hashtag</a></span>
247	+ <p class="sbi_tooltip"><?php _e("Display posts from a specific hashtag instead of from a user", 'instagram-feed'); ?></p>
248	</span>
249
250	<span class="sbi_pro sbi_row">
251	<input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_location" value="location" <?php if($sb_instagram_type == "location") echo "checked"; ?> />
252	<label class="sbi_radio_label" for="sb_instagram_type_location">Location:</label>
253	<input readonly type="text" size="25" />
254	+  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a><span class="sbi_note"> - <a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to show posts by Location</a></span>
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>
263
264	<tr>
265	+ <th class="bump-left"><label for="sb_instagram_preserve_settings" class="bump-left"><?php _e("Preserve settings when plugin is removed", 'instagram-feed'); ?></label></th>
266	<td>
267	<input name="sb_instagram_preserve_settings" type="checkbox" id="sb_instagram_preserve_settings" <?php if($sb_instagram_preserve_settings == true) echo "checked"; ?> />
268	+ <label for="sb_instagram_preserve_settings"><?php _e('Yes', 'instagram-feed'); ?></label>
269	+ <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e('What does this mean?', 'instagram-feed'); ?></a>
270	+ <p class="sbi_tooltip"><?php _e('When removing the plugin your settings are automatically erased. Checking this box will prevent any settings from being deleted. This means that you can uninstall and reinstall the plugin without losing your settings.', 'instagram-feed'); ?></p>
271	</td>
272	</tr>
273
274	<tr>
275	+ <th class="bump-left"><label for="sb_instagram_ajax_theme" class="bump-left"><?php _e("Are you using an Ajax powered theme?", 'instagram-feed'); ?></label></th>
276	<td>
277	<input name="sb_instagram_ajax_theme" type="checkbox" id="sb_instagram_ajax_theme" <?php if($sb_instagram_ajax_theme == true) echo "checked"; ?> />
278	+ <label for="sb_instagram_ajax_theme"><?php _e('Yes', 'instagram-feed'); ?></label>
279	+ <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e('What does this mean?', 'instagram-feed'); ?></a>
280	+ <p class="sbi_tooltip"><?php _e("When navigating your site, if your theme uses Ajax to load content into your pages (meaning your page doesn't refresh) then check this setting. If you're not sure then please check with the theme author.", 'instagram-feed'); ?></p>
281	</td>
282	</tr>
283	</tbody>

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 ?>

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>
302
303	<table class="form-table">
304	<tbody>
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">
316	+ <th scope="row"><label><?php _e('Height of Feed', 'instagram-feed'); ?></label></th>
317	<td>
318	+ <input name="sb_instagram_height" type="text" value="<?php esc_attr_e( $sb_instagram_height, 'instagram-feed' ); ?>" size="4" />
319	<select name="sb_instagram_height_unit">
320	+ <option value="px" <?php if($sb_instagram_height_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
321	+ <option value="%" <?php if($sb_instagram_height_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
322	</select>
323	</td>
324	</tr>
325	<tr valign="top">
326	+ <th scope="row"><label><?php _e('Background Color', 'instagram-feed'); ?></label></th>
327	<td>
328	+ <input name="sb_instagram_background" type="text" value="<?php esc_attr_e( $sb_instagram_background, 'instagram-feed' ); ?>" class="sbi_colorpick" />
329	</td>
330	</tr>
331	</tbody>
332	</table>
333
334	<hr />
335	+ <h3><?php _e('Photos', 'instagram-feed'); ?></h3>
336
337	<table class="form-table">
338	<tbody>
339	<tr valign="top">
340	+ <th scope="row"><label><?php _e('Sort Photos By', 'instagram-feed'); ?></label></th>
341	<td>
342	<select name="sb_instagram_sort">
343	+ <option value="none" <?php if($sb_instagram_sort == "none") echo 'selected="selected"' ?> ><?php _e('Newest to oldest', 'instagram-feed'); ?></option>
344	+ <!-- <option value="most-recent" <?php if($sb_instagram_sort == "most-recent") echo 'selected="selected"' ?> ><?php _e('Newest to Oldest', 'instagram-feed'); ?></option>
345	+ <option value="least-recent" <?php if($sb_instagram_sort == "least-recent") echo 'selected="selected"' ?> ><?php _e('Oldest to newest', 'instagram-feed'); ?></option>
346	+ <option value="most-liked" <?php if($sb_instagram_sort == "most-liked") echo 'selected="selected"' ?> ><?php _e('Most liked first', 'instagram-feed'); ?></option>
347	+ <option value="least-liked" <?php if($sb_instagram_sort == "least-liked") echo 'selected="selected"' ?> ><?php _e('Least liked first', 'instagram-feed'); ?></option>
348	+ <option value="most-commented" <?php if($sb_instagram_sort == "most-commented") echo 'selected="selected"' ?> ><?php _e('Most commented first', 'instagram-feed'); ?></option>
349	+ <option value="least-commented" <?php if($sb_instagram_sort == "least-commented") echo 'selected="selected"' ?> ><?php _e('Least commented first', 'instagram-feed'); ?></option> -->
350	+ <option value="random" <?php if($sb_instagram_sort == "random") echo 'selected="selected"' ?> ><?php _e('Random', 'instagram-feed'); ?></option>
351	</select>
352	</td>
353	</tr>
354	<tr valign="top" class="sbi_pro">
355	+ <th scope="row"><label><?php _e("Enable Pop-up Lightbox", 'instagram-feed'); ?></label></th>
356	<td>
357	+ <span class="sbi_note"><a href="https://smashballoon.com/instagram-feed/" target="_blank"><?php _e('Upgrade to Pro to enable the Pop-up Lightbox.', 'instagram-feed'); ?></a></span>
358	</td>
359	</tr>
360	<tr valign="top">
361	+ <th scope="row"><label><?php _e('Number of Photos', 'instagram-feed'); ?></label></th>
362	<td>
363	+ <input name="sb_instagram_num" type="text" value="<?php esc_attr_e( $sb_instagram_num, 'instagram-feed' ); ?>" size="4" />
364	+ <span class="sbi_note"><?php _e('Number of photos to show initially. Maximum of 33.', 'instagram-feed'); ?></span>
365	+  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("Using multiple IDs or hashtags?", 'instagram-feed'); ?></a>
366	+ <p class="sbi_tooltip"><?php _e("If you're displaying photos from multiple User IDs or hashtags then this is the number of photos which will be displayed from each.", 'instagram-feed'); ?></p>
367	</td>
368	</tr>
369	<tr valign="top">
370	+ <th scope="row"><label><?php _e('Number of Columns', 'instagram-feed'); ?></label></th>
371	<td>
372
373	<select name="sb_instagram_cols">
374	+ <option value="1" <?php if($sb_instagram_cols == "1") echo 'selected="selected"' ?> ><?php _e('1', 'instagram-feed'); ?></option>
375	+ <option value="2" <?php if($sb_instagram_cols == "2") echo 'selected="selected"' ?> ><?php _e('2', 'instagram-feed'); ?></option>
376	+ <option value="3" <?php if($sb_instagram_cols == "3") echo 'selected="selected"' ?> ><?php _e('3', 'instagram-feed'); ?></option>
377	+ <option value="4" <?php if($sb_instagram_cols == "4") echo 'selected="selected"' ?> ><?php _e('4', 'instagram-feed'); ?></option>
378	+ <option value="5" <?php if($sb_instagram_cols == "5") echo 'selected="selected"' ?> ><?php _e('5', 'instagram-feed'); ?></option>
379	+ <option value="6" <?php if($sb_instagram_cols == "6") echo 'selected="selected"' ?> ><?php _e('6', 'instagram-feed'); ?></option>
380	+ <option value="7" <?php if($sb_instagram_cols == "7") echo 'selected="selected"' ?> ><?php _e('7', 'instagram-feed'); ?></option>
381	+ <option value="8" <?php if($sb_instagram_cols == "8") echo 'selected="selected"' ?> ><?php _e('8', 'instagram-feed'); ?></option>
382	+ <option value="9" <?php if($sb_instagram_cols == "9") echo 'selected="selected"' ?> ><?php _e('9', 'instagram-feed'); ?></option>
383	+ <option value="10" <?php if($sb_instagram_cols == "10") echo 'selected="selected"' ?> ><?php _e('10', 'instagram-feed'); ?></option>
384	</select>
385
386	</td>
387	</tr>
388	<tr valign="top">
389	+ <th scope="row"><label><?php _e('Image Resolution', 'instagram-feed'); ?></label></th>
390	<td>
391
392	<select name="sb_instagram_image_res">
393	+ <option value="auto" <?php if($sb_instagram_image_res == "auto") echo 'selected="selected"' ?> ><?php _e('Auto-detect (recommended)', 'instagram-feed'); ?></option>
394	+ <option value="thumb" <?php if($sb_instagram_image_res == "thumb") echo 'selected="selected"' ?> ><?php _e('Thumbnail (150x150)', 'instagram-feed'); ?></option>
395	+ <option value="medium" <?php if($sb_instagram_image_res == "medium") echo 'selected="selected"' ?> ><?php _e('Medium (306x306)', 'instagram-feed'); ?></option>
396	+ <option value="full" <?php if($sb_instagram_image_res == "full") echo 'selected="selected"' ?> ><?php _e('Full size (640x640)', 'instagram-feed'); ?></option>
397	</select>
398
399	+  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What does Auto-detect mean?", 'instagram-feed'); ?></a>
400	+ <p class="sbi_tooltip"><?php _e("Auto-detect means that the plugin automatically sets the image resolution based on the size of your feed.", 'instagram-feed'); ?></p>
401
402	</td>
403	</tr>
404	<tr valign="top">
405	+ <th scope="row"><label><?php _e('Padding around Images', 'instagram-feed'); ?></label></th>
406	<td>
407	+ <input name="sb_instagram_image_padding" type="text" value="<?php esc_attr_e( $sb_instagram_image_padding, 'instagram-feed' ); ?>" size="4" />
408	<select name="sb_instagram_image_padding_unit">
409	+ <option value="px" <?php if($sb_instagram_image_padding_unit == "px") echo 'selected="selected"' ?> ><?php _e('px', 'instagram-feed'); ?></option>
410	+ <option value="%" <?php if($sb_instagram_image_padding_unit == "%") echo 'selected="selected"' ?> ><?php _e('%', 'instagram-feed'); ?></option>
411	</select>
412	</td>
413	</tr>
414
415	<tr valign="top">
416	+ <th scope="row"><label><?php _e("Disable mobile layout", 'instagram-feed'); ?></label></th>
417	<td>
418	<input type="checkbox" name="sb_instagram_disable_mobile" id="sb_instagram_disable_mobile" <?php if($sb_instagram_disable_mobile == true) echo 'checked="checked"' ?> />
419	+  <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What does this mean?", 'instagram-feed'); ?></a>
420	+ <p class="sbi_tooltip"><?php _e("By default on mobile devices the layout automatically changes to use fewer columns. Checking this setting disables the mobile layout.", 'instagram-feed'); ?></p>
421	</td>
422	</tr>
423	</tbody>

426	<?php submit_button(); ?>
427
428	<hr />
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>
436	<tr valign="top">
437	+ <th scope="row"><label><?php _e("Show the Header", 'instagram-feed'); ?></label></th>
438	<td>
439	<input type="checkbox" name="sb_instagram_show_header" id="sb_instagram_show_header" <?php if($sb_instagram_show_header == true) echo 'checked="checked"' ?> />
440	</td>
441	</tr>
442	<tr valign="top">
443	+ <th scope="row"><label><?php _e('Header Text Color', 'instagram-feed'); ?></label></th>
444	<td>
445	+ <input name="sb_instagram_header_color" type="text" value="<?php esc_attr_e( $sb_instagram_header_color, 'instagram-feed' ); ?>" class="sbi_colorpick" />
446	</td>
447	</tr>
448	</tbody>
449	</table>
450
451	<hr />
452	+ <h3><?php _e("Caption", 'instagram-feed'); ?></h3>
453	<p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Photo Captions</a></p>
454
455	<hr />
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>
463	<tr valign="top">
464	+ <th scope="row"><label><?php _e("Show the 'Load More' button", 'instagram-feed'); ?></label></th>
465	<td>
466	<input type="checkbox" name="sb_instagram_show_btn" id="sb_instagram_show_btn" <?php if($sb_instagram_show_btn == true) echo 'checked="checked"' ?> />
467	</td>
468	</tr>
469	<tr valign="top">
470	+ <th scope="row"><label><?php _e('Button Background Color', 'instagram-feed'); ?></label></th>
471	<td>
472	+ <input name="sb_instagram_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_btn_background, 'instagram-feed' ); ?>" class="sbi_colorpick" />
473	</td>
474	</tr>
475	<tr valign="top">
476	+ <th scope="row"><label><?php _e('Button Text Color', 'instagram-feed'); ?></label></th>
477	<td>
478	+ <input name="sb_instagram_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text_color, 'instagram-feed' ); ?>" class="sbi_colorpick" />
479	</td>
480	</tr>
481	<tr valign="top">
482	+ <th scope="row"><label><?php _e('Button Text', 'instagram-feed'); ?></label></th>
483	<td>
484	+ <input name="sb_instagram_btn_text" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text, 'instagram-feed' ); ?>" size="20" />
485	</td>
486	</tr>
487	</tbody>

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>
496	<tr valign="top">
497	+ <th scope="row"><label><?php _e("Show the Follow button", 'instagram-feed'); ?></label></th>
498	<td>
499	<input type="checkbox" name="sb_instagram_show_follow_btn" id="sb_instagram_show_follow_btn" <?php if($sb_instagram_show_follow_btn == true) echo 'checked="checked"' ?> />
500	</td>
501	</tr>
502
503	<!-- <tr valign="top">
504	+ <th scope="row"><label><?php _e("Button Position", 'instagram-feed'); ?></label></th>
505	<td>
506	<select name="sb_instagram_follow_btn_position">
507	+ <option value="top" <?php if($sb_instagram_follow_btn_position == "top") echo 'selected="selected"' ?> ><?php _e('Top', 'instagram-feed'); ?></option>
508	+ <option value="bottom" <?php if($sb_instagram_follow_btn_position == "bottom") echo 'selected="selected"' ?> ><?php _e('Bottom', 'instagram-feed'); ?></option>
509	</select>
510	</td>
511	</tr> -->
512
513	<tr valign="top">
514	+ <th scope="row"><label><?php _e('Button Background Color', 'instagram-feed'); ?></label></th>
515	<td>
516	+ <input name="sb_instagram_folow_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_folow_btn_background, 'instagram-feed' ); ?>" class="sbi_colorpick" />
517	</td>
518	</tr>
519	<tr valign="top">
520	+ <th scope="row"><label><?php _e('Button Text Color', 'instagram-feed'); ?></label></th>
521	<td>
522	+ <input name="sb_instagram_follow_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_follow_btn_text_color, 'instagram-feed' ); ?>" class="sbi_colorpick" />
523	</td>
524	</tr>
525	<tr valign="top">
526	+ <th scope="row"><label><?php _e('Button Text', 'instagram-feed'); ?></label></th>
527	<td>
528	+ <input name="sb_instagram_follow_btn_text" type="text" value="<?php esc_attr_e( $sb_instagram_follow_btn_text, 'instagram-feed' ); ?>" size="30" />
529	</td>
530	</tr>
531	</tbody>

535
536
537	<hr id="filtering" />
538	+ <h3><?php _e('Post Filtering', 'instagram-feed'); ?></h3>
539	<table class="form-table">
540	<tbody>
541	<tr valign="top" class="sbi_pro">
542	+ <th scope="row"><label><?php _e('Remove photos containing these words or hashtags', 'instagram-feed'); ?></label></th>
543	<td>
544	<input name="sb_instagram_exclude_words" id="sb_instagram_exclude_words" type="text" style="width: 70%;" value="" />
545	<br />
546	+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas', 'instagram-feed'); ?></span>
547	+  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
548	+ <p class="sbi_tooltip"><?php _e("You can use this setting to remove photos which contain certain words or hashtags in the caption. Separate multiple words or hashtags using commas.", 'instagram-feed'); ?></p>
549	</td>
550	</tr>
551
552	<tr valign="top" class="sbi_pro">
553	+ <th scope="row"><label><?php _e('Show photos containing these words or hashtags', 'instagram-feed'); ?></label></th>
554	<td>
555	<input name="sb_instagram_include_words" id="sb_instagram_include_words" type="text" style="width: 70%;" value="" />
556	<br />
557	+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate words/hashtags using commas', 'instagram-feed'); ?></span>
558	+  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
559	+ <p class="sbi_tooltip"><?php _e("You can use this setting to only show photos which contain certain words or hashtags in the caption. For example, adding <code>sheep, cow, dog</code> will show any photos which contain either the word sheep, cow, or dog. Separate multiple words or hashtags using commas.", 'instagram-feed'); ?></p>
560	</td>
561	</tr>
562	</tbody>

565
566
567	<hr id="moderation" />
568	+ <h3><?php _e('Moderation', 'instagram-feed'); ?></h3>
569	<table class="form-table">
570	<tbody>
571	<tr valign="top" class="sbi_pro">
572	+ <th scope="row"><label><?php _e('Hide specific photos', 'instagram-feed'); ?></label></th>
573	<td>
574	<textarea name="sb_instagram_hide_photos" id="sb_instagram_hide_photos" style="width: 70%;" rows="3"></textarea>
575	<br />
576	+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate IDs using commas', 'instagram-feed'); ?></span>
577	+  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
578	+ <p class="sbi_tooltip"><?php _e("You can use this setting to hide specific photos in your feed. Just click the 'Hide Photo' link in the photo pop-up in your feed to get the ID of the photo, then copy and paste it into this text box.", 'instagram-feed'); ?></p>
579	</td>
580	</tr>
581
582	<tr valign="top" class="sbi_pro">
583	+ <th scope="row"><label><?php _e('Block users', 'instagram-feed'); ?></label></th>
584	<td>
585	<input name="sb_instagram_block_users" id="sb_instagram_block_users" type="text" style="width: 70%;" value="" />
586	<br />
587	+ <span class="sbi_note" style="margin-left: 0;"><?php _e('Separate usernames using commas', 'instagram-feed'); ?></span>
588	+  <a class="sbi_tooltip_link sbi_pro" href="JavaScript:void(0);"><?php _e("What is this?", 'instagram-feed'); ?></a>
589	+ <p class="sbi_tooltip"><?php _e("You can use this setting to block photos from certain users in your feed. Just enter the usernames here which you want to block. Separate multiple usernames using commas.", 'instagram-feed'); ?></p>
590	</td>
591	</tr>
592

597
598
599	<hr />
600	+ <h3><?php _e('Misc', 'instagram-feed'); ?></h3>
601
602	<table class="form-table">
603	<tbody>
604	<tr valign="top">
605	<td style="padding-bottom: 0;">
606	+ <?php _e('<strong style="font-size: 15px;">Custom CSS</strong><br />Enter your own custom CSS in the box below', 'instagram-feed'); ?>
607	</td>
608	</tr>
609	<tr valign="top">
610	<td>
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>
618	</tr>
619	<tr valign="top">
620	<td>
621	+ <textarea name="sb_instagram_custom_js" id="sb_instagram_custom_js" style="width: 70%;" rows="7"><?php esc_attr_e( stripslashes($sb_instagram_custom_js), 'instagram-feed' ); ?></textarea>
622	</td>
623	</tr>
624	</tbody>

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 ?>

639
640	<?php if( $sbi_active_tab == 'display' ) { //Start Display tab ?>
641
642	+ <h3><?php _e('Display your Feed', 'instagram-feed'); ?></h3>
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 />
649	<code>[instagram-feed]</code><br />
650	<code>[instagram-feed id="ANOTHER_USER_ID"]</code><br />
651	<code>[instagram-feed id="ANOTHER_USER_ID, YET_ANOTHER_USER_ID" num=4 cols=4 showfollow=false]</code>
652	</p>
653	+ <p><?php _e("See the table below for a full list of available shortcode options:", 'instagram-feed'); ?></p>
654
655	+ <p><span class="sbi_table_key"></span><?php _e('Pro version only', 'instagram-feed'); ?></p>
656
657	<table class="sbi_shortcode_table">
658	<tbody>
659	<tr valign="top">
660	+ <th scope="row"><?php _e('Shortcode option', 'instagram-feed'); ?></th>
661	+ <th scope="row"><?php _e('Description', 'instagram-feed'); ?></th>
662	+ <th scope="row"><?php _e('Example', 'instagram-feed'); ?></th>
663	</tr>
664
665	+ <tr class="sbi_table_header"><td colspan=3><?php _e("Configure Options", 'instagram-feed'); ?></td></tr>
666	<tr class="sbi_pro">
667	<td>type</td>
668	+ <td><?php _e("Display photos from a User ID (user)<br />Display posts from a Hashtag (hashtag)<br />Display posts from a Location (location)<br />Display posts from Coordinates (coordinates)", 'instagram-feed'); ?></td>
669	<td><code>[instagram-feed type=user]</code><br /><code>[instagram-feed type=hashtag]</code><br/><code>[instagram-feed type=location]</code><br /><code>[instagram-feed type=coordinates]</code></td>
670	</tr>
671	<tr>
672	<td>id</td>
673	+ <td><?php _e('An Instagram User ID. Separate multiple IDs by commas.', 'instagram-feed'); ?></td>
674	<td><code>[instagram-feed id="1234567"]</code></td>
675	</tr>
676	<tr class="sbi_pro">
677	<td>hashtag</td>
678	+ <td><?php _e('Any hashtag. Separate multiple IDs by commas.', 'instagram-feed'); ?></td>
679	<td><code>[instagram-feed hashtag="#awesome"]</code></td>
680	</tr>
681	<tr class="sbi_pro">
682	<td>location</td>
683	+ <td><?php _e('The ID of the location. Separate multiple IDs by commas.', 'instagram-feed'); ?></td>
684	<td><code>[instagram-feed location="213456451"]</code></td>
685	</tr>
686	<tr class="sbi_pro">
687	<td>coordinates</td>
688	+ <td><?php _e('The coordinates to display photos from. Separate multiple sets of coordinates by commas.<br />The format is (latitude,longitude,distance).', 'instagram-feed'); ?></td>
689	<td><code>[instagram-feed coordinates="(25.76,-80.19,500)"]</code></td>
690	</tr>
691
692	+ <tr class="sbi_table_header"><td colspan=3><?php _e("Customize Options", 'instagram-feed'); ?></td></tr>
693	<tr>
694	<td>width</td>
695	+ <td><?php _e("The width of your feed. Any number.", 'instagram-feed'); ?></td>
696	<td><code>[instagram-feed width=50]</code></td>
697	</tr>
698	<tr>
699	<td>widthunit</td>
700	+ <td><?php _e("The unit of the width. 'px' or '%'", 'instagram-feed'); ?></td>
701	<td><code>[instagram-feed widthunit=%]</code></td>
702	</tr>
703	<tr>
704	<td>height</td>
705	+ <td><?php _e("The height of your feed. Any number.", 'instagram-feed'); ?></td>
706	<td><code>[instagram-feed height=250]</code></td>
707	</tr>
708	<tr>
709	<td>heightunit</td>
710	+ <td><?php _e("The unit of the height. 'px' or '%'", 'instagram-feed'); ?></td>
711	<td><code>[instagram-feed heightunit=px]</code></td>
712	</tr>
713	<tr>
714	<td>background</td>
715	+ <td><?php _e("The background color of the feed. Any hex color code.", 'instagram-feed'); ?></td>
716	<td><code>[instagram-feed background=#ffff00]</code></td>
717	</tr>
718	<tr>
719	<td>class</td>
720	+ <td><?php _e("Add a CSS class to the feed container", 'instagram-feed'); ?></td>
721	<td><code>[instagram-feed class=feedOne]</code></td>
722	</tr>
723
724	+ <tr class="sbi_table_header"><td colspan=3><?php _e("Photos Options", 'instagram-feed'); ?></td></tr>
725	<tr>
726	<td>sortby</td>
727	+ <td><?php _e("Sort the posts by Newest to Oldest (none) or Random (random)", 'instagram-feed'); ?></td>
728	<td><code>[instagram-feed sortby=random]</code></td>
729	</tr>
730	<tr>
731	<td>num</td>
732	+ <td><?php _e("The number of photos to display initially. Maximum is 33.", 'instagram-feed'); ?></td>
733	<td><code>[instagram-feed num=10]</code></td>
734	</tr>
735	<tr>
736	<td>cols</td>
737	+ <td><?php _e("The number of columns in your feed. 1 - 10.", 'instagram-feed'); ?></td>
738	<td><code>[instagram-feed cols=5]</code></td>
739	</tr>
740	<tr>
741	<td>imageres</td>
742	+ <td><?php _e("The resolution/size of the photos. 'auto', full', 'medium' or 'thumb'.", 'instagram-feed'); ?></td>
743	<td><code>[instagram-feed imageres=full]</code></td>
744	</tr>
745	<tr>
746	<td>imagepadding</td>
747	+ <td><?php _e("The spacing around your photos", 'instagram-feed'); ?></td>
748	<td><code>[instagram-feed imagepadding=10]</code></td>
749	</tr>
750	<tr>
751	<td>imagepaddingunit</td>
752	+ <td><?php _e("The unit of the padding. 'px' or '%'", 'instagram-feed'); ?></td>
753	<td><code>[instagram-feed imagepaddingunit=px]</code></td>
754	</tr>
755	<tr class="sbi_pro">
756	<td>disablelightbox</td>
757	+ <td><?php _e("Whether to disable the photo Lightbox. It is enabled by default.", 'instagram-feed'); ?></td>
758	<td><code>[instagram-feed disablelightbox=true]</code></td>
759	</tr>
760	<tr>
761	<td>disablemobile</td>
762	+ <td><?php _e("Disable the mobile layout. 'true' or 'false'.", 'instagram-feed'); ?></td>
763	<td><code>[instagram-feed disablemobile=true]</code></td>
764	</tr>
765
766	<tr class="sbi_pro">
767	<td>hovercolor</td>
768	+ <td><?php _e("The background color when hovering over a photo. Any hex color code.", 'instagram-feed'); ?></td>
769	<td><code>[instagram-feed hovercolor=#ff0000]</code></td>
770	</tr>
771	<tr class="sbi_pro">
772	<td>hovertextcolor</td>
773	+ <td><?php _e("The text/icon color when hovering over a photo. Any hex color code.", 'instagram-feed'); ?></td>
774	<td><code>[instagram-feed hovertextcolor=#fff]</code></td>
775	</tr>
776
777
778	+ <tr class="sbi_table_header"><td colspan=3><?php _e("Carousel Options", 'instagram-feed'); ?></td></tr>
779	<tr class="sbi_pro">
780	<td>carousel</td>
781	+ <td><?php _e("Display this feed as a carousel", 'instagram-feed'); ?></td>
782	<td><code>[instagram-feed carousel=true]</code></td>
783	</tr>
784	<tr class="sbi_pro">
785	<td>carouselarrows</td>
786	+ <td><?php _e("Display directional arrows on the carousel", 'instagram-feed'); ?></td>
787	<td><code>[instagram-feed carouselarrows=true]</code></td>
788	</tr>
789	<tr class="sbi_pro">
790	<td>carouselpag</td>
791	+ <td><?php _e("Display pagination links below the carousel", 'instagram-feed'); ?></td>
792	<td><code>[instagram-feed carouselpag=true]</code></td>
793	</tr>
794	<tr class="sbi_pro">
795	<td>carouselautoplay</td>
796	+ <td><?php _e("Make the carousel autoplay", 'instagram-feed'); ?></td>
797	<td><code>[instagram-feed carouselautoplay=true]</code></td>
798	</tr>
799	<tr class="sbi_pro">
800	<td>carouseltime</td>
801	+ <td><?php _e("The interval time between slides for autoplay. Time in miliseconds.", 'instagram-feed'); ?></td>
802	<td><code>[instagram-feed carouseltime=8000]</code></td>
803	</tr>
804
805
806	+ <tr class="sbi_table_header"><td colspan=3><?php _e("Header Options", 'instagram-feed'); ?></td></tr>
807	<tr>
808	<td>showheader</td>
809	+ <td><?php _e("Whether to show the feed Header. 'true' or 'false'.", 'instagram-feed'); ?></td>
810	<td><code>[instagram-feed showheader=false]</code></td>
811	</tr>
812	<tr>
813	<td>headercolor</td>
814	+ <td><?php _e("The color of the Header text. Any hex color code.", 'instagram-feed'); ?></td>
815	<td><code>[instagram-feed headercolor=#333]</code></td>
816	</tr>
817
818	+ <tr class="sbi_table_header"><td colspan=3><?php _e("'Load More' Button Options", 'instagram-feed'); ?></td></tr>
819	<tr>
820	<td>showbutton</td>
821	+ <td><?php _e("Whether to show the 'Load More' button. 'true' or 'false'.", 'instagram-feed'); ?></td>
822	<td><code>[instagram-feed showbutton=false]</code></td>
823	</tr>
824	<tr>
825	<td>buttoncolor</td>
826	+ <td><?php _e("The background color of the button. Any hex color code.", 'instagram-feed'); ?></td>
827	<td><code>[instagram-feed buttoncolor=#000]</code></td>
828	</tr>
829	<tr>
830	<td>buttontextcolor</td>
831	+ <td><?php _e("The text color of the button. Any hex color code.", 'instagram-feed'); ?></td>
832	<td><code>[instagram-feed buttontextcolor=#fff]</code></td>
833	</tr>
834	<tr>
835	<td>buttontext</td>
836	+ <td><?php _e("The text used for the button.", 'instagram-feed'); ?></td>
837	<td><code>[instagram-feed buttontext="Load More Photos"]</code></td>
838	</tr>
839
840	+ <tr class="sbi_table_header"><td colspan=3><?php _e("'Follow on Instagram' Button Options", 'instagram-feed'); ?></td></tr>
841	<tr>
842	<td>showfollow</td>
843	+ <td><?php _e("Whether to show the 'Follow on Instagram' button. 'true' or 'false'.", 'instagram-feed'); ?></td>
844	<td><code>[instagram-feed showfollow=false]</code></td>
845	</tr>
846	<tr>
847	<td>followcolor</td>
848	+ <td><?php _e("The background color of the button. Any hex color code.", 'instagram-feed'); ?></td>
849	<td><code>[instagram-feed followcolor=#ff0000]</code></td>
850	</tr>
851	<tr>
852	<td>followtextcolor</td>
853	+ <td><?php _e("The text color of the button. Any hex color code.", 'instagram-feed'); ?></td>
854	<td><code>[instagram-feed followtextcolor=#fff]</code></td>
855	</tr>
856	<tr>
857	<td>followtext</td>
858	+ <td><?php _e("The text used for the button.", 'instagram-feed'); ?></td>
859	<td><code>[instagram-feed followtext="Follow me"]</code></td>
860	</tr>
861
862	+ <tr class="sbi_table_header"><td colspan=3><?php _e("Caption Options", 'instagram-feed'); ?></td></tr>
863	<tr class="sbi_pro">
864	<td>showcaption</td>
865	+ <td><?php _e("Whether to show the photo caption. 'true' or 'false'.", 'instagram-feed'); ?></td>
866	<td><code>[instagram-feed showcaption=false]</code></td>
867	</tr>
868	<tr class="sbi_pro">
869	<td>captionlength</td>
870	+ <td><?php _e("The number of characters of the caption to display", 'instagram-feed'); ?></td>
871	<td><code>[instagram-feed captionlength=50]</code></td>
872	</tr>
873	<tr class="sbi_pro">
874	<td>captioncolor</td>
875	+ <td><?php _e("The text color of the caption. Any hex color code.", 'instagram-feed'); ?></td>
876	<td><code>[instagram-feed captioncolor=#000]</code></td>
877	</tr>
878	<tr class="sbi_pro">
879	<td>captionsize</td>
880	+ <td><?php _e("The size of the caption text. Any number.", 'instagram-feed'); ?></td>
881	<td><code>[instagram-feed captionsize=24]</code></td>
882	</tr>
883
884	+ <tr class="sbi_table_header"><td colspan=3><?php _e("Likes & Comments Options", 'instagram-feed'); ?></td></tr>
885	<tr class="sbi_pro">
886	<td>showlikes</td>
887	+ <td><?php _e("Whether to show the Likes & Comments. 'true' or 'false'.", 'instagram-feed'); ?></td>
888	<td><code>[instagram-feed showlikes=false]</code></td>
889	</tr>
890	<tr class="sbi_pro">
891	<td>likescolor</td>
892	+ <td><?php _e("The color of the Likes & Comments. Any hex color code.", 'instagram-feed'); ?></td>
893	<td><code>[instagram-feed likescolor=#FF0000]</code></td>
894	</tr>
895	<tr class="sbi_pro">
896	<td>likessize</td>
897	+ <td><?php _e("The size of the Likes & Comments. Any number.", 'instagram-feed'); ?></td>
898	<td><code>[instagram-feed likessize=14]</code></td>
899	</tr>
900
901	+ <tr class="sbi_table_header"><td colspan=3><?php _e("Post Filtering Options", 'instagram-feed'); ?></td></tr>
902	<tr class="sbi_pro">
903	<td>excludewords</td>
904	+ <td><?php _e("Remove posts which contain certain words or hashtags in the caption.", 'instagram-feed'); ?></td>
905	<td><code>[instagram-feed excludewords="bad, words"]</code></td>
906	</tr>
907	<tr class="sbi_pro">
908	<td>includewords</td>
909	+ <td><?php _e("Only display posts which contain certain words or hashtags in the caption.", 'instagram-feed'); ?></td>
910	<td><code>[instagram-feed includewords="sunshine"]</code></td>
911	</tr>
912
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
920
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
934
935	<?php $sbi_options = get_option('sb_instagram_settings'); ?>

1013
1014	//modify the link by unshifting the array
1015	function sbi_add_settings_link( $links, $file ) {
1016	+ $sbi_settings_link = '<a href="' . admin_url( 'admin.php?page=sb-instagram-feed' ) . '">' . __( 'Settings', 'sb-instagram-feed', 'instagram-feed' ) . '</a>';
1017	array_unshift( $links, $sbi_settings_link );
1018
1019	return $links;

instagram-feed.php CHANGED Viewed

	@@ -3,10 +3,11 @@
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.10
7	Author: Smash Balloon
8	Author URI: http://smashballoon.com/
9	License: GPLv2 or later

10
11	Copyright 2015 Smash Balloon LLC (email : hey@smashballoon.com)
12	This program is free software; you can redistribute it and/or modify
	@@ -22,7 +23,7 @@ along with this program; if not, write to the Free Software
22	Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
23	*/
24
25	- define( 'SBIVER', '1.3.10' );
26
27	//Include admin
28	include dirname( __FILE__ ) .'/instagram-feed-admin.php';


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

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';

js/sb-instagram.js CHANGED Viewed

	@@ -9,9 +9,6 @@ if(!sbi_js_exists){
9	//IE8 also doesn't offer the .bind() method triggered by the 'sortBy' property. Copy and paste the polyfill offered here:
10	if(!Function.prototype.bind){Function.prototype.bind=function(e){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var t=Array.prototype.slice.call(arguments,1),n=this,r=function(){},i=function(){return n.apply(this instanceof r&&e?this:e,t.concat(Array.prototype.slice.call(arguments)))};r.prototype=this.prototype;i.prototype=new r;return i}}
11
12	- /* Detect when element becomes visible. Used for when the feed is initially hidden, in a tab for example. https://github.com/shaunbowe/jquery.visibilityChanged */
13	- !function(i){var n={callback:function(){},runOnLoad:!0,frequency:100,sbiPreviousVisibility:null},c={};c.sbiCheckVisibility=function(i,n){if(jQuery.contains(document,i[0])){var e=n.sbiPreviousVisibility,t=i.is(":visible");n.sbiPreviousVisibility=t,null==e?n.runOnLoad&&n.callback(i,t):e!==t&&n.callback(i,t),setTimeout(function(){c.sbiCheckVisibility(i,n)},n.frequency)}},i.fn.sbiVisibilityChanged=function(e){var t=i.extend({},n,e);return this.each(function(){c.sbiCheckVisibility(i(this),t)})}}(jQuery);
14	-
15	function sbi_init(){
16
17	jQuery('#sb_instagram.sbi').each(function(){
	@@ -57,6 +54,9 @@ if(!sbi_js_exists){
57	imgRes = 'standard_resolution';
58	}
59



60	break;
61	case 'thumb':
62	imgRes = 'thumbnail';
	@@ -177,23 +177,40 @@ if(!sbi_js_exists){
177	jQuery(window).resize(function(){
178	sbi_delay(function(){
179	sbiSetPhotoHeight();
180	- sbiGetItemSize();
181	}, 500);
182	});
183
184	//Resize image height
185	function sbiSetPhotoHeight(){

186	if( imgRes !== 'thumbnail' ){
187	var sbi_photo_width = $self.find('.sbi_photo').eq(0).innerWidth();
188
189	- //If ~~the~~ ~~width~~ is 0 ~~then~~ ~~figure~~ it ~~out~~ ~~using the number of cols~~
190	- ~~if(~~ ~~sbi_photo_width~~ ~~< 1 ) sbi_photo_width~~ = ~~($self.find('#sbi_images').width() /~~ parseInt(cols)~~) - (feedOptions.imagepadding*2)~~;













191
192	$self.find('.sbi_photo').css('height', sbi_photo_width);
193	}

194	}
195	sbiSetPhotoHeight();
196



197	//If the feed is initially hidden (in a tab for example) then check for when it becomes visible and set then set the height
198	jQuery(".sbi").filter(':hidden').sbiVisibilityChanged({
199	callback: function(element, visible) {
	@@ -202,17 +219,6 @@ if(!sbi_js_exists){
202	runOnLoad: false
203	});
204
205	- function sbiGetItemSize(){
206	- $self.removeClass('sbi_small sbi_medium');
207	- var sbiItemWidth = $self.find('.sbi_item').innerWidth();
208	- if( sbiItemWidth > 120 && sbiItemWidth < 240 ){
209	- $self.addClass('sbi_medium');
210	- } else if( sbiItemWidth <= 120 ){
211	- $self.addClass('sbi_small');
212	- }
213	- }
214	- sbiGetItemSize();
215	-
216
217	//Fade photos on hover
218	jQuery('#sb_instagram .sbi_photo').each(function(){


9	//IE8 also doesn't offer the .bind() method triggered by the 'sortBy' property. Copy and paste the polyfill offered here:
10	if(!Function.prototype.bind){Function.prototype.bind=function(e){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var t=Array.prototype.slice.call(arguments,1),n=this,r=function(){},i=function(){return n.apply(this instanceof r&&e?this:e,t.concat(Array.prototype.slice.call(arguments)))};r.prototype=this.prototype;i.prototype=new r;return i}}
11



12	function sbi_init(){
13
14	jQuery('#sb_instagram.sbi').each(function(){

54	imgRes = 'standard_resolution';
55	}
56
57	+ //If the feed is hidden (eg; in a tab) then the width is returned as 100, and so auto set the res to be medium to cover most bases
58	+ if( feedWidth <= 100 ) imgRes = 'low_resolution';
59	+
60	break;
61	case 'thumb':
62	imgRes = 'thumbnail';

177	jQuery(window).resize(function(){
178	sbi_delay(function(){
179	sbiSetPhotoHeight();

180	}, 500);
181	});
182
183	//Resize image height
184	function sbiSetPhotoHeight(){
185	+
186	if( imgRes !== 'thumbnail' ){
187	var sbi_photo_width = $self.find('.sbi_photo').eq(0).innerWidth();
188
189	+ //Figure out number of columns for either desktop or mobile
190	+ var sbi_num_cols = parseInt(cols);
191	+
192	+ if( !$self.hasClass('sbi_disable_mobile') ){
193	+ var sbiWindowWidth = jQuery(window).width();
194	+ if( sbiWindowWidth < 640 && (parseInt(cols) > 2 && parseInt(cols) < 7 ) ) sbi_num_cols = 2;
195	+ if( sbiWindowWidth < 640 && (parseInt(cols) > 6 && parseInt(cols) < 11 ) ) sbi_num_cols = 4;
196	+ if( sbiWindowWidth <= 480 && parseInt(cols) > 2 ) sbi_num_cols = 1;
197	+ }
198	+
199	+ //Figure out what the width should be using the number of cols
200	+ var sbi_photo_width_manual = ( $self.find('#sbi_images').width() / sbi_num_cols ) - (feedOptions.imagepadding*2);
201	+
202	+ //If the width is less than it should be then set it manually
203	+ if( sbi_photo_width <= (sbi_photo_width_manual) ) sbi_photo_width = sbi_photo_width_manual;
204
205	$self.find('.sbi_photo').css('height', sbi_photo_width);
206	}
207	+
208	}
209	sbiSetPhotoHeight();
210
211	+ /* Detect when element becomes visible. Used for when the feed is initially hidden, in a tab for example. https://github.com/shaunbowe/jquery.visibilityChanged */
212	+ !function(i){var n={callback:function(){},runOnLoad:!0,frequency:100,sbiPreviousVisibility:null},c={};c.sbiCheckVisibility=function(i,n){if(jQuery.contains(document,i[0])){var e=n.sbiPreviousVisibility,t=i.is(":visible");n.sbiPreviousVisibility=t,null==e?n.runOnLoad&&n.callback(i,t):e!==t&&n.callback(i,t),setTimeout(function(){c.sbiCheckVisibility(i,n)},n.frequency)}},i.fn.sbiVisibilityChanged=function(e){var t=i.extend({},n,e);return this.each(function(){c.sbiCheckVisibility(i(this),t)})}}(jQuery);
213	+
214	//If the feed is initially hidden (in a tab for example) then check for when it becomes visible and set then set the height
215	jQuery(".sbi").filter(':hidden').sbiVisibilityChanged({
216	callback: function(element, visible) {

219	runOnLoad: false
220	});
221











222
223	//Fade photos on hover
224	jQuery('#sb_instagram .sbi_photo').each(function(){