Add a gap between posts in the carousel
$('.sbi_item').each(function(){ if( ! $(this).find('.sb_new').length ) { $(this).find('.sbi_photo_wrap, .sbi_info').wrapAll( "<div class...
Vertically center Instagram caption on hover
Add this to the plugin's Custom JavaScript section (Instagram Feed > Customize > Advanced > Custom JavaScript): $('.sbi_hover_top').each(...
Add Like and Comment counts to the Instagram lightbox
First, make sure the the Likes & Comments Icons are enabled in your settings, in either of the following locations: Instagram Feed > Customi...
Center Follow Button on Top of Feed
JavaScript $('#sb_instagram #sbi_images').prepend( $('.sbi_follow_btn') ); CSS #sbi_images { position: relative; } .sbi_follow_btn { ...
How Can I Show the Original Aspect Ratio?
Using the Masonry Layout (version 3.0 of the pro version and above) As of version 3.0 of the "Pro" plugin you can display images in their origin...
Add "Follow on Instagram" Button to a Hashtag Feed
Add the following to the plugin's "Custom JavaScript" setting, which can be found at: Instagram Feed > Customize > Advanced > Custom JavaS...
Make the Feed Span the Whole Content Area
CSS @media all and (min-width: 640px) { #sbi_images, .sbi_item { padding: 0 !important; } #sb_instagram #sbi_images .sbi_item { width: 1...
How do I add the "verified" checkmark to my feed?
The Instagram API does not offer any information about whether a feed is from a verified account or not so this is something you would need to add ...
Combine two different feed types into a single feed
Using feed type "mixed" (version 3.0 and above) As of version 3.0 of the "Pro" version you can use the shortcode setting type="mixed" to display...
Move the 'Follow on Instagram' button to the top of your feed
You can move the 'Follow on Instagram' button from the bottom of your feed to the top by just adding the following snippet to the plugin's Custom J...
Creating a carousel or slideshow from your Instagram photos
Version 2.0 and above Version 2.0 and above has a carousel/slideshow feature built right into it. Simply use the 'Carousel' settings on the plugin...
Center the header of my Instagram feed
By default the header image and text is aligned to the left. We added a centered header option in version 3.0 of the Pro version which can be found...
How to change the color of the icons when a photo has a like or comment
By default the like and comment icons for each photo will remain the same color whether they are 0 or not. You can add a JavaScript snippet to the ...
Change the number of columns for small screens
CSS /* Media queries */ @media all and (max-width: 640px){ #sb_instagram.sbi_col_3 #sbi_images .sbi_item, #sb_instagram.sbi_col_4 #sbi_imag...
Disable Lightbox but keep the hover effect intact
Javascript: Important! Do not disable the lightbox before adding this code. $('#sb_instagram .sbi_item').each(function(){ $sbi_link_area = $...
Add Lightbox Nav Arrows for Mobile Devices
CSS @media all and (max-width: 640px) { #sbi_lightbox .sbi_lb-prev, #sbi_lightbox .sbi_lb-next, #sbi_lightbox .sbi_lb-nav { display:...
Change the Opacity of the Hover Overlay
#sb_instagram .sbi_item .sbi_link { visibility: hidden; } #sb_instagram .sbi_item:hover .sbi_link { visibility: visible; background: rgb...
Auto-Refresh the Feed Every "x" Seconds
You can create an auto-refreshing feed using an iframe, a special shortcode, and a JavaScript snippet. First, add a shortcode to a page that your v...
Images Grayscale to Color on Hover
CSS #sbi_images .sbi_item { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'>...
Add rounded corners or display photos as circles
To add rounded corners to your photos simply add the following to the plugin's Custom CSS section (Instagram Feed > Customize > Custom CS...
Display the Instagram Feed in a Carousel layout only on mobile devices
In the Pro version of the plugin it is possible to display a regular grid layout on desktop devices but then switch to a carousel layout on smaller...
Use an Image as the Background of the Load More Button
CSS#sb_instagram #sbi_load .sbi_load_btn { background-image: url("http://localhost/demo.local/wp-content/uploads/2013/08/5plantbg.png"); } T...
Hide Posts Based on Number of Likes
Javascript var minimum_likes = 100; jQuery('#sb_instagram .sbi_item').each(function(){ var likes = parseInt(jQuery(this).find('.sbi_likes').te...