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

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
});