Instagram Feed - Version 1.2

Version Description

  • New: Added Custom CSS and Custom JavaScript sections which allow you to add your own custom CSS and JavaScript to the plugin
  • New: Added an option to display your Instagram photos in random order
  • New: A new tabbed layout has been implemented on the plugin's settings pages
  • New: Added an option to preserve your settings when uninstalling the plugin
  • New: Added a Pro version of the plugin which allows you to display photos by hashtag, display captions, view photos in a pop-up lightbox, show the number of likes & comments and more
  • Tweak: The 'Load More' button now automatically hides if there are no more photos to load
  • Tweak: Added a small gap to the top of the 'Load More' button
  • Tweak: Added a icon to the Instagram Feed menu item
Download this release

Release Info

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

Code changes from version 1.1.6 to 1.2

Files changed (9) hide show
  1. README.txt +26 -10
  2. css/sb-instagram-admin.css +54 -3
  3. css/sb-instagram.css +82 -14
  4. img/cff-promo.png +0 -0
  5. img/instagram-pro-promo.png +0 -0
  6. instagram-feed-admin.php +425 -193
  7. instagram-feed.php +57 -14
  8. js/sb-instagram-admin.js +1 -1
  9. js/sb-instagram.js +27 -15
README.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: smashballoon
3
  Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
  Requires at least: 3.0
5
  Tested up to: 4.0
6
- Stable tag: 1.1.6
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -21,6 +21,8 @@ Display the Instagram photo feed of any non-private Instagram account.
21
  * Use the built-in **shortcode options** to completely customize each of your Instagram feeds
22
  * Display thumbnail, medium or **full-size photos** from your Instagram feed
23
  * **Infinitely load more** of your Instagram photos with the 'Load More' button
 
 
24
 
25
  = Benefits =
26
  * Increase your Instagram followers by displaying your Instagram content on your website
@@ -32,8 +34,7 @@ Display the Instagram photo feed of any non-private Instagram account.
32
  = Feedback or Support =
33
  We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
34
 
35
- = Pro Version Available =
36
- For a pop-up photo **lightbox**, to display posts by **hashtag**, to show photo **captions**, show photos in **random order** + more, check out the [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
37
 
38
  == Installation ==
39
 
@@ -49,16 +50,19 @@ For a pop-up photo **lightbox**, to display posts by **hashtag**, to show photo
49
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
50
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
51
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
 
52
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
53
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
54
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
55
- * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepadding=px]`
56
  * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
57
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
58
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
59
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
60
  * **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
61
 
 
 
62
  == Frequently Asked Questions ==
63
 
64
  = Can I display multiple Instagram feeds on my site or on the same page? =
@@ -101,16 +105,19 @@ The below options are available on the Instagram Feed Settings page but can also
101
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
102
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
103
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
 
104
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
105
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
106
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
107
- * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepadding=px]`
108
  * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
109
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
110
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
111
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
112
  * **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
113
 
 
 
114
  == Screenshots ==
115
 
116
  1. Display your Instagram photos in multiple columns and with a scrollbar if desired.
@@ -120,18 +127,27 @@ The below options are available on the Instagram Feed Settings page but can also
120
 
121
  == Changelog ==
122
 
 
 
 
 
 
 
 
 
 
 
123
  = 1.1.6 =
124
  * Fix: A maximum width is now only applied to the feed when the photos are displayed in one column
125
- * Added a banner to the settings page promoting our free [Custom Facebook Feed](http://wordpress.org/plugins/custom-facebook-feed/) plugin
126
 
127
  = 1.1.5 =
128
  * Fix: Added a line of code which enables shortcodes to be used in widgets for themes which don't have it enabled
129
 
130
  = 1.1.4 =
131
- * Fix: Fixed an issue with the Access Token and User ID retrieval functionality in certain web browsers
132
 
133
  = 1.1.3 =
134
- * Fix: Fixed an issue with the maximum image width
135
  * Fix: Corrected a typo in the Shortcode Options table
136
 
137
  = 1.1.1 =
@@ -141,14 +157,14 @@ The below options are available on the Instagram Feed Settings page but can also
141
  = 1.1 =
142
  * New: Added an option to set the number of Instagram photos to be initially displayed
143
  * New: Added an option to show or hide the 'Load More' button
144
- * New: Added 'Step 3' to the Settings page explaining how to display your feed using the [instagram-feed] shortcode
145
  * New: Added a full list of all available shortcode options to help you if customizing multiple Instagram feeds
146
 
147
  = 1.0.2 =
148
  * Fix: Fixed an issue with the Instagram login URL on the Settings page
149
 
150
  = 1.0.1 =
151
- * Fix: Fixed an issue with the 'Load More' button opening an empty browser window in Firefox
152
 
153
  = 1.0 =
154
  * Launched the Instagram Feed plugin!
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.0
6
+ Stable tag: 1.2
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
21
  * Use the built-in **shortcode options** to completely customize each of your Instagram feeds
22
  * Display thumbnail, medium or **full-size photos** from your Instagram feed
23
  * **Infinitely load more** of your Instagram photos with the 'Load More' button
24
+ * Display your Instagram photos chronologically or in random order
25
+ * Add your own Custom CSS and JavaScript
26
 
27
  = Benefits =
28
  * Increase your Instagram followers by displaying your Instagram content on your website
34
  = Feedback or Support =
35
  We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
36
 
37
+ For a pop-up photo **lightbox**, to display posts by **hashtag**, to show photo **captions** + more, check out the [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
 
38
 
39
  == Installation ==
40
 
50
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
51
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
52
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
53
+ * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
54
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
55
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
56
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
57
+ * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
58
  * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
59
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
60
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
61
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
62
  * **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
63
 
64
+ For more shortcode options, check out the [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
65
+
66
  == Frequently Asked Questions ==
67
 
68
  = Can I display multiple Instagram feeds on my site or on the same page? =
105
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
106
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
107
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
108
+ * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
109
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
110
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
111
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
112
+ * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
113
  * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
114
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
115
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
116
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
117
  * **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
118
 
119
+ For more shortcode options, check out the [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
120
+
121
  == Screenshots ==
122
 
123
  1. Display your Instagram photos in multiple columns and with a scrollbar if desired.
127
 
128
  == Changelog ==
129
 
130
+ = 1.2 =
131
+ * New: Added Custom CSS and Custom JavaScript sections which allow you to add your own custom CSS and JavaScript to the plugin
132
+ * New: Added an option to display your Instagram photos in random order
133
+ * New: A new tabbed layout has been implemented on the plugin's settings pages
134
+ * New: Added an option to preserve your settings when uninstalling the plugin
135
+ * New: Added a [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro') of the plugin which allows you to display photos by hashtag, display captions, view photos in a pop-up lightbox, show the number of likes & comments and more
136
+ * Tweak: The 'Load More' button now automatically hides if there are no more photos to load
137
+ * Tweak: Added a small gap to the top of the 'Load More' button
138
+ * Tweak: Added a icon to the Instagram Feed menu item
139
+
140
  = 1.1.6 =
141
  * Fix: A maximum width is now only applied to the feed when the photos are displayed in one column
 
142
 
143
  = 1.1.5 =
144
  * Fix: Added a line of code which enables shortcodes to be used in widgets for themes which don't have it enabled
145
 
146
  = 1.1.4 =
147
+ * Fix: Fixed an issue with the Instagram Access Token and User ID retrieval functionality in certain web browsers
148
 
149
  = 1.1.3 =
150
+ * Fix: Fixed an issue with the maximum Instagram image width
151
  * Fix: Corrected a typo in the Shortcode Options table
152
 
153
  = 1.1.1 =
157
  = 1.1 =
158
  * New: Added an option to set the number of Instagram photos to be initially displayed
159
  * New: Added an option to show or hide the 'Load More' button
160
+ * New: Added 'Step 3' to the Instagram Feed Settings page explaining how to display your feed using the [instagram-feed] shortcode
161
  * New: Added a full list of all available shortcode options to help you if customizing multiple Instagram feeds
162
 
163
  = 1.0.2 =
164
  * Fix: Fixed an issue with the Instagram login URL on the Settings page
165
 
166
  = 1.0.1 =
167
+ * Fix: Fixed an issue with the Instagram Feed 'Load More' button opening an empty browser window in Firefox
168
 
169
  = 1.0 =
170
  * Launched the Instagram Feed plugin!
css/sb-instagram-admin.css CHANGED
@@ -1,7 +1,14 @@
1
  #sbi_admin{
2
  overflow: hidden;
3
  }
 
 
 
 
 
 
4
  #sbi_admin .sbi_tooltip{
 
5
  display: none;
6
 
7
  padding: 10px 15px;
@@ -31,7 +38,7 @@
31
  }
32
  #sbi_admin hr{
33
  border: none;
34
- margin: 15px 0 30px 0;
35
  border-bottom: 1px solid #ccc;
36
  }
37
  /* Instagram btn */
@@ -82,12 +89,28 @@
82
  #sbi_admin table.sbi_shortcode_table td{
83
  background: rgba(255,255,255,0.5);
84
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
 
86
  /* Config info */
87
  #sbi_config{
88
  float: left;
89
  width: 100%;
90
- margin-bottom: 10px;
 
91
  }
92
  #sbi_config_info{
93
  float: left;
@@ -106,8 +129,36 @@
106
  border-radius: 2px;
107
  }
108
 
 
 
 
 
 
 
 
 
 
 
109
 
110
  /* Add Facebook dashicon to CFF admin menu */
111
- #toplevel_page_instagram .toplevel_page_instagram .wp-menu-image:before{
112
  content: "\f306";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113
  }
1
  #sbi_admin{
2
  overflow: hidden;
3
  }
4
+ #sbi_admin #header{
5
+ padding: 0 0 10px 0;
6
+ }
7
+ #sbi_admin h3{
8
+ padding: 15px 0 0 0;
9
+ }
10
  #sbi_admin .sbi_tooltip{
11
+ width: 80%;
12
  display: none;
13
 
14
  padding: 10px 15px;
38
  }
39
  #sbi_admin hr{
40
  border: none;
41
+ margin: 15px 0;
42
  border-bottom: 1px solid #ccc;
43
  }
44
  /* Instagram btn */
89
  #sbi_admin table.sbi_shortcode_table td{
90
  background: rgba(255,255,255,0.5);
91
  }
92
+ #sbi_admin .sbi_table_header{
93
+ background: #ddd;
94
+ font-weight: bold;
95
+ }
96
+
97
+ #sbi_admin .sbi_radio_label{
98
+ width: 70px;
99
+ padding-top: 5px;
100
+
101
+ display: -moz-inline-stack;
102
+ display: inline-block;
103
+ vertical-align: top;
104
+ zoom: 1;
105
+ *display: inline;
106
+ }
107
 
108
  /* Config info */
109
  #sbi_config{
110
  float: left;
111
  width: 100%;
112
+ clear: both;
113
+ margin: 10px 0 10px 0;
114
  }
115
  #sbi_config_info{
116
  float: left;
129
  border-radius: 2px;
130
  }
131
 
132
+ /* License */
133
+ #sbi_admin .sbi_license_status{
134
+ display: -moz-inline-stack;
135
+ display: inline-block;
136
+ vertical-align: top;
137
+ zoom: 1;
138
+ *display: inline;
139
+
140
+ padding: 5px;
141
+ }
142
 
143
  /* Add Facebook dashicon to CFF admin menu */
144
+ #toplevel_page_sb-instagram-feed .toplevel_page_sb-instagram-feed .wp-menu-image:before{
145
  content: "\f306";
