Instagram Feed - Version 1.3.0

Version Description

Download this release

Release Info

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

Code changes from version 1.2.2 to 1.3.0

Files changed (7) hide show
  1. README.txt +94 -28
  2. css/sb-instagram.css +155 -9
  3. img/instagram-pro-promo.png +0 -0
  4. img/loader.png +0 -0
  5. instagram-feed-admin.php +214 -44
  6. instagram-feed.php +58 -15
  7. js/sb-instagram.js +142 -38
README.txt CHANGED
@@ -3,75 +3,104 @@ 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.1
6
- Stable tag: 1.2.2
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
10
- Add a beautifully clean, customizable, and responsive Instagram feed to your website
11
 
12
  == Description ==
13
 
14
- Display the Instagram photo feed of any non-private Instagram account.
15
 
16
  = Features =
17
  * Super **simple to set up**
 
18
  * Completely **responsive** and mobile ready - layout looks great on any screen size and in any container width
19
  * **Completely customizable** - Customize the width, height, number of photos, number of columns, image size, background color, image spacing and more!
20
  * Display **multiple Instagram feeds** on the same page or on different pages throughout your site
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
29
- * Save time and increase efficiency by only posting your photos to Instagram and automatically displaying them on your website
 
 
 
30
 
31
  = Featured Review =
