Instagram Feed - Version 1.3.3

Version Description

  • Fix: Fixed an issue with the 'Load more' button not always showing when displaying Instagram photos from multiple User IDs
  • Fix: Moved the initiating sbi_init function outside of the jQuery ready function so that it can be called externally if needed by Ajax powered themes/plugins
Download this release

Release Info

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

Code changes from version 1.3.2 to 1.3.3

Files changed (3) hide show
  1. README.txt +5 -1
  2. instagram-feed.php +1 -1
  3. js/sb-instagram.js +178 -175
README.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: smashballoon
3
  Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
  Requires at least: 3.0
5
  Tested up to: 4.1
6
- Stable tag: 1.3.2
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -179,6 +179,10 @@ For more shortcode options, check out the [Pro version](http://smashballoon.com/
179
  7. The Instagram Feed plugin Settings pages
180
 
181
  == Changelog ==
 
 
 
 
182
  = 1.3.2 =
183
  * New: Added an option to disable the mobile layout
184
  * New: Added an setting which allows you to use the plugin with an Ajax powered theme
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.1
6
+ Stable tag: 1.3.3
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
179
  7. The Instagram Feed plugin Settings pages
180
 
181
  == Changelog ==
182
+ = 1.3.3 =
183
+ * Fix: Fixed an issue with the 'Load more' button not always showing when displaying Instagram photos from multiple User IDs
184
+ * Fix: Moved the initiating sbi_init function outside of the jQuery ready function so that it can be called externally if needed by Ajax powered themes/plugins
185
+
186
  = 1.3.2 =
187
  * New: Added an option to disable the mobile layout
188
  * New: Added an setting which allows you to use the plugin with an Ajax powered theme
instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
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.2
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
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.3
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
js/sb-instagram.js CHANGED
@@ -9,196 +9,199 @@
9
  if(!Function.prototype.bind){Function.prototype.bind=function(e){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var t=Array.prototype.slice.call(arguments,1),n=this,r=function(){},i=function(){return n.apply(this instanceof r&&e?this:e,t.concat(Array.prototype.slice.call(arguments)))};r.prototype=this.prototype;i.prototype=new r;return i}}
10
 
11
 
12
- function sbi_init(){
13
-
14
- $('#sb_instagram.sbi').each(function(){
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;
53
- case 'medium':
54
- imgRes = 'low_resolution';
55
- break;
56
- default:
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
- for (var i = 0, len = looparray.length; i < len; i++) {
97
- var entry = looparray[i];
98
-
99
- var userFeed = new instagramfeed({
100
- target: $target,
101
- get: getType,
102
- sortBy: sortby,
103
- resolution: imgRes,
104
- limit: parseInt( num ),
105
- 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>',
106
- filter: function(image) {
107
- //Create time for sorting
108
- var date = new Date(image.created_time*1000),
109
- time = date.getTime();
110
- image.created_time_raw = time;
111
-
112
- return true;
113
- },
114
- userId: parseInt( entry ),
115
- accessToken: sb_instagram_js_options.sb_instagram_at,
116
- after: function() {
117
-
118
- $self.find('.sbi_loader').remove();
119
-
120
- /* Load more button */
121
- if (this.hasNext()) {
122
- $loadBtn.show();
123
- } else {
124
- $loadBtn.hide();
125
- $self.css('padding-bottom', 0);
126
- }
127
-
128
- // Call Custom JS if it exists
129
- if (typeof sbi_custom_js == 'function') sbi_custom_js();
130
-
131
- //Fade photos on hover
132
- $('#sb_instagram .sbi_photo').each(function(){
133
- $(this).hover(function(){
134
- $(this).fadeTo(200, 0.85);
135
- }, function(){
136
- $(this).stop().fadeTo(500, 1);
137
- });
138
- });
139
-
140
-
141
- //Sort posts by date
142
- //only sort the new posts that are loaded in, not the whole feed, otherwise some photos will switch positions due to dates
143
- $self.find('#sbi_images .sbi_item.sbi_new').sort(function (a, b) {
144
- var aComp = $(a).attr("data-date"),
145
- bComp = $(b).attr("data-date");
146
-
147
- if(sortby == 'none'){
148
- //Order by date
149
- return bComp - aComp;
150
- } else {
151
- //Randomize
152
- return (Math.round(Math.random())-0.5);
153
- }
154
-
155
- }).appendTo( $self.find("#sbi_images") );
156
-
157
- //Remove the new class after 500ms, once the sorting is done
158
- setTimeout(function(){
159
- $('#sbi_images .sbi_item.sbi_new').removeClass('sbi_new');
160
- }, 500);
161
-
162
- //Header profile pic hover
163
- $self.find('.sb_instagram_header a').hover(function(){
164
- $self.find('.sb_instagram_header .sbi_header_img_hover').fadeIn(200);
165
  }, function(){
166
- $self.find('.sb_instagram_header .sbi_header_img_hover').stop().fadeOut(600);
167
  });
 
168
 
169
 
170
- }, // End 'after' function
171
- error: function(data) {
172
- var sbiErrorMsg = '',
173
- sbiErrorDir = '';
 
174
 
175
- if( data.indexOf('access_token') > -1 ){
176
- sbiErrorMsg += '<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';
177
- sbiErrorDir = "<p>There's an issue with the Instagram Access Token that you are using. Please obtain a new Access Token on the plugin's Settings page.";
178
- } else if( data.indexOf('user does not exist') > -1 ){
179
- sbiErrorMsg += '<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';
180
- sbiErrorDir = "<p>Please double check the Instagram User ID that you are using. To find your User ID simply enter your Instagram user name into this <a href='http://www.otzberg.net/iguserid/' target='_blank'>tool</a>.</p>";
181
  }
182
 
183
- //Add the error message to the page unless the user is displaying multiple ids or hashtags
184
- if(looparray.length < 2) $('#sb_instagram').empty().append( '<p style="text-align: center;">Unable to show Instagram photos</p><div id="sbi_mod_error">' + sbiErrorMsg + sbiErrorDir + '</div>');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  }
186
- });
187
-
188
- $loadBtn.click(function() {
189
- userFeed.next();
190
- });
191
 
192
- userFeed.run();
193
-
194
- } //End User ID array loop
 
195
 
196
-
197
- });
 
198
 
199
- }
200
- sbi_init();
201
 
 
202
 
 
 
203
 
204
- })(jQuery);
 