146
+ }
147
+
148
+ /* Pro only notices */
149
+ #sbi_admin .sbi_pro,
150
+ #sbi_admin .sbi_pro label{
151
+ color: #999 !important;
152
+ }
153
+ #sbi_admin .sbi_shortcode_table tr.sbi_pro{
154
+ background: #eacccc;
155
+ }
156
+ #sbi_admin .sbi_table_key{
157
+ display: block;
158
+ float: left;
159
+ width: 11px;
160
+ height: 11px;
161
+ border: 1px solid #999;
162
+ background: #eacccc;
163
+ margin: 3px 6px 0 0;
164
  }
css/sb-instagram.css CHANGED
@@ -36,33 +36,87 @@
36
  -moz-box-sizing: border-box;
37
  box-sizing: border-box;
38
  }
39
- #sb_instagram #sbi_images a{
40
- float: left;
 
 
 
 
 
 
 
41
  padding: inherit !important;
42
  margin: 0 !important;
 
43
 
44
  -webkit-box-sizing: border-box;
45
  -moz-box-sizing: border-box;
46
  box-sizing: border-box;
47
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  #sb_instagram img{
49
- float: left;
50
  padding: 0 !important;
51
  margin: 0 !important;
52
  max-width: 100% !important;
53
  }
 
 
 
 
 
54
 
55
- /* Cols */
56
- #sb_instagram.sbi_col_1 #sbi_images a{ width: 100%; }
57
- #sb_instagram.sbi_col_2 #sbi_images a{ width: 50%; }
58
- #sb_instagram.sbi_col_3 #sbi_images a{ width: 33.33%; }
59
- #sb_instagram.sbi_col_4 #sbi_images a{ width: 25%; }
60
- #sb_instagram.sbi_col_5 #sbi_images a{ width: 20%; }
61
- #sb_instagram.sbi_col_6 #sbi_images a{ width: 16.66%; }
62
- #sb_instagram.sbi_col_7 #sbi_images a{ width: 14.28%; }
63
- #sb_instagram.sbi_col_8 #sbi_images a{ width: 12.5%; }
64
- #sb_instagram.sbi_col_9 #sbi_images a{ width: 11.11%; }
65
- #sb_instagram.sbi_col_10 #sbi_images a{ width: 10%; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
 
67
  /* Button */
68
  #sb_instagram #sbi_load{
@@ -98,4 +152,18 @@
98
  }
99
  #sb_instagram #sbi_load a:hover{
100
  background: #666;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
101
  }
36
  -moz-box-sizing: border-box;
37
  box-sizing: border-box;
38
  }
39
+
40
+ /* Items */
41
+ #sb_instagram #sbi_images .sbi_item{
42
+ display: -moz-inline-stack;
43
+ display: inline-block;
44
+ vertical-align: top;
45
+ zoom: 1;
46
+ *display: inline;
47
+
48
  padding: inherit !important;
49
  margin: 0 !important;
50
+ text-decoration: none;
51
 
52
  -webkit-box-sizing: border-box;
53
  -moz-box-sizing: border-box;
54
  box-sizing: border-box;
55
  }
56
+
57
+ /* Cols */
58
+ #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
59
+ #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
60
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
61
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
62
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
63
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
64
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
65
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
66
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
67
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
68
+
69
+ /* Photos */
70
+ #sb_instagram .sbi_photo_wrap{
71
+ position: relative;
72
+ }
73
+ #sb_instagram .sbi_photo{
74
+ display: block;
75
+ }
76
  #sb_instagram img{
77
+ display: block;
78
  padding: 0 !important;
79
  margin: 0 !important;
80
  max-width: 100% !important;
81
  }
82
+ #sb_instagram .sbi_link{
83
+ display: none;
84
+ position: absolute;
85
+ bottom: 0;
86
+ right: 0;
87
 
88
+ width: 100%;
89
+ padding: 10px 0;
90
+ background: rgba(0,0,0,0.5);
91
+ text-align: center;
92
+ color: #fff;
93
+ font-size: 12px;
94
+ line-height: 1.1;
95
+ }
96
+ #sb_instagram .sbi_link a{
97
+ padding: 0 6px;
98
+ text-decoration: none;
99
+ color: #fff;
100
+ font-size: 12px;
101
+ line-height: 1.1;
102
+
103
+ display: -moz-inline-stack;
104
+ display: inline-block;
105
+ vertical-align: top;
106
+ zoom: 1;
107
+ *display: inline;
108
+ }
109
+ #sb_instagram .sbi_link .sbi_lightbox_link{
110
+ padding-bottom: 5px;
111
+ }
112
+ #sb_instagram .sbi_link a:hover,
113
+ #sb_instagram .sbi_link a:focus{
114
+ text-decoration: underline;
115
+ }
116
+ #sb_instagram .sbi_photo_wrap:hover .sbi_link,
117
+ #sb_instagram .sbi_photo_wrap:focus .sbi_link{
118
+ display: block;
119
+ }
120
 
121
  /* Button */
122
  #sb_instagram #sbi_load{
152
  }
153
  #sb_instagram #sbi_load a:hover{
154
  background: #666;
155
+ }
156
+
157
+ /* Media queries */
158
+ @media all and (max-width: 480px){
159
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
160
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
161
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
162
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
163
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
164
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
165
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
166
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
167
+ width: 50%;
168
+ }
169
  }
img/cff-promo.png DELETED
Binary file
img/instagram-pro-promo.png ADDED
Binary file
instagram-feed-admin.php CHANGED
@@ -5,52 +5,58 @@ function sb_instagram_menu() {
5
  'Instagram Feed',
6
  'Instagram Feed',
7
  'manage_options',
8
- 'instagram',
9
  'sb_instagram_settings_page'
10
  );
11
  add_submenu_page(
12
- 'instagram',
13
  'Settings',
14
  'Settings',
15
  'manage_options',
16
- 'instagram',
17
  'sb_instagram_settings_page'
18
  );
19
  }
20
  add_action('admin_menu', 'sb_instagram_menu');
21
 