32
- "**Great instagram plugin & support** - Was looking for a plugin that gave me control over how it displayed (specifically, 3-columns). This plugin did the trick quite nicely! And when I had a minor issue with obtaining the code I needed from Instagram to get it working, a quick email to support at smash balloon was replied to within hours. Good plugin, good support!" - [olivmich](http://wordpress.org/support/topic/great-instagram-plugin-support 'Great instagram plugin & support')
 
 
33
 
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**, show photo **captions**, **video** support + more, check out the [Pro version](http://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
38
 
39
  == Installation ==
40
 
41
  1. Install the Instagram plugin either via the WordPress plugin directory, or by uploading the files to your web server (in the `/wp-content/plugins/` directory).
42
  2. Activate the plugin through the 'Plugins' menu in WordPress.
43
- 3. Navigate to the 'Instagram Feed' settings page to configure your Instagram feed.
44
  4. Use the shortcode `[instagram-feed]` in your page, post or widget to display your photos.
45
- 5. You can display multiple Instagram feeds by using shortcode options, for example: `[instagram-feed id=YOUR_USER_ID_HERE cols=3 width=50 widthunit=%]`
 
 
46
 
47
  = Shortcode Options =
 
48
  * **id** - An Instagram User ID - Example: `[instagram-feed id=1234567]`
49
  * **width** - The width of your feed. Any number - Example: `[instagram-feed width=50]`
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](http://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? =
69
 
70
- Yep. You can display multiple Instagram feeds by using our built-in shortcode options, for example: `[instagram-feed id=YOUR_USER_ID_HERE cols=3 width=50 widthunit=%]`.
 
 
 
 
71
 
72
  = How do I find my Instagram Access Token and User ID =
73
 
74
- We've made it super easy. Simply click on the big blue button on the Instagram plugins Settings page and log into your Instagram account. The plugin will then retrieve and display both your Access Token and User ID from Instagram.
75
 
76
  You can also display photos from other peoples Instagram accounts. To find their Instagram User ID you can use [this tool](http://jelled.com/instagram/lookup-user-id).
77
 
@@ -79,18 +108,20 @@ You can also display photos from other peoples Instagram accounts. To find their
79
 
80
  Nope. The Access Token used in the plugin is a "read only" token, which means that it could never be used maliciously to manipulate your Instagram account.
81
 
82
- = My Instagram feed isn't display. Why not!? =
83
 
84
- There are 2 common reasons for this:
85
 
86
- * Your Instagram account is set to private. Instagram doesn't allow photos from private Instagram accounts to be displayed publicly.
87
- * Your website contains a JavaScript error which is preventing JavaScript from running. The plugin uses JavaScript to load the Instagram photos into your page and so needs JavaScript to be running in order to work. You would need to remove any existing JavaScript errors on your website for the plugin to be able to load in your feed.
 
 
88
 
89
- If you're still having an issue displaying your feed then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum') with a link to the page where you're trying to display the feed and, if possible, a link to your Instagram account.
90
 
91
- = Can I view the full-size photos directly on my website? =
92
 
93
- This is a feature of the [Pro version](http://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro') of the plugin, which allows you to view the photos in a pop-up lightbox, support videos, display captions, display photos by hashtag + more!
94
 
95
  = How do I embed my Instagram Feed directly into a WordPress page template? =
96
 
@@ -100,32 +131,67 @@ You can embed your Instagram feed directly into a template file by using the Wor
100
 
101
  The below options are available on the Instagram Feed Settings page but can also be used directly in the `[instagram-feed]` shortcode to customize individual Instagram feeds on a feed-by-feed basis.
102
 
 
103
  * **id** - An Instagram User ID - Example: `[instagram-feed id=1234567]`
104
  * **width** - The width of your feed. Any number - Example: `[instagram-feed width=50]`
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](http://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.
124
- 2. Customize the number of columns, colors and size of your Instagram feed.
125
- 3. An example of two columns with no space between photos.
126
- 4. The Instagram Settings page. Super simple to set up and customize.
 
 
 
127
 
128
  == Changelog ==
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  = 1.2.2 =
130
  * Tweak: Added an initialize function to the plugin
131
  * Fix: Fixed an occasional issue with the 'Sort Photos By' option being undefined
@@ -140,7 +206,7 @@ For more shortcode options, check out the [Pro version](http://smashballoon.com/
140
  * New: Added an option to display your Instagram photos in random order
141
  * New: A new tabbed layout has been implemented on the plugin's settings pages
142
  * New: Added an option to preserve your settings when uninstalling the plugin
143
- * New: Added a [Pro version](http://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
144
  * Tweak: The 'Load More' button now automatically hides if there are no more photos to load
145
  * Tweak: Added a small gap to the top of the 'Load More' button
146
  * Tweak: Added a icon to the Instagram Feed menu item
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.1
6
+ Stable tag: 1.3
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
10
+ Display beautifully clean, customizable, and responsive feeds from multiple Instagram accounts
11
 
12
  == Description ==
13
 
14
+ Display Instagram photos from any non-private Instagram accounts, either in the same single feed or in multiple different ones.
15
 
16
  = Features =
17
  * Super **simple to set up**
18
+ * Display photos from **multiple Instagram accounts** in the same feed or in separate feeds
19
  * Completely **responsive** and mobile ready - layout looks great on any screen size and in any container width
20
  * **Completely customizable** - Customize the width, height, number of photos, number of columns, image size, background color, image spacing and more!
21
  * Display **multiple Instagram feeds** on the same page or on different pages throughout your site
22
  * Use the built-in **shortcode options** to completely customize each of your Instagram feeds
23
  * Display thumbnail, medium or **full-size photos** from your Instagram feed
24
  * **Infinitely load more** of your Instagram photos with the 'Load More' button
25
+ * Includes a **Follow on Instagram button** at the bottom of your feed
26
+ * Display a **beautiful header** at the top of your feed
27
  * Display your Instagram photos chronologically or in random order
28
+ * Add your own Custom CSS and JavaScript for even deeper customizations
29
 
30
  = Benefits =
31
+ * **Increase Social Engagement** - Increase engagement between you and your Instagram followers. Increase your number of followers by displaying your Instagram content directly on your site.
32
+ * **Save Time** - Don't have time to update your photos on your site? Save time and increase efficiency by only posting your photos to Instagram and automatically displaying them on your website
33
+ * **Display Your Content Your Way** - Customize your Instagram feeds to look exactly the way you want, so that they blend seemlessly into your site or pop out at your visitors!
34
+ * **Keep Your Site Looking Fresh** - Automatically push your new Instagram content straight to your site to keep it looking fresh and keeping your audience engaged.
35
+ * **Super simple to set up** - Once installed, you can be displaying your Instagram photos within 30 seconds! No confusing steps or Instagram Developer account needed.
36
 
37
  = Featured Review =
38
+ "**Simple and concise** - Excellent plugin. Simple and non-bloated. I had a couple small issues with the plugin when I first started using it, but a quick comment on the support forums got a new version pushed out the next day with the fix.
39
+
40
+ Awesome support!" - [Josh Jones](https://wordpress.org/support/topic/simple-and-concise-3 'Simple and concise Instagram plugin')
41
 
42
  = Feedback or Support =
43
  We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
44
 
45
+ For a pop-up photo **lightbox**, to display posts by **hashtag**, show photo **captions**, **video** support + more, check out the [Pro version](http://smashballoon.com/instagram-feed/ 'Instagram Feed Pro').
46
 
47
  == Installation ==
48
 
49
  1. Install the Instagram plugin either via the WordPress plugin directory, or by uploading the files to your web server (in the `/wp-content/plugins/` directory).
50
  2. Activate the plugin through the 'Plugins' menu in WordPress.
51
+ 3. Navigate to the 'Instagram Feed' settings page to obtain your Instagram Access Token and User ID and configure your settings.
52
  4. Use the shortcode `[instagram-feed]` in your page, post or widget to display your photos.
53
+ 5. You can display multiple Instagram feeds by using shortcode options, for example: `[instagram-feed num=6 cols=3]`
54
+
55
+ For simple step-by-step directions on how to set up the Instagram Feed plugin please refer to our [setup guide](http://smashballoon.com/instagram-feed/free/ 'Instagram Feed setup guide').
56
 
57
  = Shortcode Options =
58
+ * **General Options**
59
  * **id** - An Instagram User ID - Example: `[instagram-feed id=1234567]`
60
  * **width** - The width of your feed. Any number - Example: `[instagram-feed width=50]`
61
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
62
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
63
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
64
+ * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
65
+ *
66
+ * **Photo Options**
67
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
68
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
69
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
70
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
71
  * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
72
+ *
73
+ * **Header Options**
74
+ * **showheader** - Whether to show the feed Header. 'true' or 'false' - Example: `[instagram-feed showheader=false]`
75
+ * **headercolor** - The color of the Header text. Any hex color code - Example: `[instagram-feed headercolor=#333]`
76
+ *
77
+ * **'Load More' Button Options**
78
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
79
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
80
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
81
  * **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
82
+ *
83
+ * **'Follow on Instagram' Button Options**
84
+ * **showfollow** - Whether to show the 'Follow on Instagram' button. 'true' or 'false' - Example: `[instagram-feed showfollow=true]`
85
+ * **followcolor** - The background color of the button. Any hex color code - Example: `[instagram-feed followcolor=#ff0000]`
86
+ * **followtextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed followtextcolor=#fff]`
87
+ * **followtext** - The text used for the button - Example: `[instagram-feed followtext="Follow me"]`
88
 
89
+ For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/ 'Instagram Feed Pro').
90
 
91
  == Frequently Asked Questions ==
92
 
93
  = Can I display multiple Instagram feeds on my site or on the same page? =
94
 
95
+ Yep. You can display multiple Instagram feeds by using our built-in shortcode options, for example: `[instagram-feed id="12986477" cols=3]`.
96
+
97
+ = Can I display photos from more than one Instagram account in one single feed? =
98
+
99
+ Yep. You can just separate the IDs by commas, either in the User ID(s) field on the plugin's Settings page, or directly in the shortcode like so: `[instagram-feed id="12986477,13460080"]`.
100
 
101
  = How do I find my Instagram Access Token and User ID =
102
 
103
+ We've made it super easy. Simply click on the big blue button on the Instagram Feed Settings page and log into your Instagram account. The plugin will then retrieve and display both your Access Token and User ID from Instagram.
104
 
105
  You can also display photos from other peoples Instagram accounts. To find their Instagram User ID you can use [this tool](http://jelled.com/instagram/lookup-user-id).
106
 
108
 
109
  Nope. The Access Token used in the plugin is a "read only" token, which means that it could never be used maliciously to manipulate your Instagram account.
110
 
111
+ = My Instagram feed isn't displaying. Why not!? =
112
 
113
+ There are a few common reasons for this:
114
 
115
+ * Your Instagram account may be set to private. Instagram doesn't allow photos from private Instagram accounts to be displayed publicly.
116
+ * Your Access Token may not be valid. Try clicking on the blue Instagram login button on the plugin's Settings page again and copy and paste the Instagram token it gives you into the plugin's Access Token field.
117
+ * Your User ID may not be valid. Be sure you're not using your Instagram username instead of your User ID. You can find your Instagram User ID by using [this tool](http://jelled.com/instagram/lookup-user-id).
118
+ * Your website may contain a JavaScript error which is preventing JavaScript from running. The plugin uses JavaScript to load the Instagram photos into your page and so needs JavaScript to be running in order to work. You would need to remove any existing JavaScript errors on your website for the plugin to be able to load in your feed.
119
 
120
+ If you're still having an issue displaying your feed then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum') with a link to the page where you're trying to display the Instagram feed and, if possible, a link to your Instagram account.
121
 
122
+ = Can I view the full-size photos or play Instagram videos directly on my website? =
123
 
124
+ This is a feature of the [Pro version](http://smashballoon.com/instagram-feed/ 'Instagram Feed Pro') of the plugin, which allows you to view the photos in a pop-up lightbox, support videos, display captions, display photos by hashtag + more!
125
 
126
  = How do I embed my Instagram Feed directly into a WordPress page template? =
127
 
131
 
132
  The below options are available on the Instagram Feed Settings page but can also be used directly in the `[instagram-feed]` shortcode to customize individual Instagram feeds on a feed-by-feed basis.
133
 
134
+ * **General Options**
135
  * **id** - An Instagram User ID - Example: `[instagram-feed id=1234567]`
136
  * **width** - The width of your feed. Any number - Example: `[instagram-feed width=50]`
137
  * **widthunit** - The unit of the width. 'px' or '%' - Example: `[instagram-feed widthunit=%]`
138
  * **height** - The height of your feed. Any number - Example: `[instagram-feed height=250]`
139
  * **heightunit** - The unit of the height. 'px' or '%' - Example: `[instagram-feed heightunit=px]`
140
+ * **background** - The background color of the feed. Any hex color code - Example: `[instagram-feed background=#ffff00]`
141
+ *
142
+ * **Photo Options**
143
  * **sortby** - Sort the posts by Newest to Oldest (none) or Random (random) - Example: `[instagram-feed sortby=random]`
144
  * **num** - The number of photos to display initially. Maximum is 33 - Example: `[instagram-feed num=10]`
145
  * **cols** - The number of columns in your feed. 1 - 10 - Example: `[instagram-feed cols=5]`
146
  * **imagepadding** - The spacing around your photos - Example: `[instagram-feed imagepadding=10]`
147
  * **imagepaddingunit** - The unit of the padding. 'px' or '%' - Example: `[instagram-feed imagepaddingunit=px]`
148
+ *
149
+ * **Header Options**
150
+ * **showheader** - Whether to show the feed Header. 'true' or 'false' - Example: `[instagram-feed showheader=false]`
151
+ * **headercolor** - The color of the Header text. Any hex color code - Example: `[instagram-feed headercolor=#333]`
152
+ *
153
+ * **'Load More' Button Options**
154
  * **showbutton** - Whether to show the 'Load More' button. 'true' or 'false' - Example: `[instagram-feed showbutton='false']`
155
  * **buttoncolor** - The background color of the button. Any hex color code - Example: `[instagram-feed buttoncolor=#000]`
156
  * **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
157
  * **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
158
+ *
159
+ * **'Follow on Instagram' Button Options**
160
+ * **showfollow** - Whether to show the 'Follow on Instagram' button. 'true' or 'false' - Example: `[instagram-feed showfollow=true]`
161
+ * **followcolor** - The background color of the button. Any hex color code - Example: `[instagram-feed followcolor=#ff0000]`
162
+ * **followtextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed followtextcolor=#fff]`
163
+ * **followtext** - The text used for the button - Example: `[instagram-feed followtext="Follow me"]`
164
 
165
+ For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/ 'Instagram Feed Pro').
166
 
167
  == Screenshots ==
168
 
169
+ 1. Default plugin styling
170
+ 2. Your Instagram Feed is completely customizable
171
+ 3. Display multiple Instagram feeds from any non-private Instagram account
172
+ 4. Your Instagram feeds are completely responsive and look great on any device
173
+ 5. Display your Instagram photos in multiple columns, with or without a scrollbar
174
+ 6. Just copy and paste the shortcode into any page, post or widget on your site
175
+ 7. The Instagram Feed plugin Settings pages
176
 
177
  == Changelog ==
178
+ = 1.3 =
179
+ * New: You can now display photos from multiple Instagram User IDs. Simply separate your IDs by commas.
180
+ * New: Added an optional header to the feed which contains your Instagram profile picture, username and bio. You can activate this on the Customize page.
181
+ * New: The plugin now includes an 'Auto-detect' option for the Image Resolution setting which will automatically set the correct image resolution based on the size of your feed.
182
+ * New: Added an optional 'Follow on Instagram' button which can be displayed at the bottom of your feed. You can activate this on the Customize page.
183
+ * New: Added the ability to use your own custom text for the 'Load More' button
184
+ * New: Added a loader icon to indicate that the photos are loading
185
+ * New: Added a unique ID to each Instagram photo so that they can be targeted individually via CSS
186
+ * Tweak: Added a subtle fade effect to the photos when hovering over them
187
+ * Tweak: Improved the responsive layout behavior of the feed
188
+ * Tweak: Improved the documentation within the plugin settings pages
189
+ * Tweak: Included a link to [step-by-step setup directions](http//:smashballoon.com/instagram-feed/free/ 'Instagram feed setup directions') for the plugin
190
+ * Fix: Fixed an issue with the feed not clearing other widgets correctly
191
+
192
+ = 1.2.3 =
193
+ * Fix: Replaced the 'on' function with the 'click' function to increase compatibility with themes using older versions of jQuery
194
+
195
  = 1.2.2 =
196
  * Tweak: Added an initialize function to the plugin
197
  * Fix: Fixed an occasional issue with the 'Sort Photos By' option being undefined
206
  * New: Added an option to display your Instagram photos in random order
207
  * New: A new tabbed layout has been implemented on the plugin's settings pages
208
  * New: Added an option to preserve your settings when uninstalling the plugin
209
+ * New: Added a [Pro version](http://smashballoon.com/instagram-feed/ '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
210
  * Tweak: The 'Load More' button now automatically hides if there are no more photos to load
211
  * Tweak: Added a small gap to the top of the 'Load More' button
212
  * Tweak: Added a icon to the Instagram Feed menu item
css/sb-instagram.css CHANGED
@@ -4,7 +4,6 @@
4
 
5
  /* Feed container */
6
  #sb_instagram {
7
- float: left;
8
  width: 100%;
9
  margin: 0 auto;
10
  padding: 0;
@@ -73,6 +72,12 @@
73
  #sb_instagram .sbi_photo{
74
  display: block;
75
  }
 
 
 
 
 
 
76
  #sb_instagram img{
77
  display: block;
78
  padding: 0 !important;
@@ -118,29 +123,121 @@
118
  display: block;
119
  }
120
 
121
- /* Button */
122
- #sb_instagram #sbi_load{
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  display: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  float: left;
125
  clear: both;
126
  width: 100%;
127
  text-align: center;
128
  }
129
- #sb_instagram #sbi_load a{
 
130
  display: -moz-inline-stack;
131
  display: inline-block;
132
  vertical-align: top;
133
  zoom: 1;
134
  *display: inline;
135
 
136
- padding: 4px 14px;
137
- margin: 0 auto;
138
  background: #333;
139
  color: #eee;
140
  border: none;
141
  color: #fff;
142
  text-decoration: none;
143
  font-size: 13px;
 
144
 
145
  -moz-border-radius: 4px;
146
  -webkit-border-radius: 4px;
@@ -150,12 +247,61 @@
150
  -moz-box-sizing: border-box;
151
  box-sizing: border-box;
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,
@@ -164,6 +310,6 @@
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
  }
4
 
5
  /* Feed container */
6
  #sb_instagram {
 
7
  width: 100%;
8
  margin: 0 auto;
9
  padding: 0;
72
  #sb_instagram .sbi_photo{
73
  display: block;
74
  }
75
+ #sb_instagram a,
76
+ #sb_instagram a:hover,
77
+ #sb_instagram a:focus,
78
+ #sb_instagram a:active{
79
+ outline: none;
80
+ }
81
  #sb_instagram img{
82
  display: block;
83
  padding: 0 !important;
123
  display: block;
124
  }
125
 
126
+ /* Loader */
127
+ #sb_instagram .sbi_loader{
128
+ position: relative;
129
+ left: 50%;
130
+ width: 16px;
131
+ height: 16px;
132
+ margin: 10px 0 10px -8px;
133
+ background: url('../img/loader.png') no-repeat;
134
+ }
135
+
136
+ /* HEADER */
137
+ #sb_instagram .sb_instagram_header{
138
+ float: left;
139
+ clear: both;
140
+ margin: 0 0 15px 0;
141
+ padding: 0;
142
+ line-height: 1.2;
143
+ width: 100%;
144
+ }
145
+ #sb_instagram .sb_instagram_header a{
146
+ float: left;
147
+ display: block;
148
+ /*width: 100%;*/
149
+ min-width: 100%\9;
150
+ }
151
+ /* Header profile pic */
152
+ #sb_instagram .sbi_header_img{
153
+ float: left;
154
+ position: relative;
155
+ width: 50px;
156
+ margin: 0 0 0 -100% !important;
157
+ overflow: hidden;
158
+
159
+ -moz-border-radius: 40px;
160
+ -webkit-border-radius: 40px;
161
+ border-radius: 40px;
162
+ }
163
+ #sb_instagram .sbi_header_img img{
164
+ float: left;
165
+ margin: 0 !important;
166
+ padding: 0 !important;
167
+ border: none !important;
168
+ }
169
+ /* Profile pic hover */
170
+ #sb_instagram .sbi_header_img_hover{
171
  display: none;