9
  if(!Function.prototype.bind){Function.prototype.bind=function(e){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var t=Array.prototype.slice.call(arguments,1),n=this,r=function(){},i=function(){return n.apply(this instanceof r&&e?this:e,t.concat(Array.prototype.slice.call(arguments)))};r.prototype=this.prototype;i.prototype=new r;return i}}
10
 
11
 
12
+ })(jQuery);
13
+
14
+
15
+ function sbi_init(){
16
+
17
+ jQuery('#sb_instagram.sbi').each(function(){
18
+
19
+ var $self = jQuery(this),
20
+ $target = $self.find('#sbi_images'),
21
+ $loadBtn = $self.find("#sbi_load .sbi_load_btn"),
22
+ imgRes = 'standard_resolution',
23
+ cols = parseInt( this.getAttribute('data-cols') ),
24
+ num = this.getAttribute('data-num'),
25
+ //Convert styles JSON string to an object
26
+ feedOptions = JSON.parse( this.getAttribute('data-options') ),
27
+ getType = 'user',
28
+ sortby = 'none',
29
+ user_id = this.getAttribute('data-id'),
30
+ num = this.getAttribute('data-num'),
31
+ posts_arr = [],
32
+ $header = '',
33
+ morePosts = []; //Used to determine whether to show the Load More button when displaying posts from more than one id/hashtag. If one of the ids/hashtags has more posts then still show button.
34
+
35
+ if( feedOptions.sortby !== '' ) sortby = feedOptions.sortby;
36
+
37
+ switch( this.getAttribute('data-res') ) {
38
+ case 'auto':
39
+ var feedWidth = jQuery('#sb_instagram').innerWidth(),
40
+ colWidth = jQuery('#sb_instagram').innerWidth() / cols;
41
+
42
+ if( feedWidth < 680 ) colWidth = 300; //Use 306x306 images
43
+ if( feedWidth < 480 && feedWidth > 300 ) colWidth = 480; //Use full size images
44
+
45
+ if( colWidth < 150 ){
46
+ imgRes = 'thumbnail';
47
+ } else if( colWidth < 306 ){
48
+ imgRes = 'low_resolution';
49
+ } else {
50
+ imgRes = 'standard_resolution';
51
+ }
52
+
53
+ break;
54
+ case 'thumb':
55
+ imgRes = 'thumbnail';
56
+ break;
57
+ case 'medium':
58
+ imgRes = 'low_resolution';
59
+ break;
60
+ default:
61
+ imgRes = 'standard_resolution';
62
+ }
63
+
64
+ //Split comma separated hashtags into array
65
+ var ids_arr = user_id.replace(/ /g,'').split(",");
66
+ var looparray = ids_arr;
67
+
68
+ //Get page info for first User ID
69
+ var headerStyles = '',
70
+ sbi_page_url = 'https://api.instagram.com/v1/users/' + ids_arr[0] + '?access_token=' + sb_instagram_js_options.sb_instagram_at;
71
+
72
+ if(feedOptions.headercolor.length) headerStyles = 'style="color: #'+feedOptions.headercolor+'"';
73
+
74
+ jQuery.ajax({
75
+ method: "GET",
76
+ url: sbi_page_url,
77
+ dataType: "jsonp",
78
+ success: function(data) {
79
+ $header = '<a href="http://instagram.com/'+data.data.username+'" target="_blank" title="@'+data.data.username+'" class="sbi_header_link" '+headerStyles+'>';
80
+ $header += '<div class="sbi_header_text">';
81
+ $header += '<h3'
82
+ if( data.data.bio.length == 0 ) $header += ' class="sbi_no_bio"';
83
+ $header += '>@'+data.data.username+'</h3>';
84
+ if( data.data.bio.length ) $header += '<p class="sbi_bio">'+data.data.bio+'</p>';
85
+ $header += '</div>';
86
+ $header += '<div class="sbi_header_img">';
87
+ $header += '<div class="sbi_header_img_hover"><i class="fa fa-instagram"></i></div>';
88
+ $header += '<img src="'+data.data.profile_picture+'" alt="'+data.data.full_name+'" width="50" height="50">';
89
+ $header += '</div>';
90
+ $header += '</a>';
91
+ //Add the header
92
+ $self.find('.sb_instagram_header').prepend( $header );
93
+ //Change the URL of the follow button
94
+ if( $self.find('.sbi_follow_btn').length ) $self.find('.sbi_follow_btn a').attr('href', 'http://instagram.com/' + data.data.username )
95
+ }
96
+ });
97
+
98
+ //Loop through User IDs
99
+ // looparray.forEach(function(entry) {
100
+ jQuery.each( looparray, function( index, entry ) {
101
+
102
+ var userFeed = new instagramfeed({
103
+ target: $target,
104
+ get: getType,
105
+ sortBy: sortby,
106
+ resolution: imgRes,
107
+ limit: parseInt( num ),
108
+ 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>',
109
+ filter: function(image) {
110
+ //Create time for sorting
111
+ var date = new Date(image.created_time*1000),
112
+ time = date.getTime();
113
+ image.created_time_raw = time;
114
+
115
+ return true;
116
+ },
117
+ userId: parseInt( entry ),
118
+ accessToken: sb_instagram_js_options.sb_instagram_at,
119
+ after: function() {
120
+
121
+ $self.find('.sbi_loader').remove();
122
+
123
+ /* Load more button */
124
+ if (this.hasNext()) morePosts.push('1');
125
+
126
+ if(morePosts.length > 0){
127
+ $loadBtn.show();
128
  } else {
129
+ $loadBtn.hide();
130
+ $self.css('padding-bottom', 0);
131
  }
132
 
133
+ // Call Custom JS if it exists
134
+ if (typeof sbi_custom_js == 'function') sbi_custom_js();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
 
136
+ //Fade photos on hover
137
+ jQuery('#sb_instagram .sbi_photo').each(function(){
138
+ jQuery(this).hover(function(){
139
+ jQuery(this).fadeTo(200, 0.85);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  }, function(){
141
+ jQuery(this).stop().fadeTo(500, 1);
142
  });
143
+ });
144
 
145
 
146
+ //Sort posts by date
147
+ //only sort the new posts that are loaded in, not the whole feed, otherwise some photos will switch positions due to dates
148
+ $self.find('#sbi_images .sbi_item.sbi_new').sort(function (a, b) {
149
+ var aComp = jQuery(a).attr("data-date"),
150
+ bComp = jQuery(b).attr("data-date");
151
 
152
+ if(sortby == 'none'){
153
+ //Order by date
154
+ return bComp - aComp;
155
+ } else {
156
+ //Randomize
157
+ return (Math.round(Math.random())-0.5);
158
  }
159
 
160
+ }).appendTo( $self.find("#sbi_images") );
161
+
162
+ //Remove the new class after 500ms, once the sorting is done
163
+ setTimeout(function(){
164
+ jQuery('#sbi_images .sbi_item.sbi_new').removeClass('sbi_new');
165
+ //Reset the morePosts variable so we can check whether there are more posts every time the Load More button is clicked
166
+ morePosts = [];
167
+ }, 500);
168
+
169
+ //Header profile pic hover
170
+ $self.find('.sb_instagram_header a').hover(function(){
171
+ $self.find('.sb_instagram_header .sbi_header_img_hover').fadeIn(200);
172
+ }, function(){
173
+ $self.find('.sb_instagram_header .sbi_header_img_hover').stop().fadeOut(600);
174
+ });
175
+
176
+
177
+ }, // End 'after' function
178
+ error: function(data) {
179
+ var sbiErrorMsg = '',
180
+ sbiErrorDir = '';
181
+
182
+ if( data.indexOf('access_token') > -1 ){
183
+ sbiErrorMsg += '<p><b>Error: Access Token is not valid</b><br /><span>This error message is only visible to WordPress admins</span>';
184
+ sbiErrorDir = "<p>There's an issue with the Instagram Access Token that you are using. Please obtain a new Access Token on the plugin's Settings page.";
185
+ } else if( data.indexOf('user does not exist') > -1 ){
186
+ sbiErrorMsg += '<p><b>Error: The User ID does not exist</b><br /><span>This error is only visible to WordPress admins</span>';
187
+ sbiErrorDir = "<p>Please double check the Instagram User ID that you are using. To find your User ID simply enter your Instagram user name into this <a href='http://www.otzberg.net/iguserid/' target='_blank'>tool</a>.</p>";
188
  }
 
 
 
 
 
189
 
190
+ //Add the error message to the page unless the user is displaying multiple ids or hashtags
191
+ if(looparray.length < 2) jQuery('#sb_instagram').empty().append( '<p style="text-align: center;">Unable to show Instagram photos</p><div id="sbi_mod_error">' + sbiErrorMsg + sbiErrorDir + '</div>');
192
+ }
193
+ });
194
 
195
+ $loadBtn.click(function() {
196
+ userFeed.next();
197
+ });
198
 
199
+ userFeed.run();
 
200
 
201
+ }); //End User ID array loop
202
 
203
+
204
+ });
205
 
206
+ }
207
+ sbi_init();