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...