172
+ position: absolute;
173
+ width: 100%;
174
+ top: 0;
175
+ bottom: 0;
176
+ left: 0;
177
+ text-align: center;
178
+ color: #fff;
179
+ background: rgba(0,0,0,0.75);
180
+ }
181
+ #sb_instagram .sbi_header_img_hover .fa{
182
+ position: absolute;
183
+ top: 50%;
184
+ margin-top: -10px;
185
+ margin-left: -8px;
186
+ font-size: 20px;
187
+ }
188
+ /* Header text */
189
+ #sb_instagram .sbi_header_text{
190
+ float: left;
191
+ width: 100%;
192
+ padding-top: 2px;
193
+ }
194
+ #sb_instagram .sb_instagram_header a{
195
+ text-decoration: none;
196
+ }
197
+ #sb_instagram .sbi_header_text *{
198
+ float: left;
199
+ clear: both;
200
+ width: auto;
201
+ margin: 0 0 0 60px !important;
202
+ padding: 0 !important;
203
+ }
204
+ #sb_instagram .sb_instagram_header h3{
205
+ font-size: 16px;
206
+ margin-bottom: -5px !important;
207
+ }
208
+ #sb_instagram .sb_instagram_header p{
209
+ font-size: 13px;
210
+ line-height: 1.3;
211
+ }
212
+ #sb_instagram .sb_instagram_header h3.sbi_no_bio{
213
+ padding-top: 9px !important;
214
+ }
215
+
216
+
217
+ /* Buttons */
218
+ #sb_instagram #sbi_load{
219
  float: left;
220
  clear: both;
221
  width: 100%;
222
  text-align: center;
223
  }
224
+ #sb_instagram #sbi_load .sbi_load_btn,
225
+ #sb_instagram .sbi_follow_btn a{
226
  display: -moz-inline-stack;
227
  display: inline-block;
228
  vertical-align: top;
229
  zoom: 1;
230
  *display: inline;
231
 
232
+ padding: 7px 14px;
233
+ margin: 5px auto 0 auto;
234
  background: #333;
235
  color: #eee;
236
  border: none;
237
  color: #fff;
238
  text-decoration: none;
239
  font-size: 13px;
240
+ line-height: 1.5;
241
 
242
  -moz-border-radius: 4px;
243
  -webkit-border-radius: 4px;
247
  -moz-box-sizing: border-box;
248
  box-sizing: border-box;
249
  }
250
+ /* Follow button */
251
+ #sb_instagram .sbi_follow_btn{
252
+ display: -moz-inline-stack;
253
+ display: inline-block;
254
+ vertical-align: top;
255
+ zoom: 1;
256
+ *display: inline;
257
+ text-align: center;
258
+ }
259
+ #sb_instagram .sbi_follow_btn.sbi_top{
260
+ display: block;
261
+ margin-bottom: 5px;
262
  }
263
+ #sb_instagram .sbi_follow_btn a{
264
+ background: #517fa4;
265
+ color: #fff;
266
+ }
267
+ #sb_instagram .sbi_follow_btn a:hover,
268
+ #sb_instagram .sbi_follow_btn a:focus,
269
+ #sb_instagram #sbi_load .sbi_load_btn:hover,
270
+ #sb_instagram #sbi_load .sbi_load_btn:focus{
271
+ filter: alpha(opacity=85);
272
+ opacity: 0.85;
273
+ }
274
+ #sb_instagram #sbi_load .fa,
275
+ #sb_instagram .sbi_follow_btn .fa{
276
+ margin-bottom: -1px;
277
+ margin-right: 7px;
278
+ font-size: 15px;
279
+ }
280
+ #sb_instagram #sbi_load .sbi_follow_btn{
281
+ margin-left: 5px;
282
+ }
283
+
284
+
285
 
286
  /* Media queries */
287
+ @media all and (max-width: 640px){
288
+ /* Make 3-6 cols into 2 col */
289
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
290
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
291
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
292
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
293
+ width: 50%;
294
+ }
295
+ /* Make 7-10 cols into 4 col */
296
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
297
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
298
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
299
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
300
+ width: 25%;
301
+ }
302
+ }
303
  @media all and (max-width: 480px){
304
+ /* Make all cols into 1 col */
305
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
306
  #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
307
  #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
310
  #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
311
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
312
  #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
313
+ width: 100%;
314
  }