22
-
23
  function sb_instagram_settings_page() {
24
 
25
  //Hidden fields
26
  $sb_instagram_settings_hidden_field = 'sb_instagram_settings_hidden_field';
 
 
27
 
28
  //Declare defaults
29
  $sb_instagram_settings_defaults = array(
30
  'sb_instagram_at' => '',
31
  'sb_instagram_user_id' => '',
 
32
  'sb_instagram_width' => '100',
33
  'sb_instagram_width_unit' => '%',
34
  'sb_instagram_height' => '',
35
  'sb_instagram_num' => '20',
36
  'sb_instagram_height_unit' => '',
37
  'sb_instagram_cols' => '',
38
- 'sb_instagram_image_padding' => '',
39
- 'sb_instagram_image_padding_unit' => '',
40
- // 'sb_instagram_sort' => '',
41
  'sb_instagram_background' => '',
42
  'sb_instagram_show_btn' => true,
43
  'sb_instagram_btn_background' => '',
44
  'sb_instagram_btn_text_color' => '',
45
- 'sb_instagram_image_res' => 'full'
 
 
 
46
  );
47
  //Save defaults in an array
48
  $options = wp_parse_args(get_option('sb_instagram_settings'), $sb_instagram_settings_defaults);
49
- add_option( 'sb_instagram_settings', $options );
50
 
51
  //Set the page variables
52
  $sb_instagram_at = $options[ 'sb_instagram_at' ];
53
  $sb_instagram_user_id = $options[ 'sb_instagram_user_id' ];
 
54
  $sb_instagram_width = $options[ 'sb_instagram_width' ];
55
  $sb_instagram_width_unit = $options[ 'sb_instagram_width_unit' ];
56
  $sb_instagram_height = $options[ 'sb_instagram_height' ];
@@ -59,69 +65,101 @@ function sb_instagram_settings_page() {
59
  $sb_instagram_cols = $options[ 'sb_instagram_cols' ];
60
  $sb_instagram_image_padding = $options[ 'sb_instagram_image_padding' ];
61
  $sb_instagram_image_padding_unit = $options[ 'sb_instagram_image_padding_unit' ];
62
- // $sb_instagram_sort = $options[ 'sb_instagram_sort' ];
63
  $sb_instagram_background = $options[ 'sb_instagram_background' ];
64
  $sb_instagram_show_btn = $options[ 'sb_instagram_show_btn' ];
65
  $sb_instagram_btn_background = $options[ 'sb_instagram_btn_background' ];
66
  $sb_instagram_btn_text_color = $options[ 'sb_instagram_btn_text_color' ];
67
  $sb_instagram_image_res = $options[ 'sb_instagram_image_res' ];
 
 
 
68
 
69
  // See if the user has posted us some information. If they did, this hidden field will be set to 'Y'.
70
  if( isset($_POST[ $sb_instagram_settings_hidden_field ]) && $_POST[ $sb_instagram_settings_hidden_field ] == 'Y' ) {
71
 
72
- $sb_instagram_at = $_POST[ 'sb_instagram_at' ];
73
- $sb_instagram_user_id = $_POST[ 'sb_instagram_user_id' ];
74
- $sb_instagram_width = $_POST[ 'sb_instagram_width' ];
75
- $sb_instagram_width_unit = $_POST[ 'sb_instagram_width_unit' ];
76
- $sb_instagram_height = $_POST[ 'sb_instagram_height' ];
77
- $sb_instagram_height_unit = $_POST[ 'sb_instagram_height_unit' ];
78
- $sb_instagram_num = $_POST[ 'sb_instagram_num' ];
79
- $sb_instagram_cols = $_POST[ 'sb_instagram_cols' ];
80
- $sb_instagram_image_padding = $_POST[ 'sb_instagram_image_padding' ];
81
- $sb_instagram_image_padding_unit = $_POST[ 'sb_instagram_image_padding_unit' ];
82
- // $sb_instagram_sort = $_POST[ 'sb_instagram_sort' ];
83
- $sb_instagram_background = $_POST[ 'sb_instagram_background' ];
84
- $sb_instagram_show_btn = $_POST[ 'sb_instagram_show_btn' ];
85
- $sb_instagram_btn_background = $_POST[ 'sb_instagram_btn_background' ];
86
- $sb_instagram_btn_text_color = $_POST[ 'sb_instagram_btn_text_color' ];
87
- $sb_instagram_image_res = $_POST[ 'sb_instagram_image_res' ];
88
-
89
- $options[ 'sb_instagram_at' ] = $sb_instagram_at;
90
- $options[ 'sb_instagram_user_id' ] = $sb_instagram_user_id;
91
- $options[ 'sb_instagram_width' ] = $sb_instagram_width;
92
- $options[ 'sb_instagram_width_unit' ] = $sb_instagram_width_unit;
93
- $options[ 'sb_instagram_height' ] = $sb_instagram_height;
94
- $options[ 'sb_instagram_height_unit' ] = $sb_instagram_height_unit;
95
- $options[ 'sb_instagram_num' ] = $sb_instagram_num;
96
- $options[ 'sb_instagram_cols' ] = $sb_instagram_cols;
97
- $options[ 'sb_instagram_image_padding' ] = $sb_instagram_image_padding;
98
- $options[ 'sb_instagram_image_padding_unit' ] = $sb_instagram_image_padding_unit;
99
- // $options[ 'sb_instagram_sort' ] = $sb_instagram_sort;
100
- $options[ 'sb_instagram_background' ] = $sb_instagram_background;
101
- $options[ 'sb_instagram_show_btn' ] = $sb_instagram_show_btn;
102
- $options[ 'sb_instagram_btn_background' ] = $sb_instagram_btn_background;
103
- $options[ 'sb_instagram_btn_text_color' ] = $sb_instagram_btn_text_color;
104
- $options[ 'sb_instagram_image_res' ] = $sb_instagram_image_res;
105
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
106
  update_option( 'sb_instagram_settings', $options );
107
 
108
- ?>
109
- <div class="updated"><p><strong><?php _e('Settings saved.', 'custom-facebook-feed' ); ?></strong></p></div>
110
  <?php } ?>
111
 
 
112
  <div id="sbi_admin" class="wrap">
 
113
  <div id="header">
114
- <h2><?php _e('Instagram Feed Settings'); ?></h2>
115
  </div>
 
116
  <form name="form1" method="post" action="">
117
  <input type="hidden" name="<?php echo $sb_instagram_settings_hidden_field; ?>" value="Y">
118
 
 
 
 
 
 
 
 
 
 
 
119
  <table class="form-table">
120
  <tbody>
121
- <h3><?php _e('Step 1: Configure'); ?></h3>
122
 
123
  <div id="sbi_config">
124
- <a href="https://instagram.com/oauth/authorize/?client_id=1654d0c81ad04754a898d89315bec227&redirect_uri=http://johndoesdesign.com/instagram-dev.php?return_uri=<?php echo admin_url('admin.php?page=instagram'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID'); ?></a>
125
  </div>
126
 
127
  <tr valign="top">
@@ -129,144 +167,256 @@ function sb_instagram_settings_page() {
129
  <td>
130
  <input name="sb_instagram_at" id="sb_instagram_at" type="text" value="<?php esc_attr_e( $sb_instagram_at ); ?>" size="50" />
131
  &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
132
- <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."); ?>.</p>
133
  </td>
134
  </tr>
 
135
  <tr valign="top">
136
- <th scope="row"><label><?php _e('User ID'); ?></label></th>
 
 
137
  <td>
138
- <input name="sb_instagram_user_id" id="sb_instagram_user_id" type="text" value="<?php esc_attr_e( $sb_instagram_user_id ); ?>" size="25" />
139
- &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
140
- <p class="sbi_tooltip"><?php _e("This is the ID of the Instagram account 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://jelled.com/instagram/lookup-user-id' target='_blank'>this tool</a>."); ?></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  </td>
142
  </tr>
143
  </tbody>
144
  </table>
145
 
146
  <?php submit_button(); ?>
147
- <hr />
148
 
149
- <table class="form-table">
150
- <tbody>
151
- <h3><?php _e('Step 2: Customize'); ?></h3>
152
- <tr valign="top">
153
- <th scope="row"><label><?php _e('Width of Feed'); ?></label></th>
154
- <td>
155
- <input name="sb_instagram_width" type="text" value="<?php esc_attr_e( $sb_instagram_width ); ?>" size="4" />
156
- <select name="sb_instagram_width_unit">
157
- <option value="px" <?php if($sb_instagram_width_unit == "px") echo 'selected="selected"' ?> ><?php _e('px'); ?></option>
158
- <option value="%" <?php if($sb_instagram_width_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
159
- </select>
160
- </td>
161
- </tr>
162
- <tr valign="top">
163
- <th scope="row"><label><?php _e('Height of Feed'); ?></label></th>
164
- <td>
165
- <input name="sb_instagram_height" type="text" value="<?php esc_attr_e( $sb_instagram_height ); ?>" size="4" />
166
- <select name="sb_instagram_height_unit">
167
- <option value="px" <?php if($sb_instagram_height_unit == "px") echo 'selected="selected"' ?> ><?php _e('px'); ?></option>
168
- <option value="%" <?php if($sb_instagram_height_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
169
- </select>
170
- </td>
171
- </tr>
172
- <tr valign="top">
173
- <th scope="row"><label><?php _e('Number of Photos'); ?></label></th>
174
- <td>
175
- <input name="sb_instagram_num" type="text" value="<?php esc_attr_e( $sb_instagram_num ); ?>" size="4" />
176
- <span class="sbi_note"><?php _e('Number of photos to show initially. Maximum of 33.'); ?></span>
177
- </td>
178
- </tr>
179
- <tr valign="top">
180
- <th scope="row"><label><?php _e('Number of Columns'); ?></label></th>
181
- <td>
182
 
183
- <select name="sb_instagram_cols">
184
- <option value="1" <?php if($sb_instagram_cols == "1") echo 'selected="selected"' ?> ><?php _e('1'); ?></option>
185
- <option value="2" <?php if($sb_instagram_cols == "2") echo 'selected="selected"' ?> ><?php _e('2'); ?></option>
186
- <option value="3" <?php if($sb_instagram_cols == "3") echo 'selected="selected"' ?> ><?php _e('3'); ?></option>
187
- <option value="4" <?php if($sb_instagram_cols == "4") echo 'selected="selected"' ?> ><?php _e('4'); ?></option>
188
- <option value="5" <?php if($sb_instagram_cols == "5") echo 'selected="selected"' ?> ><?php _e('5'); ?></option>
189
- <option value="6" <?php if($sb_instagram_cols == "6") echo 'selected="selected"' ?> ><?php _e('6'); ?></option>
190
- <option value="7" <?php if($sb_instagram_cols == "7") echo 'selected="selected"' ?> ><?php _e('7'); ?></option>
191
- <option value="8" <?php if($sb_instagram_cols == "8") echo 'selected="selected"' ?> ><?php _e('8'); ?></option>
192
- <option value="9" <?php if($sb_instagram_cols == "9") echo 'selected="selected"' ?> ><?php _e('9'); ?></option>
193
- <option value="10" <?php if($sb_instagram_cols == "10") echo 'selected="selected"' ?> ><?php _e('10'); ?></option>
194
- </select>
195
 
196
- </td>
197
- </tr>
198
- <tr valign="top">
199
- <th scope="row"><label><?php _e('Image Resolution'); ?></label></th>
200
- <td>
201
 
202
- <select name="sb_instagram_image_res">
203
- <option value="full" <?php if($sb_instagram_image_res == "full") echo 'selected="selected"' ?> ><?php _e('Full size (640x640)'); ?></option>
204
- <option value="medium" <?php if($sb_instagram_image_res == "medium") echo 'selected="selected"' ?> ><?php _e('Medium (306x306)'); ?></option>
205
- <option value="thumb" <?php if($sb_instagram_image_res == "thumb") echo 'selected="selected"' ?> ><?php _e('Thumbnail (150x150)'); ?></option>
206
- </select>
207
 
208
- </td>
209
- </tr>
210
- <tr valign="top">
211
- <th scope="row"><label><?php _e('Padding around Images'); ?></label></th>
212
- <td>
213
- <input name="sb_instagram_image_padding" type="text" value="<?php esc_attr_e( $sb_instagram_image_padding ); ?>" size="4" />
214
- <select name="sb_instagram_image_padding_unit">
215
- <option value="px" <?php if($sb_instagram_image_padding_unit == "px") echo 'selected="selected"' ?> ><?php _e('px'); ?></option>
216
- <option value="%" <?php if($sb_instagram_image_padding_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
217
- </select>
218
- </td>
219
- </tr>
220
- <!-- <tr valign="top">
221
- <th scope="row"><label><?php _e('Sort Images By'); ?></label></th>
222
- <td>
223
- <select name="sb_instagram_sort">
224
- <option value="none" <?php if($sb_instagram_sort == "none") echo 'selected="selected"' ?> ><?php _e('None'); ?></option>
225
- <option value="most-recent" <?php if($sb_instagram_sort == "most-recent") echo 'selected="selected"' ?> ><?php _e('Newest to Oldest'); ?></option>
226
- <option value="least-recent" <?php if($sb_instagram_sort == "least-recent") echo 'selected="selected"' ?> ><?php _e('Oldest to newest'); ?></option>
227
- <option value="most-liked" <?php if($sb_instagram_sort == "most-liked") echo 'selected="selected"' ?> ><?php _e('Most liked first'); ?></option>
228
- <option value="least-liked" <?php if($sb_instagram_sort == "least-liked") echo 'selected="selected"' ?> ><?php _e('Least liked first'); ?></option>
229
- <option value="most-commented" <?php if($sb_instagram_sort == "most-commented") echo 'selected="selected"' ?> ><?php _e('Most commented first'); ?></option>
230
- <option value="least-commented" <?php if($sb_instagram_sort == "least-commented") echo 'selected="selected"' ?> ><?php _e('Least commented first'); ?></option>
231
- <option value="random" <?php if($sb_instagram_sort == "random") echo 'selected="selected"' ?> ><?php _e('Random'); ?></option>
232
- </select>
233
- </td>
234
- </tr> -->
235
- <tr valign="top">
236
- <th scope="row"><label><?php _e('Background Color'); ?></label></th>
237
- <td>
238
- <input name="sb_instagram_background" type="text" value="<?php esc_attr_e( $sb_instagram_background ); ?>" class="sbi_colorpick" />
239
- </td>
240
- </tr>
241
- <tr valign="top">
242
- <th scope="row"><label><?php _e("Show the 'Load More' button"); ?></label></th>
243
- <td>
244
- <input type="checkbox" name="sb_instagram_show_btn" id="sb_instagram_show_btn" <?php if($sb_instagram_show_btn == true) echo 'checked="checked"' ?> />
245
- </td>
246
- </tr>
247
- <tr valign="top">
248
- <th scope="row"><label><?php _e('Button Background Color'); ?></label></th>
249
- <td>
250
- <input name="sb_instagram_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_btn_background ); ?>" class="sbi_colorpick" />
251
- </td>
252
- </tr>
253
- <tr valign="top">
254
- <th scope="row"><label><?php _e('Button Text Color'); ?></label></th>
255
- <td>
256
- <input name="sb_instagram_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text_color ); ?>" class="sbi_colorpick" />
257
- </td>
258
- </tr>
259
 
260
- </tbody>
261
- </table>
262
 
263
- <?php submit_button(); ?>
 
264
 
265
- </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
266
 
267
  <hr />
 
268
 
269
- <h3><?php _e('Step 3: Displaying your Feed'); ?></h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
270
  <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>
271
  <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).'); ?>" />
272
 
@@ -274,6 +424,8 @@ function sb_instagram_settings_page() {
274
  <code>[instagram-feed num=9 cols=3]</code></p>
275
  <p><?php _e("See the table below for a full list of available shortcode options:"); ?></p>
276
 
 
 
277
  <table class="sbi_shortcode_table">
278
  <tbody>
279
  <tr valign="top">
@@ -281,85 +433,165 @@ function sb_instagram_settings_page() {
281
  <th scope="row"><?php _e('Description'); ?></th>
282
  <th scope="row"><?php _e('Example'); ?></th>
283
  </tr>
 
 
 
 
 
 
 
284
  <tr>
285
  <td>id</td>
286
  <td><?php _e('An Instagram User ID'); ?></td>
287
  <td><code>[instagram-feed id=1234567]</code></td>
288
  </tr>
 
 
 
 
 
 
 
 
289
  <td>width</td>
290
- <td>The width of your feed. Any number.</td>
291
  <td><code>[instagram-feed width=50]</code></td>
292
  </tr>
293
  <tr>
294
  <td>widthunit</td>
295
- <td>The unit of the width. 'px' or '%'</td>
296
  <td><code>[instagram-feed widthunit=%]</code></td>
297
  </tr>
298
  <tr>
299
  <td>height</td>
300
- <td>The height of your feed. Any number.</td>
301
  <td><code>[instagram-feed height=250]</code></td>
302
  </tr>
303
  <tr>
304
  <td>heightunit</td>
305
- <td>The unit of the height. 'px' or '%'</td>
306
  <td><code>[instagram-feed heightunit=px]</code></td>
307
  </tr>
 
 
 
 
 
 
 
 
 
 
 
 
308
  <tr>
309
  <td>num</td>
310
- <td>The number of photos to display initially. Maximum is 33.</td>
311
  <td><code>[instagram-feed num=10]</code></td>
312
  </tr>
313
  <tr>
314
  <td>cols</td>
315
- <td>The number of columns in your feed. 1 - 10.</td>
316
  <td><code>[instagram-feed cols=5]</code></td>
317
  </tr>
 
 
 
 
 
318
  <tr>
319
  <td>imagepadding</td>
320
- <td>The spacing around your photos</td>
321
  <td><code>[instagram-feed imagepadding=10]</code></td>
322
  </tr>
323
  <tr>
324
  <td>imagepaddingunit</td>
325
- <td>The unit of the padding. 'px' or '%'</td>
326
  <td><code>[instagram-feed imagepaddingunit=px]</code></td>
327
  </tr>
328
- <tr>
329
- <td>background</td>
330
- <td>The background color of the feed. Any hex color code.</td>
331
- <td><code>[instagram-feed background=#ffff00]</code></td>
332
- </tr>
333
  <tr>
334
  <td>showbutton</td>
335
- <td>Whether to show the 'Load More' button. 'true' or 'false'.</td>
336
- <td><code>[instagram-feed showbutton='false']</code></td>
337
  </tr>
338
  <tr>
339
  <td>buttoncolor</td>
340
- <td>The background color of the button. Any hex color code.</td>
341
  <td><code>[instagram-feed buttoncolor=#000]</code></td>
342
  </tr>
343
  <tr>
344
  <td>buttontextcolor</td>
345
- <td>The text color of the button. Any hex color code.</td>
346
  <td><code>[instagram-feed buttontextcolor=#fff]</code></td>
347
  </tr>
348
- <tr>
349
- <td>imageres</td>
350
- <td>The resolution/size of the photos. 'full', 'medium' or 'thumb'.</td>
351
- <td><code>[instagram-feed imageres=full]</code></td>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
352
  </tr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
353
  </tbody>
354
  </table>
355
 
356
- <a href="http://wordpress.org/plugins/custom-facebook-feed/" target="_blank" style="display: block; margin: 20px 0 0 0;">
357
- <img src="<?php echo plugins_url( 'img/cff-promo.png' , __FILE__ ) ?>" alt="The Custom Facebook Feed plugin">
358
- </a>
359
- </div> <!-- end #admin -->
360
 
361
- <?php
362
- }
 
 
 
 
 
 
 
363
 
364
  function sb_instagram_admin_style() {
365
  wp_register_style( 'sb_instagram_admin_css', plugin_dir_url( __FILE__ ) . 'css/sb-instagram-admin.css', false, '1.0.0' );
5
  'Instagram Feed',
6
  'Instagram Feed',
7
  'manage_options',
8
+ 'sb-instagram-feed',
9
  'sb_instagram_settings_page'
10
  );
11
  add_submenu_page(
12
+ 'sb-instagram-feed',
13
  'Settings',
14
  'Settings',
15
  'manage_options',
16
+ 'sb-instagram-feed',
17
  'sb_instagram_settings_page'
18
  );
19
  }
20
  add_action('admin_menu', 'sb_instagram_menu');
21
 
 
22
  function sb_instagram_settings_page() {
23
 
24
  //Hidden fields
25
  $sb_instagram_settings_hidden_field = 'sb_instagram_settings_hidden_field';
26
+ $sb_instagram_configure_hidden_field = 'sb_instagram_configure_hidden_field';
27
+ $sb_instagram_customize_hidden_field = 'sb_instagram_customize_hidden_field';
28
 
29
  //Declare defaults
30
  $sb_instagram_settings_defaults = array(
31
  'sb_instagram_at' => '',
32
  'sb_instagram_user_id' => '',
33
+ 'sb_instagram_preserve_settings' => '',
34
  'sb_instagram_width' => '100',
35
  'sb_instagram_width_unit' => '%',
36
  'sb_instagram_height' => '',
37
  'sb_instagram_num' => '20',
38
  'sb_instagram_height_unit' => '',
39
  'sb_instagram_cols' => '',
40
+ 'sb_instagram_image_padding' => '5',
41
+ 'sb_instagram_image_padding_unit' => 'px',
42
+ 'sb_instagram_sort' => 'none',
43
  'sb_instagram_background' => '',
44
  'sb_instagram_show_btn' => true,
45
  'sb_instagram_btn_background' => '',
46
  'sb_instagram_btn_text_color' => '',
47
+ 'sb_instagram_image_res' => 'full',
48
+ //Misc
49
+ 'sb_instagram_custom_css' => '',
50
+ 'sb_instagram_custom_js' => ''
51
  );
52
  //Save defaults in an array
53
  $options = wp_parse_args(get_option('sb_instagram_settings'), $sb_instagram_settings_defaults);
54
+ update_option( 'sb_instagram_settings', $options );
55
 
56
  //Set the page variables
57
  $sb_instagram_at = $options[ 'sb_instagram_at' ];
58
  $sb_instagram_user_id = $options[ 'sb_instagram_user_id' ];
59
+ $sb_instagram_preserve_settings = $options[ 'sb_instagram_preserve_settings' ];
60
  $sb_instagram_width = $options[ 'sb_instagram_width' ];
61
  $sb_instagram_width_unit = $options[ 'sb_instagram_width_unit' ];
62
  $sb_instagram_height = $options[ 'sb_instagram_height' ];
65
  $sb_instagram_cols = $options[ 'sb_instagram_cols' ];
66
  $sb_instagram_image_padding = $options[ 'sb_instagram_image_padding' ];
67
  $sb_instagram_image_padding_unit = $options[ 'sb_instagram_image_padding_unit' ];
68
+ $sb_instagram_sort = $options[ 'sb_instagram_sort' ];
69
  $sb_instagram_background = $options[ 'sb_instagram_background' ];
70
  $sb_instagram_show_btn = $options[ 'sb_instagram_show_btn' ];
71
  $sb_instagram_btn_background = $options[ 'sb_instagram_btn_background' ];
72
  $sb_instagram_btn_text_color = $options[ 'sb_instagram_btn_text_color' ];
73
  $sb_instagram_image_res = $options[ 'sb_instagram_image_res' ];
74
+ //Misc
75
+ $sb_instagram_custom_css = $options[ 'sb_instagram_custom_css' ];
76
+ $sb_instagram_custom_js = $options[ 'sb_instagram_custom_js' ];
77
 
78
  // See if the user has posted us some information. If they did, this hidden field will be set to 'Y'.
79
  if( isset($_POST[ $sb_instagram_settings_hidden_field ]) && $_POST[ $sb_instagram_settings_hidden_field ] == 'Y' ) {
80
 
81
+ if( isset($_POST[ $sb_instagram_configure_hidden_field ]) && $_POST[ $sb_instagram_configure_hidden_field ] == 'Y' ) {
82
+ $sb_instagram_at = $_POST[ 'sb_instagram_at' ];
83
+ $sb_instagram_user_id = $_POST[ 'sb_instagram_user_id' ];
84
+ isset($_POST[ 'sb_instagram_preserve_settings' ]) ? $sb_instagram_preserve_settings = $_POST[ 'sb_instagram_preserve_settings' ] : $sb_instagram_preserve_settings = '';
85
+
86
+ $options[ 'sb_instagram_at' ] = $sb_instagram_at;
87
+ $options[ 'sb_instagram_user_id' ] = $sb_instagram_user_id;
88
+ $options[ 'sb_instagram_preserve_settings' ] = $sb_instagram_preserve_settings;
89
+ } //End config tab post
90
+
91
+ if( isset($_POST[ $sb_instagram_customize_hidden_field ]) && $_POST[ $sb_instagram_customize_hidden_field ] == 'Y' ) {
92
+ $sb_instagram_width = $_POST[ 'sb_instagram_width' ];
93
+ $sb_instagram_width_unit = $_POST[ 'sb_instagram_width_unit' ];
94
+ $sb_instagram_height = $_POST[ 'sb_instagram_height' ];
95
+ $sb_instagram_height_unit = $_POST[ 'sb_instagram_height_unit' ];
96
+ $sb_instagram_num = $_POST[ 'sb_instagram_num' ];
97
+ $sb_instagram_cols = $_POST[ 'sb_instagram_cols' ];
98
+ $sb_instagram_image_padding = $_POST[ 'sb_instagram_image_padding' ];
99
+ $sb_instagram_image_padding_unit = $_POST[ 'sb_instagram_image_padding_unit' ];
100
+ $sb_instagram_sort = $_POST[ 'sb_instagram_sort' ];
101
+ $sb_instagram_background = $_POST[ 'sb_instagram_background' ];
102
+ isset($_POST[ 'sb_instagram_show_btn' ]) ? $sb_instagram_show_btn = $_POST[ 'sb_instagram_show_btn' ] : $sb_instagram_show_btn = '';
103
+ $sb_instagram_btn_background = $_POST[ 'sb_instagram_btn_background' ];
104
+ $sb_instagram_btn_text_color = $_POST[ 'sb_instagram_btn_text_color' ];
105
+ $sb_instagram_image_res = $_POST[ 'sb_instagram_image_res' ];
106
+ //Misc
107
+ $sb_instagram_custom_css = $_POST[ 'sb_instagram_custom_css' ];
108
+ $sb_instagram_custom_js = $_POST[ 'sb_instagram_custom_js' ];
109
+
110
+ $options[ 'sb_instagram_width' ] = $sb_instagram_width;
111
+ $options[ 'sb_instagram_width_unit' ] = $sb_instagram_width_unit;
112
+ $options[ 'sb_instagram_height' ] = $sb_instagram_height;
113
+ $options[ 'sb_instagram_height_unit' ] = $sb_instagram_height_unit;
114
+ $options[ 'sb_instagram_num' ] = $sb_instagram_num;
115
+ $options[ 'sb_instagram_cols' ] = $sb_instagram_cols;
116
+ $options[ 'sb_instagram_image_padding' ] = $sb_instagram_image_padding;
117
+ $options[ 'sb_instagram_image_padding_unit' ] = $sb_instagram_image_padding_unit;
118
+ $options[ 'sb_instagram_sort' ] = $sb_instagram_sort;
119
+ $options[ 'sb_instagram_background' ] = $sb_instagram_background;
120
+ $options[ 'sb_instagram_show_btn' ] = $sb_instagram_show_btn;
121
+ $options[ 'sb_instagram_btn_background' ] = $sb_instagram_btn_background;
122
+ $options[ 'sb_instagram_btn_text_color' ] = $sb_instagram_btn_text_color;
123
+ $options[ 'sb_instagram_image_res' ] = $sb_instagram_image_res;
124
+ //Misc
125
+ $options[ 'sb_instagram_custom_css' ] = $sb_instagram_custom_css;
126
+ $options[ 'sb_instagram_custom_js' ] = $sb_instagram_custom_js;
127
+
128
+ } //End customize tab post
129
+
130
+ //Save the settings to the settings array
131
  update_option( 'sb_instagram_settings', $options );
132
 
133
+ ?>
134
+ <div class="updated"><p><strong><?php _e('Settings saved.', 'instagram-feed' ); ?></strong></p></div>
135
  <?php } ?>
136
 
137
+
138
  <div id="sbi_admin" class="wrap">
139
+
140
  <div id="header">
141
+ <h2><?php _e('Instagram Feed'); ?></h2>
142
  </div>
143
+
144
  <form name="form1" method="post" action="">
145
  <input type="hidden" name="<?php echo $sb_instagram_settings_hidden_field; ?>" value="Y">
146
 
147
+ <?php $sbi_active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'configure'; ?>
148
+ <h2 class="nav-tab-wrapper">
149
+ <a href="?page=sb-instagram-feed&amp;tab=configure" class="nav-tab <?php echo $sbi_active_tab == 'configure' ? 'nav-tab-active' : ''; ?>"><?php _e('1. Configure'); ?></a>
150
+ <a href="?page=sb-instagram-feed&amp;tab=customize" class="nav-tab <?php echo $sbi_active_tab == 'customize' ? 'nav-tab-active' : ''; ?>"><?php _e('2. Customize'); ?></a>
151
+ <a href="?page=sb-instagram-feed&amp;tab=display" class="nav-tab <?php echo $sbi_active_tab == 'display' ? 'nav-tab-active' : ''; ?>"><?php _e('3. Display Your Feed'); ?></a>
152
+ </h2>
153
+
154
+ <?php if( $sbi_active_tab == 'configure' ) { //Start Configure tab ?>
155
+ <input type="hidden" name="<?php echo $sb_instagram_configure_hidden_field; ?>" value="Y">
156
+
157
  <table class="form-table">
158
  <tbody>
159
+ <h3><?php _e('Configure'); ?></h3>
160
 
161
  <div id="sbi_config">
162
+ <a href="https://instagram.com/oauth/authorize/?client_id=1654d0c81ad04754a898d89315bec227&redirect_uri=http://johndoesdesign.com/instagram-dev.php?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>
163
  </div>
164
 
165
  <tr valign="top">
167
  <td>
168
  <input name="sb_instagram_at" id="sb_instagram_at" type="text" value="<?php esc_attr_e( $sb_instagram_at ); ?>" size="50" />
169
  &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
170
+ <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>
171
  </td>
172
  </tr>
173
+
174
  <tr valign="top">
175
+ <th scope="row"><label><?php _e('Show Photos From:'); ?>
176
+
177
+ </label></th>
178
  <td>
179
+ <span>
180
+ <?php $sb_instagram_type = 'user'; ?>
181
+ <input type="radio" name="sb_instagram_type" id="sb_instagram_type_user" value="user" <?php if($sb_instagram_type == "user") echo "checked"; ?> />
182
+ <label class="sbi_radio_label" for="sb_instagram_type_user">User ID:</label>
183
+ <input name="sb_instagram_user_id" id="sb_instagram_user_id" type="text" value="<?php esc_attr_e( $sb_instagram_user_id ); ?>" size="25" />
184
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
185
+ <p class="sbi_tooltip"><?php _e("This is the ID of the Instagram account 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://jelled.com/instagram/lookup-user-id' target='_blank'>this tool</a>."); ?></p><br />
186
+ </span>
187
+
188
+ <span class="sbi_pro">
189
+ <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
190
+ <label class="sbi_radio_label" for="sb_instagram_type_hashtag">Hashtag:</label>
191
+ <input readonly name="sb_instagram_hashtag" id="sb_instagram_hashtag" type="text" value="<?php esc_attr_e( $sb_instagram_hashtag ); ?>" size="25" />
192
+ &nbsp;<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>
193
+ <p class="sbi_tooltip"><?php _e("Display posts from a specific hashtag instead of from a user"); ?></p>
194
+ </span>
195
+
196
+ </td>
197
+ </tr>
198
+
199
+ <tr>
200
+ <th class="bump-left"><label for="sb_instagram_preserve_settings" class="bump-left"><?php _e("Preserve settings when plugin is removed"); ?></label></th>
201
+ <td>
202
+ <input name="sb_instagram_preserve_settings" type="checkbox" id="sb_instagram_preserve_settings" <?php if($sb_instagram_preserve_settings == true) echo "checked"; ?> />
203
+ <label for="sb_instagram_preserve_settings"><?php _e('Yes'); ?></label>
204
+ <a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e('What does this mean?'); ?></a>
205
+ <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>
206
  </td>
207
  </tr>
208
  </tbody>
209
  </table>
210
 
211
  <?php submit_button(); ?>
212
+ </form>
213
 
214
+ <p><?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=customize">Customize your Feed</a>'); ?></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
 
 
 
 
 
 
 
 
 
 
 
 
 
216
 
 
 
 
 
 
217
 
218
+ <?php } // End Configure tab ?>
 
 
 
 
219
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
 
 
 
221
 
222
+ <?php if( $sbi_active_tab == 'customize' ) { //Start Configure tab ?>
223
+ <input type="hidden" name="<?php echo $sb_instagram_customize_hidden_field; ?>" value="Y">
224
 
225
+ <h3><?php _e('Customize'); ?></h3>
226
+
227
+ <table class="form-table">
228
+ <tbody>
229
+ <tr valign="top">
230
+ <th scope="row"><label><?php _e('Width of Feed'); ?></label></th>
231
+ <td>
232
+ <input name="sb_instagram_width" type="text" value="<?php esc_attr_e( $sb_instagram_width ); ?>" size="4" />
233
+ <select name="sb_instagram_width_unit">
234
+ <option value="px" <?php if($sb_instagram_width_unit == "px") echo 'selected="selected"' ?> ><?php _e('px'); ?></option>
235
+ <option value="%" <?php if($sb_instagram_width_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
236
+ </select>
237
+ </td>
238
+ </tr>
239
+ <tr valign="top">
240
+ <th scope="row"><label><?php _e('Height of Feed'); ?></label></th>
241
+ <td>
242
+ <input name="sb_instagram_height" type="text" value="<?php esc_attr_e( $sb_instagram_height ); ?>" size="4" />
243
+ <select name="sb_instagram_height_unit">
244
+ <option value="px" <?php if($sb_instagram_height_unit == "px") echo 'selected="selected"' ?> ><?php _e('px'); ?></option>
245
+ <option value="%" <?php if($sb_instagram_height_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
246
+ </select>
247
+ </td>
248
+ </tr>
249
+ <tr valign="top">
250
+ <th scope="row"><label><?php _e('Background Color'); ?></label></th>
251
+ <td>
252
+ <input name="sb_instagram_background" type="text" value="<?php esc_attr_e( $sb_instagram_background ); ?>" class="sbi_colorpick" />
253
+ </td>
254
+ </tr>
255
+ </tbody>
256
+ </table>
257
 
258
  <hr />
259
+ <h3><?php _e('Photos'); ?></h3>
260
 
261
+ <table class="form-table">
262
+ <tbody>
263
+ <tr valign="top">
264
+ <th scope="row"><label><?php _e('Sort Photos By'); ?></label></th>
265
+ <td>
266
+ <select name="sb_instagram_sort">
267
+ <option value="none" <?php if($sb_instagram_sort == "none") echo 'selected="selected"' ?> ><?php _e('Newest to oldest'); ?></option>
268
+ <!-- <option value="most-recent" <?php if($sb_instagram_sort == "most-recent") echo 'selected="selected"' ?> ><?php _e('Newest to Oldest'); ?></option>
269
+ <option value="least-recent" <?php if($sb_instagram_sort == "least-recent") echo 'selected="selected"' ?> ><?php _e('Oldest to newest'); ?></option>
270
+ <option value="most-liked" <?php if($sb_instagram_sort == "most-liked") echo 'selected="selected"' ?> ><?php _e('Most liked first'); ?></option>
271
+ <option value="least-liked" <?php if($sb_instagram_sort == "least-liked") echo 'selected="selected"' ?> ><?php _e('Least liked first'); ?></option>
272
+ <option value="most-commented" <?php if($sb_instagram_sort == "most-commented") echo 'selected="selected"' ?> ><?php _e('Most commented first'); ?></option>
273
+ <option value="least-commented" <?php if($sb_instagram_sort == "least-commented") echo 'selected="selected"' ?> ><?php _e('Least commented first'); ?></option> -->
274
+ <option value="random" <?php if($sb_instagram_sort == "random") echo 'selected="selected"' ?> ><?php _e('Random'); ?></option>
275
+ </select>
276
+ </td>
277
+ </tr>
278
+ <tr valign="top" class="sbi_pro">
279
+ <th scope="row"><label><?php _e("Enable Pop-up Lightbox"); ?></label></th>
280
+ <td>
281
+ <input disabled type="checkbox" />
282
+ <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>
283
+ </td>
284
+ </tr>
285
+ <tr valign="top">
286
+ <th scope="row"><label><?php _e('Number of Photos'); ?></label></th>
287
+ <td>
288
+ <input name="sb_instagram_num" type="text" value="<?php esc_attr_e( $sb_instagram_num ); ?>" size="4" />
289
+ <span class="sbi_note"><?php _e('Number of photos to show initially. Maximum of 33.'); ?></span>
290
+ </td>
291
+ </tr>
292
+ <tr valign="top">
293
+ <th scope="row"><label><?php _e('Number of Columns'); ?></label></th>
294
+ <td>
295
+
296
+ <select name="sb_instagram_cols">
297
+ <option value="1" <?php if($sb_instagram_cols == "1") echo 'selected="selected"' ?> ><?php _e('1'); ?></option>
298
+ <option value="2" <?php if($sb_instagram_cols == "2") echo 'selected="selected"' ?> ><?php _e('2'); ?></option>
299
+ <option value="3" <?php if($sb_instagram_cols == "3") echo 'selected="selected"' ?> ><?php _e('3'); ?></option>
300
+ <option value="4" <?php if($sb_instagram_cols == "4") echo 'selected="selected"' ?> ><?php _e('4'); ?></option>
301
+ <option value="5" <?php if($sb_instagram_cols == "5") echo 'selected="selected"' ?> ><?php _e('5'); ?></option>
302
+ <option value="6" <?php if($sb_instagram_cols == "6") echo 'selected="selected"' ?> ><?php _e('6'); ?></option>
303
+ <option value="7" <?php if($sb_instagram_cols == "7") echo 'selected="selected"' ?> ><?php _e('7'); ?></option>
304
+ <option value="8" <?php if($sb_instagram_cols == "8") echo 'selected="selected"' ?> ><?php _e('8'); ?></option>
305
+ <option value="9" <?php if($sb_instagram_cols == "9") echo 'selected="selected"' ?> ><?php _e('9'); ?></option>
306
+ <option value="10" <?php if($sb_instagram_cols == "10") echo 'selected="selected"' ?> ><?php _e('10'); ?></option>
307
+ </select>
308
+
309
+ </td>
310
+ </tr>
311
+ <tr valign="top">
312
+ <th scope="row"><label><?php _e('Image Resolution'); ?></label></th>
313
+ <td>
314
+
315
+ <select name="sb_instagram_image_res">
316
+ <option value="full" <?php if($sb_instagram_image_res == "full") echo 'selected="selected"' ?> ><?php _e('Full size (640x640)'); ?></option>
317
+ <option value="medium" <?php if($sb_instagram_image_res == "medium") echo 'selected="selected"' ?> ><?php _e('Medium (306x306)'); ?></option>
318
+ <option value="thumb" <?php if($sb_instagram_image_res == "thumb") echo 'selected="selected"' ?> ><?php _e('Thumbnail (150x150)'); ?></option>
319
+ </select>
320
+
321
+ </td>
322
+ </tr>
323
+ <tr valign="top">
324
+ <th scope="row"><label><?php _e('Padding around Images'); ?></label></th>
325
+ <td>
326
+ <input name="sb_instagram_image_padding" type="text" value="<?php esc_attr_e( $sb_instagram_image_padding ); ?>" size="4" />
327
+ <select name="sb_instagram_image_padding_unit">
328
+ <option value="px" <?php if($sb_instagram_image_padding_unit == "px") echo 'selected="selected"' ?> ><?php _e('px'); ?></option>
329
+ <option value="%" <?php if($sb_instagram_image_padding_unit == "%") echo 'selected="selected"' ?> ><?php _e('%'); ?></option>
330
+ </select>
331
+ </td>
332
+ </tr>
333
+ </tbody>
334
+ </table>
335
+
336
+ <?php submit_button(); ?>
337
+
338
+ <hr />
339
+ <h3><?php _e("'Load More' Button"); ?></h3>
340
+ <table class="form-table">
341
+ <tbody>
342
+ <tr valign="top">
343
+ <th scope="row"><label><?php _e("Show the 'Load More' button"); ?></label></th>
344
+ <td>
345
+ <input type="checkbox" name="sb_instagram_show_btn" id="sb_instagram_show_btn" <?php if($sb_instagram_show_btn == true) echo 'checked="checked"' ?> />
346
+ </td>
347
+ </tr>
348
+ <tr valign="top">
349
+ <th scope="row"><label><?php _e('Button Background Color'); ?></label></th>
350
+ <td>
351
+ <input name="sb_instagram_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_btn_background ); ?>" class="sbi_colorpick" />
352
+ </td>
353
+ </tr>
354
+ <tr valign="top">
355
+ <th scope="row"><label><?php _e('Button Text Color'); ?></label></th>
356
+ <td>
357
+ <input name="sb_instagram_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text_color ); ?>" class="sbi_colorpick" />
358
+ </td>
359
+ </tr>
360
+
361
+ </tbody>
362
+ </table>
363
+
364
+ <hr />
365
+ <h3><?php _e("Caption"); ?></h3>
366
+ <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Photo Captions</a></p>
367
+
368
+ <hr />
369
+ <h3><?php _e("Likes &amp; Comments"); ?></h3>
370
+ <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Likes &amp; Comments</a></p>
371
+
372
+
373
+ <hr />
374
+ <h3><?php _e('Translate / Custom Text'); ?></h3>
375
+ <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Custom Text</a></p>
376
+
377
+
378
+ <hr />
379
+ <h3><?php _e('Misc'); ?></h3>
380
+
381
+ <table class="form-table">
382
+ <tbody>
383
+ <tr valign="top">
384
+ <td style="padding-bottom: 0;">
385
+ <?php _e('<strong style="font-size: 15px;">Custom CSS</strong><br />Enter your own custom CSS in the box below'); ?>
386
+ </td>
387
+ </tr>
388
+ <tr valign="top">
389
+ <td>
390
+ <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>
391
+ </td>
392
+ </tr>
393
+ <tr valign="top">
394
+ <td style="padding-bottom: 0;">
395
+ <?php _e('<strong style="font-size: 15px;">Custom JavaScript</strong><br />Enter your own custom JavaScript/jQuery in the box below'); ?>
396
+ </td>
397
+ </tr>
398
+ <tr valign="top">
399
+ <td>
400
+ <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>
401
+ </td>
402
+ </tr>
403
+ </tbody>
404
+ </table>
405
+
406
+ <?php submit_button(); ?>
407
+
408
+ </form>
409
+
410
+ <p><?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=display">Display your Feed</a>'); ?></p>
411
+
412
+
413
+ <?php } //End Customize tab ?>
414
+
415
+
416
+
417
+ <?php if( $sbi_active_tab == 'display' ) { //Start Configure tab ?>
418
+
419
+ <h3><?php _e('Display your Feed'); ?></h3>
420
  <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>
421
  <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).'); ?>" />
422
 
424
  <code>[instagram-feed num=9 cols=3]</code></p>
425
  <p><?php _e("See the table below for a full list of available shortcode options:"); ?></p>
426
 
427
+ <p><span class="sbi_table_key"></span><?php _e('Pro version only'); ?></p>
428
+
429
  <table class="sbi_shortcode_table">
430
  <tbody>
431
  <tr valign="top">
433
  <th scope="row"><?php _e('Description'); ?></th>
434
  <th scope="row"><?php _e('Example'); ?></th>
435
  </tr>
436
+
437
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Configure Options"); ?></td></tr>
438
+ <tr class="sbi_pro">
439
+ <td>type</td>
440
+ <td><?php _e("Display photos from a User ID (user) or Hashtag (hashtag)"); ?></td>
441
+ <td><code>[instagram-feed type=hashtag]</code></td>
442
+ </tr>
443
  <tr>
444
  <td>id</td>
445
  <td><?php _e('An Instagram User ID'); ?></td>
446
  <td><code>[instagram-feed id=1234567]</code></td>
447
  </tr>
448
+ <tr class="sbi_pro">
449
+ <td>hashtag</td>
450
+ <td><?php _e('A hashtag, not including the &#35; symbol'); ?></td>
451
+ <td><code>[instagram-feed hashtag=awesome]</code></td>
452
+ </tr>
453
+
454
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Customize Options"); ?></td></tr>
455
+ <tr>
456
  <td>width</td>
457
+ <td><?php _e("The width of your feed. Any number."); ?></td>
458
  <td><code>[instagram-feed width=50]</code></td>
459
  </tr>
460
  <tr>
461
  <td>widthunit</td>
462
+ <td><?php _e("The unit of the width. 'px' or '%'"); ?></td>
463
  <td><code>[instagram-feed widthunit=%]</code></td>
464
  </tr>
465
  <tr>
466
  <td>height</td>
467
+ <td><?php _e("The height of your feed. Any number."); ?></td>
468
  <td><code>[instagram-feed height=250]</code></td>
469
  </tr>
470
  <tr>
471
  <td>heightunit</td>
472
+ <td><?php _e("The unit of the height. 'px' or '%'"); ?></td>
473
  <td><code>[instagram-feed heightunit=px]</code></td>
474
  </tr>
475
+ <tr>
476
+ <td>background</td>
477
+ <td><?php _e("The background color of the feed. Any hex color code."); ?></td>
478
+ <td><code>[instagram-feed background=#ffff00]</code></td>
479
+ </tr>
480
+
481
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Photos Options"); ?></td></tr>
482
+ <tr>
483
+ <td>sortby</td>
484
+ <td><?php _e("Sort the posts by Newest to Oldest (none) or Random (random)"); ?></td>
485
+ <td><code>[instagram-feed sortby=random]</code></td>
486
+ </tr>
487
  <tr>
488
  <td>num</td>
489
+ <td><?php _e("The number of photos to display initially. Maximum is 33."); ?></td>
490
  <td><code>[instagram-feed num=10]</code></td>
491
  </tr>
492
  <tr>
493
  <td>cols</td>
494
+ <td><?php _e("The number of columns in your feed. 1 - 10."); ?></td>
495
  <td><code>[instagram-feed cols=5]</code></td>
496
  </tr>
497
+ <tr>
498
+ <td>imageres</td>
499
+ <td><?php _e("The resolution/size of the photos. 'full', 'medium' or 'thumb'."); ?></td>
500
+ <td><code>[instagram-feed imageres=full]</code></td>
501
+ </tr>
502
  <tr>
503
  <td>imagepadding</td>
504
+ <td><?php _e("The spacing around your photos"); ?></td>
505
  <td><code>[instagram-feed imagepadding=10]</code></td>
506
  </tr>
507
  <tr>
508
  <td>imagepaddingunit</td>
509
+ <td><?php _e("The unit of the padding. 'px' or '%'"); ?></td>
510
  <td><code>[instagram-feed imagepaddingunit=px]</code></td>
511
  </tr>
512
+
513
+ <tr class="sbi_table_header"><td colspan=3><?php _e("'Load More' Button Options"); ?></td></tr>
 
 
 
514
  <tr>
515
  <td>showbutton</td>
516
+ <td><?php _e("Whether to show the 'Load More' button. 'true' or 'false'."); ?></td>
517
+ <td><code>[instagram-feed showbutton=false]</code></td>
518
  </tr>
519
  <tr>
520
  <td>buttoncolor</td>
521
+ <td><?php _e("The background color of the button. Any hex color code."); ?></td>
522
  <td><code>[instagram-feed buttoncolor=#000]</code></td>
523
  </tr>
524
  <tr>
525
  <td>buttontextcolor</td>
526
+ <td><?php _e("The text color of the button. Any hex color code."); ?></td>
527
  <td><code>[instagram-feed buttontextcolor=#fff]</code></td>
528
  </tr>
529
+
530
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Text Options"); ?></td></tr>
531
+ <tr class="sbi_pro">
532
+ <td>showcaption</td>
533
+ <td><?php _e("Whether to show the photo caption. 'true' or 'false'."); ?></td>
534
+ <td><code>[instagram-feed showcaption=false]</code></td>
535
+ </tr>
536
+ <tr class="sbi_pro">
537
+ <td>captionlength</td>
538
+ <td><?php _e("The number of characters of the caption to display"); ?></td>
539
+ <td><code>[instagram-feed captionlength=50]</code></td>
540
+ </tr>
541
+ <tr class="sbi_pro">
542
+ <td>captioncolor</td>
543
+ <td><?php _e("The text color of the caption. Any hex color code."); ?></td>
544
+ <td><code>[instagram-feed captioncolor=#000]</code></td>
545
+ </tr>
546
+ <tr class="sbi_pro">
547
+ <td>captionsize</td>
548
+ <td><?php _e("The size of the caption text. Any number."); ?></td>
549
+ <td><code>[instagram-feed captionsize=24]</code></td>
550
+ </tr>
551
+
552
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Likes &amp; Comments Options"); ?></td></tr>
553
+ <tr class="sbi_pro">
554
+ <td>showlikes</td>
555
+ <td><?php _e("Whether to show the Likes &amp; Comments. 'true' or 'false'."); ?></td>
556
+ <td><code>[instagram-feed showlikes=false]</code></td>
557
+ </tr>
558
+ <tr class="sbi_pro">
559
+ <td>likescolor</td>
560
+ <td><?php _e("The color of the Likes &amp; Comments. Any hex color code."); ?></td>
561
+ <td><code>[instagram-feed likescolor=#FF0000]</code></td>
562
  </tr>
563
+ <tr class="sbi_pro">
564
+ <td>likessize</td>
565
+ <td><?php _e("The size of the Likes &amp; Comments. Any number."); ?></td>
566
+ <td><code>[instagram-feed likessize=14]</code></td>
567
+ </tr>
568
+
569
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Translate / Custom Text Options"); ?></td></tr>
570
+ <tr class="sbi_pro">
571
+ <td>fullsizetext</td>
572
+ <td><?php _e("Change the 'Full-size' text"); ?></td>
573
+ <td><code>[instagram-feed fullsizetext='View full-size']</code></td>
574
+ </tr>
575
+ <tr class="sbi_pro">
576
+ <td>instagramtext</td>
577
+ <td><?php _e("Change the 'Instagram' text"); ?></td>
578
+ <td><code>[instagram-feed instagramtext='View on Instagram']</code></td>
579
+ </tr>
580
+
581
  </tbody>
582
  </table>
583
 
584
+ <?php } //End Display tab ?>
 
 
 
585
 
586
+ <hr />
587
+
588
+ <a href="https://smashballoon.com/instagram-feed/demo" target="_blank" style="display: block; margin: 20px 0 0 0;">
589
+ <img src="<?php echo plugins_url( 'img/instagram-pro-promo.png' , __FILE__ ) ?>" alt="Instagram Feed Pro">
590
+ </a>
591
+
592
+ </div> <!-- end #sbi_admin -->
593
+
594
+ <?php } //End Settings page
595
 
596
  function sb_instagram_admin_style() {
597
  wp_register_style( 'sb_instagram_admin_css', plugin_dir_url( __FILE__ ) . 'css/sb-instagram-admin.css', false, '1.0.0' );
instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
  Description: Add a simple customizable Instagram feed to your website
6
- Version: 1.1.6
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
@@ -42,6 +42,7 @@ function display_instagram($atts, $content = null) {
42
  'widthunit' => $options[ 'sb_instagram_width_unit' ],
43
  'height' => $options[ 'sb_instagram_height' ],
44
  'heightunit' => $options[ 'sb_instagram_height_unit' ],
 
45
  'num' => $options[ 'sb_instagram_num' ],
46
  'cols' => $options[ 'sb_instagram_cols' ],
47
  'imagepadding' => $options[ 'sb_instagram_image_padding' ],
@@ -50,7 +51,7 @@ function display_instagram($atts, $content = null) {
50
  'showbutton' => $options[ 'sb_instagram_show_btn' ],
51
  'buttoncolor' => $options[ 'sb_instagram_btn_background' ],
52
  'buttontextcolor' => $options[ 'sb_instagram_btn_text_color' ],
53
- 'imageres' => $options[ 'sb_instagram_image_res' ]
54
  ), $atts);
55
 
56
 
@@ -81,7 +82,7 @@ function display_instagram($atts, $content = null) {
81
 
82
  //Load more button styles
83
  $sb_instagram_show_btn = $atts['showbutton'];
84
- if($sb_instagram_show_btn == 'false') $sb_instagram_show_btn = false;
85
  $sb_instagram_btn_background = $atts['buttoncolor'];
86
  $sb_instagram_btn_text_color = $atts['buttontextcolor'];
87
 
@@ -96,19 +97,20 @@ function display_instagram($atts, $content = null) {
96
  $sb_instagram_content = '<div id="sb_instagram" class="sbi ';
97
  if ( !empty($sb_instagram_height) ) $sb_instagram_content .= 'sbi_fixed_height ';
98
  $sb_instagram_content .= 'sbi_col_' . trim($sb_instagram_cols);
99
- $sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '">';
100
 
101
  $sb_instagram_content .= '<div id="sbi_images" style="padding: '.$sb_instagram_image_padding . $sb_instagram_image_padding_unit .';">';
102
 
103
  //Error messages
104
- if( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ) $sb_instagram_content .= '<p>Please enter a User ID either on the Instagram plugin Settings page or directly in the shortcode, like so: [instagram-feed id=1234567]</p>';
 
105
  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>';
106
 
107
- $sb_instagram_content .= '</div>
108
- <div id="sbi_load">';
 
109
  if( $sb_instagram_show_btn ) $sb_instagram_content .= '<a href="javascript:void(0);" '.$sb_instagram_button_styles.'>Load More...</a>';
110
- $sb_instagram_content .= '</div>
111
- </div>';
112
 
113
  //Return our feed HTML to display
114
  return $sb_instagram_content;
@@ -124,7 +126,7 @@ add_filter('widget_text', 'do_shortcode');
124
  //Enqueue stylesheet
125
  add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
126
  function sb_instagram_styles_enqueue() {
127
- wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.css?1', __FILE__) );
128
  wp_enqueue_style( 'sb_instagram_styles' );
129
  }
130
 
@@ -132,13 +134,12 @@ function sb_instagram_styles_enqueue() {
132
  add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
133
  function sb_instagram_scripts_enqueue() {
134
  //Register the script to make it available
135
- wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.js?2' , __FILE__ ), array('jquery'), '1.8', true );
136
 
137
  //Options to pass to JS file
138
  $sb_instagram_settings = get_option('sb_instagram_settings');
139
  $data = array(
140
  'sb_instagram_at' => trim($sb_instagram_settings['sb_instagram_at'])
141
- // 'sb_instagram_user_id' => trim($sb_instagram_settings['sb_instagram_user_id'])
142
  );
143
 
144
  //Enqueue it to load it onto the page
@@ -148,16 +149,58 @@ function sb_instagram_scripts_enqueue() {
148
  wp_localize_script('sb_instagram_scripts', 'sb_instagram_js_options', $data);
149
  }
150
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
151
  //Uninstall
152
  function sb_instagram_uninstall()
153
  {
154
  if ( ! current_user_can( 'activate_plugins' ) )
155
  return;
 
 
 
 
 
 
156
  //Settings
157
  delete_option( 'sb_instagram_settings' );
158
  }
159
  register_uninstall_hook( __FILE__, 'sb_instagram_uninstall' );
160
 
161
-
162
- // error_reporting(~0);
163
  ?>
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
  Description: Add a simple customizable Instagram feed to your website
6
+ Version: 1.2
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
42
  'widthunit' => $options[ 'sb_instagram_width_unit' ],
43
  'height' => $options[ 'sb_instagram_height' ],
44
  'heightunit' => $options[ 'sb_instagram_height_unit' ],
45
+ 'sortby' => $options[ 'sb_instagram_sort' ],
46
  'num' => $options[ 'sb_instagram_num' ],
47
  'cols' => $options[ 'sb_instagram_cols' ],
48
  'imagepadding' => $options[ 'sb_instagram_image_padding' ],
51
  'showbutton' => $options[ 'sb_instagram_show_btn' ],
52
  'buttoncolor' => $options[ 'sb_instagram_btn_background' ],
53
  'buttontextcolor' => $options[ 'sb_instagram_btn_text_color' ],
54
+ 'imageres' => $options[ 'sb_instagram_image_res' ],
55
  ), $atts);
56
 
57
 
82
 
83
  //Load more button styles
84
  $sb_instagram_show_btn = $atts['showbutton'];
85
+ if($sb_instagram_show_btn === 'false') $sb_instagram_show_btn = false;
86
  $sb_instagram_btn_background = $atts['buttoncolor'];
87
  $sb_instagram_btn_text_color = $atts['buttontextcolor'];
88
 
97
  $sb_instagram_content = '<div id="sb_instagram" class="sbi ';
98
  if ( !empty($sb_instagram_height) ) $sb_instagram_content .= 'sbi_fixed_height ';
99
  $sb_instagram_content .= 'sbi_col_' . trim($sb_instagram_cols);
100
+ $sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '" data-options="{&quot;sortby&quot;: &quot;'.$atts['sortby'].'&quot;}">';
101
 
102
  $sb_instagram_content .= '<div id="sbi_images" style="padding: '.$sb_instagram_image_padding . $sb_instagram_image_padding_unit .';">';
103
 
104
  //Error messages
105
+ if( $sb_instagram_type == 'user' && ( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ) ) $sb_instagram_content .= '<p>Please enter a User ID on the Instagram plugin Settings page</p>';
106
+
107
  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>';
108
 
109
+ $sb_instagram_content .= '</div><div id="sbi_load"';
110
+ if($sb_instagram_image_padding == 0 || !isset($sb_instagram_image_padding)) $sb_instagram_content .= ' style="padding-top: 5px"';
111
+ $sb_instagram_content .= '>';
112
  if( $sb_instagram_show_btn ) $sb_instagram_content .= '<a href="javascript:void(0);" '.$sb_instagram_button_styles.'>Load More...</a>';
113
+ $sb_instagram_content .= '</div></div>';
 
114
 
115
  //Return our feed HTML to display
116
  return $sb_instagram_content;
126
  //Enqueue stylesheet
127
  add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
128
  function sb_instagram_styles_enqueue() {
129
+ wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.css?2', __FILE__) );
130
  wp_enqueue_style( 'sb_instagram_styles' );
131
  }
132
 
134
  add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
135
  function sb_instagram_scripts_enqueue() {
136
  //Register the script to make it available
137
+ wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.js?3' , __FILE__ ), array('jquery'), '1.8', true );
138
 
139
  //Options to pass to JS file
140
  $sb_instagram_settings = get_option('sb_instagram_settings');
141
  $data = array(
142
  'sb_instagram_at' => trim($sb_instagram_settings['sb_instagram_at'])
 
143
  );
144
 
145
  //Enqueue it to load it onto the page
149
  wp_localize_script('sb_instagram_scripts', 'sb_instagram_js_options', $data);
150
  }
151
 
152
+ //Custom CSS
153
+ add_action( 'wp_head', 'sb_instagram_custom_css' );
154
+ function sb_instagram_custom_css() {
155
+ $options = get_option('sb_instagram_settings');
156
+
157
+ $sb_instagram_custom_css = $options[ 'sb_instagram_custom_css' ];
158
+ if( !empty($sb_instagram_custom_css) ) echo '<!-- Instagram Feed CSS -->';
159
+ if( !empty($sb_instagram_custom_css) ) echo "\r\n";
160
+ if( !empty($sb_instagram_custom_css) ) echo '<style type="text/css">';
161
+ if( !empty($sb_instagram_custom_css) ) echo "\r\n";
162
+ if( !empty($sb_instagram_custom_css) ) echo stripslashes($sb_instagram_custom_css);
163
+ if( !empty($sb_instagram_custom_css) ) echo "\r\n";
164
+ if( !empty($sb_instagram_custom_css) ) echo '</style>';
165
+ if( !empty($sb_instagram_custom_css) ) echo "\r\n";
166
+ }
167
+
168
+ //Custom JS
169
+ add_action( 'wp_footer', 'sb_instagram_custom_js' );
170
+ function sb_instagram_custom_js() {
171
+ $options = get_option('sb_instagram_settings');
172
+ $sb_instagram_custom_js = $options[ 'sb_instagram_custom_js' ];
173
+
174
+ if( !empty($sb_instagram_custom_js) ) echo '<!-- Instagram Feed JS -->';
175
+ if( !empty($sb_instagram_custom_js) ) echo "\r\n";
176
+ if( !empty($sb_instagram_custom_js) ) echo '<script type="text/javascript">';
177
+ if( !empty($sb_instagram_custom_js) ) echo "\r\n";
178
+ if( !empty($sb_instagram_custom_js) ) echo "jQuery( document ).ready(function($) {";
179
+ if( !empty($sb_instagram_custom_js) ) echo "\r\n";
180
+ if( !empty($sb_instagram_custom_js) ) echo stripslashes($sb_instagram_custom_js);
181
+ if( !empty($sb_instagram_custom_js) ) echo "\r\n";
182
+ if( !empty($sb_instagram_custom_js) ) echo "});";
183
+ if( !empty($sb_instagram_custom_js) ) echo "\r\n";
184
+ if( !empty($sb_instagram_custom_js) ) echo '</script>';
185
+ if( !empty($sb_instagram_custom_js) ) echo "\r\n";
186
+ }
187
+
188
+
189
  //Uninstall
190
  function sb_instagram_uninstall()
191
  {
192
  if ( ! current_user_can( 'activate_plugins' ) )
193
  return;
194
+
195
+ //If the user is preserving the settings then don't delete them
196
+ $options = get_option('sb_instagram_settings');
197
+ $sb_instagram_preserve_settings = $options[ 'sb_instagram_preserve_settings' ];
198
+ if($sb_instagram_preserve_settings) return;
199
+
200
  //Settings
201
  delete_option( 'sb_instagram_settings' );
202
  }
203
  register_uninstall_hook( __FILE__, 'sb_instagram_uninstall' );
204
 
205
+ error_reporting(0);
 
206
  ?>
js/sb-instagram-admin.js CHANGED
@@ -11,7 +11,7 @@ jQuery(document).ready(function($) {
11
 
12
  //Tooltips
13
  jQuery('#sbi_admin .sbi_tooltip_link').click(function(){
14
- jQuery(this).closest('tr').find('.sbi_tooltip').slideToggle();
15
  });
16
 
17
  //Add the color picker
11
 
12
  //Tooltips
13
  jQuery('#sbi_admin .sbi_tooltip_link').click(function(){
14
+ jQuery(this).siblings('.sbi_tooltip').slideToggle();
15
  });
16
 
17
  //Add the color picker
js/sb-instagram.js CHANGED
@@ -1,7 +1,15 @@
1
  (function($){
2
 
3
- (function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),f.src=u,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);this.options.target.append(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.instagramfeed=e}).call(this);
4
 
 
 
 
 
 
 
 
 
5
 
6
 
7
 
@@ -10,32 +18,36 @@
10
  var $self = $(this),
11
  $target = $self.find('#sbi_images'),
12
  $loadBtn = $self.find("#sbi_load"),
13
- imgres = 'standard_resolution';
 
 
 
14
 
15
  switch( this.getAttribute('data-res') ) {
16
  case 'thumb':
17
- imgres = 'thumbnail';
18
  break;
19
  case 'medium':
20
- imgres = 'low_resolution';
21
  break;
22
  default:
23
- imgres = 'standard_resolution';
24
  }
25
 
26
  var userFeed = new instagramfeed({
27
  target: $target,
28
- get: "user",
29
- resolution: imgres,
 
30
  limit: parseInt( this.getAttribute('data-num') ),
31
- // Template option breaks in IE8 and below
32
- // template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a><p>{{caption}}<br />{{comments}}<br />{{likes}}<br />{{location}}<br />{{id}}</p>',
33
  userId: parseInt( this.getAttribute('data-id') ),
34
  accessToken: sb_instagram_js_options.sb_instagram_at,
35
  after: function() {
36
  if (this.hasNext()) {
37
- $loadBtn.show();
38
  } else {
 
39
  $self.css('padding-bottom', 0);
40
  }
41
  }
@@ -47,11 +59,11 @@
47
 
48
  userFeed.run();
49
 
50
- //Add target blank to content loaded in via ajax
51
- $(document).on('click', '#sbi_images a', function(e){
52
- $(this).attr('target','_blank');
53
- });
54
-
55
  });
56
 
 
 
 
 
57
  })(jQuery);
1
  (function($){
2
 
3
+ (function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),f.src=u,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);this.options.target.append(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.instagramfeed=e}).call(this);
4
 
5
+ //Shim for "fixing" IE's lack of support (IE < 9) for applying slice on host objects like NamedNodeMap, NodeList, and HTMLCollection) https://github.com/stevenschobert/instafeed.js/issues/84
6
+ (function(){"use strict";var e=Array.prototype.slice;try{e.call(document.documentElement)}catch(t){Array.prototype.slice=function(t,n){n=typeof n!=="undefined"?n:this.length;if(Object.prototype.toString.call(this)==="[object Array]"){return e.call(this,t,n)}var r,i=[],s,o=this.length;var u=t||0;u=u>=0?u:o+u;var a=n?n:o;if(n<0){a=o+n}s=a-u;if(s>0){i=new Array(s);if(this.charAt){for(r=0;r<s;r++){i[r]=this.charAt(u+r)}}else{for(r=0;r<s;r++){i[r]=this[u+r]}}}return i}}})()
7
+
8
+ //IE8 also doesn't offer the .bind() method triggered by the 'sortBy' property. Copy and paste the polyfill offered here:
9
+ 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}}
10
+
11
+ /* Lightbox v2.7.1 by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/ */
12
+ (function(){var a=jQuery,b=function(){function a(){this.fadeDuration=500,this.fitImagesInViewport=!0,this.resizeDuration=700,this.positionFromTop=50,this.showImageNumberLabel=!0,this.alwaysShowNavOnTouchDevices=!1,this.wrapAround=!1}return a.prototype.albumLabel=function(a,b){return"Image "+a+" of "+b},a}(),c=function(){function b(a){this.options=a,this.album=[],this.currentImageIndex=void 0,this.init()}return b.prototype.init=function(){this.enable(),this.build()},b.prototype.enable=function(){var b=this;a("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(c){return b.start(a(c.currentTarget)),!1})},b.prototype.build=function(){var b=this;a("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo(a("body")),this.$lightbox=a("#lightbox"),this.$overlay=a("#lightboxOverlay"),this.$outerContainer=this.$lightbox.find(".lb-outerContainer"),this.$container=this.$lightbox.find(".lb-container"),this.containerTopPadding=parseInt(this.$container.css("padding-top"),10),this.containerRightPadding=parseInt(this.$container.css("padding-right"),10),this.containerBottomPadding=parseInt(this.$container.css("padding-bottom"),10),this.containerLeftPadding=parseInt(this.$container.css("padding-left"),10),this.$overlay.hide().on("click",function(){return b.end(),!1}),this.$lightbox.hide().on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$outerContainer.on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$lightbox.find(".lb-prev").on("click",function(){return b.changeImage(0===b.currentImageIndex?b.album.length-1:b.currentImageIndex-1),!1}),this.$lightbox.find(".lb-next").on("click",function(){return b.changeImage(b.currentImageIndex===b.album.length-1?0:b.currentImageIndex+1),!1}),this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){return b.end(),!1})},b.prototype.start=function(b){function c(a){d.album.push({link:a.attr("href"),title:a.attr("data-title")||a.attr("title")})}var d=this,e=a(window);e.on("resize",a.proxy(this.sizeOverlay,this)),a("select, object, embed").css({visibility:"hidden"}),this.sizeOverlay(),this.album=[];var f,g=0,h=b.attr("data-lightbox");if(h){f=a(b.prop("tagName")+'[data-lightbox="'+h+'"]');for(var i=0;i<f.length;i=++i)c(a(f[i])),f[i]===b[0]&&(g=i)}else if("lightbox"===b.attr("rel"))c(b);else{f=a(b.prop("tagName")+'[rel="'+b.attr("rel")+'"]');for(var j=0;j<f.length;j=++j)c(a(f[j])),f[j]===b[0]&&(g=j)}var k=e.scrollTop()+this.options.positionFromTop,l=e.scrollLeft();this.$lightbox.css({top:k+"px",left:l+"px"}).fadeIn(this.options.fadeDuration),this.changeImage(g)},b.prototype.changeImage=function(b){var c=this;this.disableKeyboardNav();var d=this.$lightbox.find(".lb-image");this.$overlay.fadeIn(this.options.fadeDuration),a(".lb-loader").fadeIn("slow"),this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide(),this.$outerContainer.addClass("animating");var e=new Image;e.onload=function(){var f,g,h,i,j,k,l;d.attr("src",c.album[b].link),f=a(e),d.width(e.width),d.height(e.height),c.options.fitImagesInViewport&&(l=a(window).width(),k=a(window).height(),j=l-c.containerLeftPadding-c.containerRightPadding-20,i=k-c.containerTopPadding-c.containerBottomPadding-120,(e.width>j||e.height>i)&&(e.width/j>e.height/i?(h=j,g=parseInt(e.height/(e.width/h),10),d.width(h),d.height(g)):(g=i,h=parseInt(e.width/(e.height/g),10),d.width(h),d.height(g)))),c.sizeContainer(d.width(),d.height())},e.src=this.album[b].link,this.currentImageIndex=b},b.prototype.sizeOverlay=function(){this.$overlay.width(a(window).width()).height(a(document).height())},b.prototype.sizeContainer=function(a,b){function c(){d.$lightbox.find(".lb-dataContainer").width(g),d.$lightbox.find(".lb-prevLink").height(h),d.$lightbox.find(".lb-nextLink").height(h),d.showImage()}var d=this,e=this.$outerContainer.outerWidth(),f=this.$outerContainer.outerHeight(),g=a+this.containerLeftPadding+this.containerRightPadding,h=b+this.containerTopPadding+this.containerBottomPadding;e!==g||f!==h?this.$outerContainer.animate({width:g,height:h},this.options.resizeDuration,"swing",function(){c()}):c()},b.prototype.showImage=function(){this.$lightbox.find(".lb-loader").hide(),this.$lightbox.find(".lb-image").fadeIn("slow"),this.updateNav(),this.updateDetails(),this.preloadNeighboringImages(),this.enableKeyboardNav()},b.prototype.updateNav=function(){var a=!1;try{document.createEvent("TouchEvent"),a=this.options.alwaysShowNavOnTouchDevices?!0:!1}catch(b){}this.$lightbox.find(".lb-nav").show(),this.album.length>1&&(this.options.wrapAround?(a&&this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1"),this.$lightbox.find(".lb-prev, .lb-next").show()):(this.currentImageIndex>0&&(this.$lightbox.find(".lb-prev").show(),a&&this.$lightbox.find(".lb-prev").css("opacity","1")),this.currentImageIndex<this.album.length-1&&(this.$lightbox.find(".lb-next").show(),a&&this.$lightbox.find(".lb-next").css("opacity","1"))))},b.prototype.updateDetails=function(){var b=this;"undefined"!=typeof this.album[this.currentImageIndex].title&&""!==this.album[this.currentImageIndex].title&&this.$lightbox.find(".lb-caption").html(this.album[this.currentImageIndex].title).fadeIn("fast").find("a").on("click",function(){location.href=a(this).attr("href")}),this.album.length>1&&this.options.showImageNumberLabel?this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn("fast"):this.$lightbox.find(".lb-number").hide(),this.$outerContainer.removeClass("animating"),this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return b.sizeOverlay()})},b.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){var a=new Image;a.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){var b=new Image;b.src=this.album[this.currentImageIndex-1].link}},b.prototype.enableKeyboardNav=function(){a(document).on("keyup.keyboard",a.proxy(this.keyboardAction,this))},b.prototype.disableKeyboardNav=function(){a(document).off(".keyboard")},b.prototype.keyboardAction=function(a){var b=27,c=37,d=39,e=a.keyCode,f=String.fromCharCode(e).toLowerCase();e===b||f.match(/x|o|c/)?this.end():"p"===f||e===c?0!==this.currentImageIndex?this.changeImage(this.currentImageIndex-1):this.options.wrapAround&&this.album.length>1&&this.changeImage(this.album.length-1):("n"===f||e===d)&&(this.currentImageIndex!==this.album.length-1?this.changeImage(this.currentImageIndex+1):this.options.wrapAround&&this.album.length>1&&this.changeImage(0))},b.prototype.end=function(){this.disableKeyboardNav(),a(window).off("resize",this.sizeOverlay),this.$lightbox.fadeOut(this.options.fadeDuration),this.$overlay.fadeOut(this.options.fadeDuration),a("select, object, embed").css({visibility:"visible"})},b}();a(function(){{var a=new b;new c(a)}})}).call(this);
13
 
14
 
15
 
18
  var $self = $(this),
19
  $target = $self.find('#sbi_images'),
20
  $loadBtn = $self.find("#sbi_load"),
21
+ imgRes = 'standard_resolution',
22
+ //Convert styles JSON string to an object
23
+ feedOptions = JSON.parse( this.getAttribute('data-options') ),
24
+ getType = 'user';
25
 
26
  switch( this.getAttribute('data-res') ) {
27
  case 'thumb':
28
+ imgRes = 'thumbnail';
29
  break;
30
  case 'medium':
31
+ imgRes = 'low_resolution';
32
  break;
33
  default:
34
+ imgRes = 'standard_resolution';
35
  }
36
 
37
  var userFeed = new instagramfeed({
38
  target: $target,
39
+ get: getType,
40
+ sortBy: feedOptions.sortby,
41
+ resolution: imgRes,
42
  limit: parseInt( this.getAttribute('data-num') ),
43
+ template: '<div class="sbi_item"><div class="sbi_photo_wrap"><a class="sbi_photo" href="{{link}}" target="_blank"><img src="{{image}}" alt="{{image}}" /></a></div></div>',
 
44
  userId: parseInt( this.getAttribute('data-id') ),
45
  accessToken: sb_instagram_js_options.sb_instagram_at,
46
  after: function() {
47
  if (this.hasNext()) {
48
+ $loadBtn.show();
49
  } else {
50
+ $loadBtn.hide();
51
  $self.css('padding-bottom', 0);
52
  }
53
  }
59
 
60
  userFeed.run();
61
 
62
+
 
 
 
 
63
  });
64
 
65
+
66
+
67
+
68
+
69
  })(jQuery);