315
  }
img/instagram-pro-promo.png CHANGED
Binary file
img/loader.png ADDED
Binary file
instagram-feed-admin.php CHANGED
@@ -36,7 +36,7 @@ function sb_instagram_settings_page() {
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',
@@ -44,7 +44,16 @@ function sb_instagram_settings_page() {
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' => ''
@@ -70,7 +79,16 @@ function sb_instagram_settings_page() {
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' ];
@@ -102,7 +120,16 @@ function sb_instagram_settings_page() {
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' ];
@@ -120,7 +147,16 @@ function sb_instagram_settings_page() {
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;
@@ -159,15 +195,15 @@ function sb_instagram_settings_page() {
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">
166
  <th scope="row"><label><?php _e('Access Token'); ?></label></th>
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='http://smashballoon.com/instagram-feed/token/' target='_blank'>this page</a>."); ?></p>
171
  </td>
172
  </tr>
173
 
@@ -179,19 +215,21 @@ function sb_instagram_settings_page() {
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 type="text" 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="http://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>
@@ -213,6 +251,7 @@ function sb_instagram_settings_page() {
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 ?>
@@ -278,8 +317,7 @@ function sb_instagram_settings_page() {
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="http://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">
@@ -287,6 +325,8 @@ function sb_instagram_settings_page() {
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">
@@ -313,11 +353,15 @@ function sb_instagram_settings_page() {
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">
@@ -330,11 +374,45 @@ function sb_instagram_settings_page() {
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">
@@ -357,23 +435,58 @@ function sb_instagram_settings_page() {
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="http://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="http://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="http://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>
@@ -409,12 +522,14 @@ function sb_instagram_settings_page() {
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>
@@ -422,6 +537,11 @@ function sb_instagram_settings_page() {
422
 
423
  <p><?php _e("If you'd like to display multiple feeds then you can set different settings directly in the shortcode like so:"); ?>
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>
@@ -442,13 +562,13 @@ function sb_instagram_settings_page() {
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>
@@ -496,7 +616,7 @@ function sb_instagram_settings_page() {
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>
@@ -509,6 +629,28 @@ function sb_instagram_settings_page() {
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>
@@ -526,8 +668,35 @@ function sb_instagram_settings_page() {
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>
@@ -566,26 +735,16 @@ function sb_instagram_settings_page() {
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="http://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
 
@@ -594,14 +753,14 @@ function sb_instagram_settings_page() {
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' );
598
  wp_enqueue_style( 'sb_instagram_admin_css' );
599
  wp_enqueue_style( 'wp-color-picker' );
600
  }
601
  add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_style' );
602
 
603
  function sb_instagram_admin_scripts() {
604
- wp_enqueue_script( 'sb_instagram_admin_js', plugin_dir_url( __FILE__ ) . 'js/sb-instagram-admin.js' );
605
  if( !wp_script_is('jquery-ui-draggable') ) {
606
  wp_enqueue_script(
607
  array(
@@ -620,5 +779,16 @@ function sb_instagram_admin_scripts() {
620
  }
621
  add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_scripts' );
622
 
 
 
 
 
 
 
 
 
 
 
 
623
 
624
  ?>
36
  'sb_instagram_height' => '',
37
  'sb_instagram_num' => '20',
38
  'sb_instagram_height_unit' => '',
39
+ 'sb_instagram_cols' => '4',
40
  'sb_instagram_image_padding' => '5',
41
  'sb_instagram_image_padding_unit' => 'px',
42
  'sb_instagram_sort' => 'none',
44
  'sb_instagram_show_btn' => true,
45
  'sb_instagram_btn_background' => '',
46
  'sb_instagram_btn_text_color' => '',
47
+ 'sb_instagram_btn_text' => 'Load More...',
48
+ 'sb_instagram_image_res' => 'auto',
49
+ //Header
50
+ 'sb_instagram_show_header' => false,
51
+ 'sb_instagram_header_color' => '',
52
+ //Follow button
53
+ 'sb_instagram_show_follow_btn' => false,
54
+ 'sb_instagram_folow_btn_background' => '',
55
+ 'sb_instagram_follow_btn_text_color' => '',
56
+ 'sb_instagram_follow_btn_text' => 'Follow on Instagram',
57
  //Misc
58
  'sb_instagram_custom_css' => '',
59
  'sb_instagram_custom_js' => ''
79
  $sb_instagram_show_btn = $options[ 'sb_instagram_show_btn' ];
80
  $sb_instagram_btn_background = $options[ 'sb_instagram_btn_background' ];
81
  $sb_instagram_btn_text_color = $options[ 'sb_instagram_btn_text_color' ];
82
+ $sb_instagram_btn_text = $options[ 'sb_instagram_btn_text' ];
83
  $sb_instagram_image_res = $options[ 'sb_instagram_image_res' ];
84
+ //Header
85
+ $sb_instagram_show_header = $options[ 'sb_instagram_show_header' ];
86
+ $sb_instagram_header_color = $options[ 'sb_instagram_header_color' ];
87
+ //Follow button
88
+ $sb_instagram_show_follow_btn = $options[ 'sb_instagram_show_follow_btn' ];
89
+ $sb_instagram_folow_btn_background = $options[ 'sb_instagram_folow_btn_background' ];
90
+ $sb_instagram_follow_btn_text_color = $options[ 'sb_instagram_follow_btn_text_color' ];
91
+ $sb_instagram_follow_btn_text = $options[ 'sb_instagram_follow_btn_text' ];
92
  //Misc
93
  $sb_instagram_custom_css = $options[ 'sb_instagram_custom_css' ];
94
  $sb_instagram_custom_js = $options[ 'sb_instagram_custom_js' ];
120
  isset($_POST[ 'sb_instagram_show_btn' ]) ? $sb_instagram_show_btn = $_POST[ 'sb_instagram_show_btn' ] : $sb_instagram_show_btn = '';
121
  $sb_instagram_btn_background = $_POST[ 'sb_instagram_btn_background' ];
122
  $sb_instagram_btn_text_color = $_POST[ 'sb_instagram_btn_text_color' ];
123
+ $sb_instagram_btn_text = $_POST[ 'sb_instagram_btn_text' ];
124
  $sb_instagram_image_res = $_POST[ 'sb_instagram_image_res' ];
125
+ //Header
126
+ isset($_POST[ 'sb_instagram_show_header' ]) ? $sb_instagram_show_header = $_POST[ 'sb_instagram_show_header' ] : $sb_instagram_show_header = '';
127
+ $sb_instagram_header_color = $_POST[ 'sb_instagram_header_color' ];
128
+ //Follow button
129
+ isset($_POST[ 'sb_instagram_show_follow_btn' ]) ? $sb_instagram_show_follow_btn = $_POST[ 'sb_instagram_show_follow_btn' ] : $sb_instagram_show_follow_btn = '';
130
+ $sb_instagram_folow_btn_background = $_POST[ 'sb_instagram_folow_btn_background' ];
131
+ $sb_instagram_follow_btn_text_color = $_POST[ 'sb_instagram_follow_btn_text_color' ];
132
+ $sb_instagram_follow_btn_text = $_POST[ 'sb_instagram_follow_btn_text' ];
133
  //Misc
134
  $sb_instagram_custom_css = $_POST[ 'sb_instagram_custom_css' ];
135
  $sb_instagram_custom_js = $_POST[ 'sb_instagram_custom_js' ];
147
  $options[ 'sb_instagram_show_btn' ] = $sb_instagram_show_btn;
148
  $options[ 'sb_instagram_btn_background' ] = $sb_instagram_btn_background;
149
  $options[ 'sb_instagram_btn_text_color' ] = $sb_instagram_btn_text_color;
150
+ $options[ 'sb_instagram_btn_text' ] = $sb_instagram_btn_text;
151
  $options[ 'sb_instagram_image_res' ] = $sb_instagram_image_res;
152
+ //Header
153
+ $options[ 'sb_instagram_show_header' ] = $sb_instagram_show_header;
154
+ $options[ 'sb_instagram_header_color' ] = $sb_instagram_header_color;
155
+ //Follow button
156
+ $options[ 'sb_instagram_show_follow_btn' ] = $sb_instagram_show_follow_btn;
157
+ $options[ 'sb_instagram_folow_btn_background' ] = $sb_instagram_folow_btn_background;
158
+ $options[ 'sb_instagram_follow_btn_text_color' ] = $sb_instagram_follow_btn_text_color;
159
+ $options[ 'sb_instagram_follow_btn_text' ] = $sb_instagram_follow_btn_text;
160
  //Misc
161
  $options[ 'sb_instagram_custom_css' ] = $sb_instagram_custom_css;
162
  $options[ 'sb_instagram_custom_js' ] = $sb_instagram_custom_js;
195
  <h3><?php _e('Configure'); ?></h3>
196
 
197
  <div id="sbi_config">
198
+ <a href="https://instagram.com/oauth/authorize/?client_id=97584dabe06548f99b54d318f8db509d&redirect_uri=https://smashballoon.com/instagram-feed/instagram-token-plugin/?return_uri=<?php echo admin_url('admin.php?page=sb-instagram-feed'); ?>&response_type=token" class="sbi_admin_btn"><?php _e('Log in and get my Access Token and User ID'); ?></a>
199
  </div>
200
 
201
  <tr valign="top">
202
  <th scope="row"><label><?php _e('Access Token'); ?></label></th>
203
  <td>
204
+ <input name="sb_instagram_at" id="sb_instagram_at" type="text" value="<?php esc_attr_e( $sb_instagram_at ); ?>" size="60" placeholder="Click button above to get your Access Token" />
205
  &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
206
+ <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>
207
  </td>
208
  </tr>
209
 
215
  <span>
216
  <?php $sb_instagram_type = 'user'; ?>
217
  <input type="radio" name="sb_instagram_type" id="sb_instagram_type_user" value="user" <?php if($sb_instagram_type == "user") echo "checked"; ?> />
218
+ <label class="sbi_radio_label" for="sb_instagram_type_user">User ID(s):</label>
219
  <input name="sb_instagram_user_id" id="sb_instagram_user_id" type="text" value="<?php esc_attr_e( $sb_instagram_user_id ); ?>" size="25" />
220
  &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What is this?"); ?></a>
221
+ <p class="sbi_tooltip"><?php _e("These are the IDs of the Instagram accounts you want to display photos from. To get your ID simply click on the button above and log into Instagram.<br /><br />You can also display photos from other peoples Instagram accounts. To find their User ID you can use <a href='http://jelled.com/instagram/lookup-user-id' target='_blank'>this tool</a>. You can separate multiple IDs using commas."); ?></p><br />
222
  </span>
223
 
224
  <span class="sbi_pro">
225
  <input disabled type="radio" name="sb_instagram_type" id="sb_instagram_type_hashtag" value="hashtag" <?php if($sb_instagram_type == "hashtag") echo "checked"; ?> />
226
  <label class="sbi_radio_label" for="sb_instagram_type_hashtag">Hashtag:</label>
227
  <input readonly type="text" size="25" />
228
+ &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>
229
  <p class="sbi_tooltip"><?php _e("Display posts from a specific hashtag instead of from a user"); ?></p>
230
  </span>
231
+ <br />
232
+ <span class="sbi_note" style="margin: 10px 0 0 0; display: block;"><?php _e('Separate multiple IDs or hashtags using commas'); ?></span>
233
 
234
  </td>
235
  </tr>
251
 
252
  <p><?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=customize">Customize your Feed</a>'); ?></p>
253
 
254
+ <p><?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>'); ?></p>
255
 
256
 
257
  <?php } // End Configure tab ?>
317
  <tr valign="top" class="sbi_pro">
318
  <th scope="row"><label><?php _e("Enable Pop-up Lightbox"); ?></label></th>
319
  <td>
320
+ <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>
 
321
  </td>
322
  </tr>
323
  <tr valign="top">
325
  <td>
326
  <input name="sb_instagram_num" type="text" value="<?php esc_attr_e( $sb_instagram_num ); ?>" size="4" />
327
  <span class="sbi_note"><?php _e('Number of photos to show initially. Maximum of 33.'); ?></span>
328
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("Using multiple IDs or hashtags?"); ?></a>
329
+ <p class="sbi_tooltip"><?php _e("If you're displaying photos from multiple User IDs or hashtags then this is the number of photos which will be displayed from each."); ?></p>
330
  </td>
331
  </tr>
332
  <tr valign="top">
353
  <td>
354
 
355
  <select name="sb_instagram_image_res">
356
+ <option value="auto" <?php if($sb_instagram_image_res == "auto") echo 'selected="selected"' ?> ><?php _e('Auto-detect (recommended)'); ?></option>
 
357
  <option value="thumb" <?php if($sb_instagram_image_res == "thumb") echo 'selected="selected"' ?> ><?php _e('Thumbnail (150x150)'); ?></option>
358
+ <option value="medium" <?php if($sb_instagram_image_res == "medium") echo 'selected="selected"' ?> ><?php _e('Medium (306x306)'); ?></option>
359
+ <option value="full" <?php if($sb_instagram_image_res == "full") echo 'selected="selected"' ?> ><?php _e('Full size (640x640)'); ?></option>
360
  </select>
361
 
362
+ &nbsp;<a class="sbi_tooltip_link" href="JavaScript:void(0);"><?php _e("What does Auto-detect mean?"); ?></a>
363
+ <p class="sbi_tooltip"><?php _e("Auto-detect means that the plugin automatically sets the image resolution based on the size of your feed."); ?></p>
364
+
365
  </td>
366
  </tr>
367
  <tr valign="top">
374
  </select>
375
  </td>
376
  </tr>
377
+
378
+ <tr valign="top" class="sbi_pro">
379
+ <th scope="row"><label><?php _e('Hide Photos'); ?></label></th>
380
+ <td>
381
+ <span class="sbi_note"><a href="https://smashballoon.com/instagram-feed/" target="_blank"><?php _e('Upgrade to Pro to enable this feature.'); ?></a></span>
382
+ </td>
383
+ </tr>
384
  </tbody>
385
  </table>
386
 
387
  <?php submit_button(); ?>
388
 
389
+ <hr />
390
+ <h3><?php _e("Header"); ?></h3>
391
+ <table class="form-table">
392
+ <tbody>
393
+ <tr valign="top">
394
+ <th scope="row"><label><?php _e("Show the Header"); ?></label></th>
395
+ <td>
396
+ <input type="checkbox" name="sb_instagram_show_header" id="sb_instagram_show_header" <?php if($sb_instagram_show_header == true) echo 'checked="checked"' ?> />
397
+ </td>
398
+ </tr>
399
+ <tr valign="top">
400
+ <th scope="row"><label><?php _e('Header Text Color'); ?></label></th>
401
+ <td>
402
+ <input name="sb_instagram_header_color" type="text" value="<?php esc_attr_e( $sb_instagram_header_color ); ?>" class="sbi_colorpick" />
403
+ </td>
404
+ </tr>
405
+ </tbody>
406
+ </table>
407
+
408
+ <hr />
409
+ <h3><?php _e("Caption"); ?></h3>
410
+ <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Photo Captions</a></p>
411
+
412
+ <hr />
413
+ <h3><?php _e("Likes &amp; Comments"); ?></h3>
414
+ <p style="padding-bottom: 18px;"><a href="https://smashballoon.com/instagram-feed/" target="_blank">Upgrade to Pro to enable Likes &amp; Comments</a></p>
415
+
416
  <hr />
417
  <h3><?php _e("'Load More' Button"); ?></h3>
418
  <table class="form-table">
435
  <input name="sb_instagram_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text_color ); ?>" class="sbi_colorpick" />
436
  </td>
437
  </tr>
438
+ <tr valign="top">
439
+ <th scope="row"><label><?php _e('Button Text'); ?></label></th>
440
+ <td>
441
+ <input name="sb_instagram_btn_text" type="text" value="<?php esc_attr_e( $sb_instagram_btn_text ); ?>" size="20" />
442
+ </td>
443
+ </tr>
444
  </tbody>
445
  </table>
446
 
447
+ <?php submit_button(); ?>
 
 
448
 
449
  <hr />
450
+ <h3><?php _e("'Follow on Instagram' Button"); ?></h3>
451
+ <table class="form-table">
452
+ <tbody>
453
+ <tr valign="top">
454
+ <th scope="row"><label><?php _e("Show the Follow button"); ?></label></th>
455
+ <td>
456
+ <input type="checkbox" name="sb_instagram_show_follow_btn" id="sb_instagram_show_follow_btn" <?php if($sb_instagram_show_follow_btn == true) echo 'checked="checked"' ?> />
457
+ </td>
458
+ </tr>
459
 
460
+ <!-- <tr valign="top">
461
+ <th scope="row"><label><?php _e("Button Position"); ?></label></th>
462
+ <td>
463
+ <select name="sb_instagram_follow_btn_position">
464
+ <option value="top" <?php if($sb_instagram_follow_btn_position == "top") echo 'selected="selected"' ?> ><?php _e('Top'); ?></option>
465
+ <option value="bottom" <?php if($sb_instagram_follow_btn_position == "bottom") echo 'selected="selected"' ?> ><?php _e('Bottom'); ?></option>
466
+ </select>
467
+ </td>
468
+ </tr> -->
469
 
470
+ <tr valign="top">
471
+ <th scope="row"><label><?php _e('Button Background Color'); ?></label></th>
472
+ <td>
473
+ <input name="sb_instagram_folow_btn_background" type="text" value="<?php esc_attr_e( $sb_instagram_folow_btn_background ); ?>" class="sbi_colorpick" />
474
+ </td>
475
+ </tr>
476
+ <tr valign="top">
477
+ <th scope="row"><label><?php _e('Button Text Color'); ?></label></th>
478
+ <td>
479
+ <input name="sb_instagram_follow_btn_text_color" type="text" value="<?php esc_attr_e( $sb_instagram_follow_btn_text_color ); ?>" class="sbi_colorpick" />
480
+ </td>
481
+ </tr>
482
+ <tr valign="top">
483
+ <th scope="row"><label><?php _e('Button Text'); ?></label></th>
484
+ <td>
485
+ <input name="sb_instagram_follow_btn_text" type="text" value="<?php esc_attr_e( $sb_instagram_follow_btn_text ); ?>" size="30" />
486
+ </td>
487
+ </tr>
488
+ </tbody>
489
+ </table>
490
 
491
  <hr />
492
  <h3><?php _e('Misc'); ?></h3>
522
 
523
  <p><?php _e('Next Step: <a href="?page=sb-instagram-feed&tab=display">Display your Feed</a>'); ?></p>
524
 
525
+ <p><?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>'); ?></p>
526
+
527
 
528
  <?php } //End Customize tab ?>
529
 
530
 
531
 
532
+ <?php if( $sbi_active_tab == 'display' ) { //Start Display tab ?>
533
 
534
  <h3><?php _e('Display your Feed'); ?></h3>
535
  <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>
537
 
538
  <p><?php _e("If you'd like to display multiple feeds then you can set different settings directly in the shortcode like so:"); ?>
539
  <code>[instagram-feed num=9 cols=3]</code></p>
540
+ <p>You can display as many different feeds as you like, on either the same page or on different pages, by just using the shortcode options below. For example:<br />
541
+ <code>[instagram-feed]</code><br />
542
+ <code>[instagram-feed id="12986477"]</code><br />
543
+ <code>[instagram-feed id="12986477,13460080" num=4 cols=4 showfollow=false]</code>
544
+ </p>
545
  <p><?php _e("See the table below for a full list of available shortcode options:"); ?></p>
546
 
547
  <p><span class="sbi_table_key"></span><?php _e('Pro version only'); ?></p>
562
  </tr>
563
  <tr>
564
  <td>id</td>
565
+ <td><?php _e('An Instagram User ID. Separate multiple IDs by commas.'); ?></td>
566
+ <td><code>[instagram-feed id="1234567"]</code></td>
567
  </tr>
568
  <tr class="sbi_pro">
569
  <td>hashtag</td>
570
+ <td><?php _e('Any hashtag. Separate multiple IDs by commas.'); ?></td>
571
+ <td><code>[instagram-feed hashtag="#awesome"]</code></td>
572
  </tr>
573
 
574
  <tr class="sbi_table_header"><td colspan=3><?php _e("Customize Options"); ?></td></tr>
616
  </tr>
617
  <tr>
618
  <td>imageres</td>
619
+ <td><?php _e("The resolution/size of the photos. 'auto', full', 'medium' or 'thumb'."); ?></td>
620
  <td><code>[instagram-feed imageres=full]</code></td>
621
  </tr>
622
  <tr>
629
  <td><?php _e("The unit of the padding. 'px' or '%'"); ?></td>
630
  <td><code>[instagram-feed imagepaddingunit=px]</code></td>
631
  </tr>
632
+ <tr class="sbi_pro">
633
+ <td>hovercolor</td>
634
+ <td><?php _e("The background color when hovering over a photo. Any hex color code."); ?></td>
635
+ <td><code>[instagram-feed hovercolor=#ff0000]</code></td>
636
+ </tr>
637
+ <tr class="sbi_pro">
638
+ <td>hovertextcolor</td>
639
+ <td><?php _e("The text/icon color when hovering over a photo. Any hex color code."); ?></td>
640
+ <td><code>[instagram-feed hovertextcolor=#fff]</code></td>
641
+ </tr>
642
+
643
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Header Options"); ?></td></tr>
644
+ <tr>
645
+ <td>showheader</td>
646
+ <td><?php _e("Whether to show the feed Header. 'true' or 'false'."); ?></td>
647
+ <td><code>[instagram-feed showheader=false]</code></td>
648
+ </tr>
649
+ <tr>
650
+ <td>headercolor</td>
651
+ <td><?php _e("The color of the Header text. Any hex color code."); ?></td>
652
+ <td><code>[instagram-feed headercolor=#333]</code></td>
653
+ </tr>
654
 
655
  <tr class="sbi_table_header"><td colspan=3><?php _e("'Load More' Button Options"); ?></td></tr>
656
  <tr>
668
  <td><?php _e("The text color of the button. Any hex color code."); ?></td>
669
  <td><code>[instagram-feed buttontextcolor=#fff]</code></td>
670
  </tr>
671
+ <tr>
672
+ <td>buttontext</td>
673
+ <td><?php _e("The text used for the button."); ?></td>
674
+ <td><code>[instagram-feed buttontext="Load More Photos"]</code></td>
675
+ </tr>
676
 
677
+ <tr class="sbi_table_header"><td colspan=3><?php _e("'Follow on Instagram' Button Options"); ?></td></tr>
678
+ <tr>
679
+ <td>showfollow</td>
680
+ <td><?php _e("Whether to show the 'Follow on Instagram' button. 'true' or 'false'."); ?></td>
681
+ <td><code>[instagram-feed showfollow=true]</code></td>
682
+ </tr>
683
+ <tr>
684
+ <td>followcolor</td>
685
+ <td><?php _e("The background color of the button. Any hex color code."); ?></td>
686
+ <td><code>[instagram-feed followcolor=#ff0000]</code></td>
687
+ </tr>
688
+ <tr>
689
+ <td>followtextcolor</td>
690
+ <td><?php _e("The text color of the button. Any hex color code."); ?></td>
691
+ <td><code>[instagram-feed followtextcolor=#fff]</code></td>
692
+ </tr>
693
+ <tr>
694
+ <td>followtext</td>
695
+ <td><?php _e("The text used for the button."); ?></td>
696
+ <td><code>[instagram-feed followtext="Follow me"]</code></td>
697
+ </tr>
698
+
699
+ <tr class="sbi_table_header"><td colspan=3><?php _e("Caption Options"); ?></td></tr>
700
  <tr class="sbi_pro">
701
  <td>showcaption</td>
702
  <td><?php _e("Whether to show the photo caption. 'true' or 'false'."); ?></td>
735
  <td><code>[instagram-feed likessize=14]</code></td>
736
  </tr>
737
 
 
 
 
 
 
 
 
 
 
 
 
 
738
  </tbody>
739
  </table>
740
 
741
+ <p><?php _e('Need help setting up the plugin? Check out our <a href="http://smashballoon.com/instagram-feed/free/" target="_blank">setup directions</a>'); ?></p>
742
+
743
  <?php } //End Display tab ?>
744
 
745
  <hr />
746
 
747
+ <a href="https://smashballoon.com/instagram-feed/demo" target="_blank" style="display: block; margin: 20px 0 0 0; float: left; clear: both;">
748
  <img src="<?php echo plugins_url( 'img/instagram-pro-promo.png' , __FILE__ ) ?>" alt="Instagram Feed Pro">
749
  </a>
750
 
753
  <?php } //End Settings page
754
 
755
  function sb_instagram_admin_style() {
756
+ wp_register_style( 'sb_instagram_admin_css', plugin_dir_url( __FILE__ ) . 'css/sb-instagram-admin.css?2', false, '1.0.0' );
757
  wp_enqueue_style( 'sb_instagram_admin_css' );
758
  wp_enqueue_style( 'wp-color-picker' );
759
  }
760
  add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_style' );
761
 
762
  function sb_instagram_admin_scripts() {
763
+ wp_enqueue_script( 'sb_instagram_admin_js', plugin_dir_url( __FILE__ ) . 'js/sb-instagram-admin.js?2' );
764
  if( !wp_script_is('jquery-ui-draggable') ) {
765
  wp_enqueue_script(
766
  array(
779
  }
780
  add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_scripts' );
781
 
782
+ // Add a Settings link to the plugin on the Plugins page
783
+ $sbi_plugin_file = 'instagram-feed/instagram-feed.php';
784
+ add_filter( "plugin_action_links_{$sbi_plugin_file}", 'sbi_add_settings_link', 10, 2 );
785
+
786
+ //modify the link by unshifting the array
787
+ function sbi_add_settings_link( $links, $file ) {
788
+ $sbi_settings_link = '<a href="' . admin_url( 'admin.php?page=sb-instagram-feed' ) . '">' . __( 'Settings', 'sb-instagram-feed' ) . '</a>';
789
+ array_unshift( $links, $sbi_settings_link );
790
+
791
+ return $links;
792
+ }
793
 
794
  ?>
instagram-feed.php CHANGED
@@ -2,8 +2,8 @@
2
  /*
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.2
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
@@ -51,7 +51,14 @@ function display_instagram($atts, $content = null) {
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
 
@@ -80,37 +87,72 @@ function display_instagram($atts, $content = null) {
80
  if ( !empty($sb_instagram_image_padding) ) $sb_instagram_styles .= 'padding-bottom: ' . (2*intval($sb_instagram_image_padding)).$sb_instagram_image_padding_unit . '; ';
81
  $sb_instagram_styles .= '"';
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
 
 
 
 
 
 
 
89
  $sb_instagram_button_styles = 'style="';
90
- if ( !empty($sb_instagram_btn_background) ) $sb_instagram_button_styles .= 'background: '.$sb_instagram_btn_background.'; ';
91
- if ( !empty($sb_instagram_btn_text_color) ) $sb_instagram_button_styles .= 'color: '.$sb_instagram_btn_text_color.';';
92
  $sb_instagram_button_styles .= '"';
93
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
 
95
  /******************* CONTENT ********************/
96
 
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( 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,7 +168,7 @@ add_filter('widget_text', 'do_shortcode');
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?3', __FILE__) );
130
  wp_enqueue_style( 'sb_instagram_styles' );
131
  }
132
 
@@ -134,7 +176,7 @@ function sb_instagram_styles_enqueue() {
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?5' , __FILE__ ), array('jquery'), '1.8', true );
138
 
139
  //Options to pass to JS file
140
  $sb_instagram_settings = get_option('sb_instagram_settings');
@@ -165,6 +207,7 @@ function sb_instagram_custom_css() {
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() {
2
  /*
3
  Plugin Name: Instagram Feed
4
  Plugin URI: http://smashballoon.com/instagram-feed
5
+ Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
+ Version: 1.3
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
51
  'showbutton' => $options[ 'sb_instagram_show_btn' ],
52
  'buttoncolor' => $options[ 'sb_instagram_btn_background' ],
53
  'buttontextcolor' => $options[ 'sb_instagram_btn_text_color' ],
54
+ 'buttontext' => $options[ 'sb_instagram_btn_text' ],
55
  'imageres' => $options[ 'sb_instagram_image_res' ],
56
+ 'showfollow' => $options[ 'sb_instagram_show_follow_btn' ],
57
+ 'followcolor' => $options[ 'sb_instagram_folow_btn_background' ],
58
+ 'followtextcolor' => $options[ 'sb_instagram_follow_btn_text_color' ],
59
+ 'followtext' => $options[ 'sb_instagram_follow_btn_text' ],
60
+ 'showheader' => $options[ 'sb_instagram_show_header' ],
61
+ 'headercolor' => $options[ 'sb_instagram_header_color' ]
62
  ), $atts);
63
 
64
 
87
  if ( !empty($sb_instagram_image_padding) ) $sb_instagram_styles .= 'padding-bottom: ' . (2*intval($sb_instagram_image_padding)).$sb_instagram_image_padding_unit . '; ';
88
  $sb_instagram_styles .= '"';
89
 
90
+ //Header
91
+ $sb_instagram_show_header = $atts['showheader'];
92
+ if($sb_instagram_show_header == 'false') $sb_instagram_show_header = false;
93
+ $sb_instagram_header_color = str_replace('#', '', $atts['headercolor']);
 
94
 
95
+ //Load more button
96
+ $sb_instagram_show_btn = $atts['showbutton'];
97
+ if($sb_instagram_show_btn == 'false') $sb_instagram_show_btn = false;
98
+ $sb_instagram_btn_background = str_replace('#', '', $atts['buttoncolor']);
99
+ $sb_instagram_btn_text_color = str_replace('#', '', $atts['buttontextcolor']);
100
+ //Load more button styles
101
  $sb_instagram_button_styles = 'style="';
102
+ if ( !empty($sb_instagram_btn_background) ) $sb_instagram_button_styles .= 'background: #'.$sb_instagram_btn_background.'; ';
103
+ if ( !empty($sb_instagram_btn_text_color) ) $sb_instagram_button_styles .= 'color: #'.$sb_instagram_btn_text_color.';';
104
  $sb_instagram_button_styles .= '"';
105
 
106
+ //Follow button vars
107
+ $sb_instagram_show_follow_btn = $atts['showfollow'];
108
+ if($sb_instagram_show_follow_btn == 'false') $sb_instagram_show_follow_btn = false;
109
+ $sb_instagram_follow_btn_background = str_replace('#', '', $atts['followcolor']);
110
+ $sb_instagram_follow_btn_text_color = str_replace('#', '', $atts['followtextcolor']);
111
+ $sb_instagram_follow_btn_text = $atts['followtext'];
112
+ //Follow button styles
113
+ $sb_instagram_follow_btn_styles = 'style="';
114
+ if ( !empty($sb_instagram_follow_btn_background) ) $sb_instagram_follow_btn_styles .= 'background: #'.$sb_instagram_follow_btn_background.'; ';
115
+ if ( !empty($sb_instagram_follow_btn_text_color) ) $sb_instagram_follow_btn_styles .= 'color: #'.$sb_instagram_follow_btn_text_color.';';
116
+ $sb_instagram_follow_btn_styles .= '"';
117
+ //Follow button HTML
118
+ $sb_instagram_follow_btn_html = '<div class="sbi_follow_btn"><a href="http://instagram.com/" '.$sb_instagram_follow_btn_styles.' target="_blank"><i class="fa fa-instagram"></i>'.$sb_instagram_follow_btn_text.'</a></div>';
119
+
120
 
121
  /******************* CONTENT ********************/
122
 
123
  $sb_instagram_content = '<div id="sb_instagram" class="sbi ';
124
  if ( !empty($sb_instagram_height) ) $sb_instagram_content .= 'sbi_fixed_height ';
125
  $sb_instagram_content .= 'sbi_col_' . trim($sb_instagram_cols);
126
+ $sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '" data-cols="' . trim($sb_instagram_cols) . '" data-options=\'{&quot;sortby&quot;: &quot;'.$atts['sortby'].'&quot;, &quot;headercolor&quot;: &quot;'.$sb_instagram_header_color.'&quot;}\'>';
127
+
128
+ //Header
129
+ if( $sb_instagram_show_header ) $sb_instagram_content .= '<div class="sb_instagram_header" style="padding: '.(2*intval($sb_instagram_image_padding)) . $sb_instagram_image_padding_unit .'; padding-bottom: 0;"></div>';
130
 
131
+ //Images container
132
  $sb_instagram_content .= '<div id="sbi_images" style="padding: '.$sb_instagram_image_padding . $sb_instagram_image_padding_unit .';">';
133
 
134
+ //Loader
135
+ $sb_instagram_content .= '<div class="sbi_loader fa-spin"></div>';
136
+
137
  //Error messages
138
+ if( empty($sb_instagram_user_id) || !isset($sb_instagram_user_id) ) $sb_instagram_content .= '<p>Please enter a User ID on the Instagram Feed plugin Settings page</p>';
139
 
140
  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>';
141
 
142
+ //Load section
143
  $sb_instagram_content .= '</div><div id="sbi_load"';
144
  if($sb_instagram_image_padding == 0 || !isset($sb_instagram_image_padding)) $sb_instagram_content .= ' style="padding-top: 5px"';
145
  $sb_instagram_content .= '>';
146
+
147
+ //Load More button
148
+ if( $sb_instagram_show_btn ) $sb_instagram_content .= '<a class="sbi_load_btn" href="javascript:void(0);" '.$sb_instagram_button_styles.'>'.$atts['buttontext'].'</a>';
149
+
150
+ //Follow button
151
+ if( $sb_instagram_show_follow_btn ) $sb_instagram_content .= $sb_instagram_follow_btn_html;
152
+
153
+ $sb_instagram_content .= '</div>'; //End #sbi_load
154
+
155
+ $sb_instagram_content .= '</div>'; //End #sb_instagram
156
 
157
  //Return our feed HTML to display
158
  return $sb_instagram_content;
168
  //Enqueue stylesheet
169
  add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
170
  function sb_instagram_styles_enqueue() {
171
+ wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.css?5', __FILE__) );
172
  wp_enqueue_style( 'sb_instagram_styles' );
173
  }
174
 
176
  add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
177
  function sb_instagram_scripts_enqueue() {
178
  //Register the script to make it available
179
+ wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.js?7' , __FILE__ ), array('jquery'), '1.8', true );
180
 
181
  //Options to pass to JS file
182
  $sb_instagram_settings = get_option('sb_instagram_settings');
207
  if( !empty($sb_instagram_custom_css) ) echo "\r\n";
208
  }
209
 
210
+
211
  //Custom JS
212
  add_action( 'wp_footer', 'sb_instagram_custom_js' );
213
  function sb_instagram_custom_js() {
js/sb-instagram.js CHANGED
@@ -15,16 +15,38 @@
15
 
16
  var $self = $(this),
17
  $target = $self.find('#sbi_images'),
18
- $loadBtn = $self.find("#sbi_load"),
19
  imgRes = 'standard_resolution',
 
 
20
  //Convert styles JSON string to an object
21
  feedOptions = JSON.parse( this.getAttribute('data-options') ),
22
  getType = 'user',
23
- sortby = 'none';
 
 
 
 
24
 
25
  if( feedOptions.sortby !== '' ) sortby = feedOptions.sortby;
26
 
27
  switch( this.getAttribute('data-res') ) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  case 'thumb':
29
  imgRes = 'thumbnail';
30
  break;
@@ -35,42 +57,124 @@
35
  imgRes = 'standard_resolution';
36
  }
37
 
38
- var userFeed = new instagramfeed({
39
- target: $target,
40
- get: getType,
41
- sortBy: sortby,
42
- resolution: imgRes,
43
- limit: parseInt( this.getAttribute('data-num') ),
44
- 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>',
45
- userId: parseInt( this.getAttribute('data-id') ),
46
- accessToken: sb_instagram_js_options.sb_instagram_at,
47
- after: function() {
48
- if (this.hasNext()) {
49
- $loadBtn.show();
50
- } else {
51
- $loadBtn.hide();
52
- $self.css('padding-bottom', 0);
53
- }
54
- },
55
- success: function(){
56
-
57
- //Run 10ms after the feed is returned
58
- var sbiFeedLoaded = setInterval(function () {
59
-
60
- //Run custom JS
61
- if (typeof sbi_custom_js == 'function') sbi_custom_js();
62
-
63
- clearInterval(sbiFeedLoaded);
64
- }, 10);
65
-
66
- }
67
- });
68
-
69
- $loadBtn.find('a').on("click", function() {
70
- userFeed.next();
71
- });
72
-
73
- userFeed.run();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
 
75
 
76
  });
15
 
16
  var $self = $(this),
17
  $target = $self.find('#sbi_images'),
18
+ $loadBtn = $self.find("#sbi_load .sbi_load_btn"),
19
  imgRes = 'standard_resolution',
20
+ cols = parseInt( this.getAttribute('data-cols') ),
21
+ num = this.getAttribute('data-num'),
22
  //Convert styles JSON string to an object
23
  feedOptions = JSON.parse( this.getAttribute('data-options') ),
24
  getType = 'user',
25
+ sortby = 'none',
26
+ user_id = this.getAttribute('data-id'),
27
+ num = this.getAttribute('data-num'),
28
+ posts_arr = [],
29
+ $header = '';
30
 
31
  if( feedOptions.sortby !== '' ) sortby = feedOptions.sortby;
32
 
33
  switch( this.getAttribute('data-res') ) {
34
+ case 'auto':
35
+ var feedWidth = $('#sb_instagram').innerWidth(),
36
+ colWidth = $('#sb_instagram').innerWidth() / cols;
37
+
38
+ if( feedWidth < 680 ) colWidth = 300; //Use 306x306 images
39
+ if( feedWidth < 480 && feedWidth > 300 ) colWidth = 480; //Use full size images
40
+
41
+ if( colWidth < 150 ){
42
+ imgRes = 'thumbnail';
43
+ } else if( colWidth < 306 ){
44
+ imgRes = 'low_resolution';
45
+ } else {
46
+ imgRes = 'standard_resolution';
47
+ }
48
+
49
+ break;
50
  case 'thumb':
51
  imgRes = 'thumbnail';
52
  break;
57
  imgRes = 'standard_resolution';
58
  }
59
 
60
+ //Split comma separated hashtags into array
61
+ var ids_arr = user_id.replace(/ /g,'').split(",");
62
+ var looparray = ids_arr;
63
+
64
+ //Get page info for first User ID
65
+ var headerStyles = '',
66
+ sbi_page_url = 'https://api.instagram.com/v1/users/' + ids_arr[0] + '?access_token=' + sb_instagram_js_options.sb_instagram_at;
67
+
68
+ if(feedOptions.headercolor.length) headerStyles = 'style="color: #'+feedOptions.headercolor+'"';
69
+
70
+ $.ajax({
71
+ method: "GET",
72
+ url: sbi_page_url,
73
+ dataType: "jsonp",
74
+ success: function(data) {
75
+ $header = '<a href="http://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link" '+headerStyles+'>';
76
+ $header += '<div class="sbi_header_text">';
77
+ $header += '<h3'
78
+ if( data.data.bio.length == 0 ) $header += ' class="sbi_no_bio"';
79
+ $header += '>@'+data.data.username+'</h3>';
80
+ if( data.data.bio.length ) $header += '<p class="sbi_bio">'+data.data.bio+'</p>';
81
+ $header += '</div>';
82
+ $header += '<div class="sbi_header_img">';
83
+ $header += '<div class="sbi_header_img_hover"><i class="fa fa-instagram"></i></div>';
84
+ $header += '<img src="'+data.data.profile_picture+'" alt="'+data.data.full_name+'" width="50" height="50">';
85
+ $header += '</div>';
86
+ $header += '</a>';
87
+ //Add the header
88
+ $self.find('.sb_instagram_header').prepend( $header );
89
+ //Change the URL of the follow button
90
+ if( $self.find('.sbi_follow_btn').length ) $self.find('.sbi_follow_btn a').attr('href', 'http://instagram.com/' + data.data.username )
91
+ }
92
+ });
93
+
94
+ //Loop through User IDs
95
+ looparray.forEach(function(entry) {
96
+
97
+ var userFeed = new instagramfeed({
98
+ target: $target,
99
+ get: getType,
100
+ sortBy: sortby,
101
+ resolution: imgRes,
102
+ limit: parseInt( num ),
103
+ template: '<div class="sbi_item sbi_type_{{model.type}} sbi_new" id="sbi_{{id}}" data-date="{{model.created_time_raw}}"><div class="sbi_photo_wrap"><a class="sbi_photo" href="{{link}}" target="_blank"><img src="{{image}}" alt="{{image}}" /></a></div></div>',
104
+ filter: function(image) {
105
+ //Create time for sorting
106
+ var date = new Date(image.created_time*1000),
107
+ time = date.getTime();
108
+ image.created_time_raw = time;
109
+
110
+ return true;
111
+ },
112
+ userId: parseInt( entry ),
113
+ accessToken: sb_instagram_js_options.sb_instagram_at,
114
+ after: function() {
115
+
116
+ $self.find('.sbi_loader').remove();
117
+
118
+ /* Load more button */
119
+ if (this.hasNext()) {
120
+ $loadBtn.show();
121
+ } else {
122
+ $loadBtn.hide();
123
+ $self.css('padding-bottom', 0);
124
+ }
125
+
126
+ // Call Custom JS if it exists
127
+ if (typeof sbi_custom_js == 'function') sbi_custom_js();
128
+
129
+ //Fade photos on hover
130
+ $('#sb_instagram .sbi_photo').each(function(){
131
+ $(this).hover(function(){
132
+ $(this).fadeTo(200, 0.85);
133
+ }, function(){
134
+ $(this).stop().fadeTo(500, 1);
135
+ });
136
+ });
137
+
138
+
139
+ //Sort posts by date
140
+ //only sort the new posts that are loaded in, not the whole feed, otherwise some photos will switch positions due to dates
141
+ $self.find('#sbi_images .sbi_item.sbi_new').sort(function (a, b) {
142
+ var aComp = $(a).attr("data-date"),
143
+ bComp = $(b).attr("data-date");
144
+
145
+ if(sortby == 'none'){
146
+ //Order by date
147
+ return bComp - aComp;
148
+ } else {
149
+ //Randomize
150
+ return (Math.round(Math.random())-0.5);
151
+ }
152
+
153
+ }).appendTo( $self.find("#sbi_images") );
154
+
155
+ //Remove the new class after 500ms, once the sorting is done
156
+ setTimeout(function(){
157
+ $('#sbi_images .sbi_item.sbi_new').removeClass('sbi_new');
158
+ }, 500);
159
+
160
+ //Header profile pic hover
161
+ $self.find('.sb_instagram_header a').hover(function(){
162
+ $self.find('.sb_instagram_header .sbi_header_img_hover').fadeIn(200);
163
+ }, function(){
164
+ $self.find('.sb_instagram_header .sbi_header_img_hover').stop().fadeOut(600);
165
+ });
166
+
167
+
168
+ } // End 'after' function
169
+ });
170
+
171
+ $loadBtn.click(function() {
172
+ userFeed.next();
173
+ });
174
+
175
+ userFeed.run();
176
+
177
+ }); //End User ID array loop
178
 
179
 
180
  });