Docs    Instagram    Customizations

Add Like and Comment counts to the Instagram lightbox

Version 6.0 and above

Use this snippet to add like & comment counts to the popup lightbox.

First, make sure the Likes & Comments Icons are enabled in your settings, in either of the following locations:

Instagram Feed > All Feeds > (click name or pencil icon to edit feed) > Posts > Hover State > Like/Comment Icons

or at

Instagram Feed > All Feeds > (click name or pencil icon to edit feed) > Posts >  Like and Comments Summary > Enable

Then, add the following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here.

window.sbiLightboxAction = function() {
  var postID = jQuery('#sbi_photo_id').text();
  jQuery('.sbi_lb-details .sbi_meta').remove();
  jQuery('.sbi_lb-details').append( '<div class="sbi_meta">' + jQuery('#'+postID+' .sbi_meta').html() + '</div>' );
};

Also, add the following to the Custom CSS to WordPress Dashboard > Appearance > Customize > Additional CSS (or your prefered CSS location).

.sbi_lightbox .sbi_meta * { color: #333 !important; font-size: 14px; margin-right: 5px; }
.sbi_lightbox .sbi_meta{ float: left; margin: 10px 0 0 0; }
.sbi_lightbox .sbi_meta span { margin-right: 15px; }


Below version 6.0

Use this snippet to add like & comment counts to the popup lightbox.

First, make sure the the Likes & Comments Icons are enabled in your settings, in either of the following locations: Instagram Feed > Customize > Posts > Photo Hover Style > Information to display > Like/Comment Icons, or at Instagram Feed > Customize > Posts > Likes & Comments Icons > Show Icons.

Then, add the following to the plugin’s Custom JavaScript section (Customize > Advanced):

window.sbiLightboxAction = function() {
  var postID = jQuery('#sbi_photo_id').text();
  jQuery('.sbi_lb-details .sbi_meta').remove();
  jQuery('.sbi_lb-details').append( '<div class="sbi_meta">' + jQuery('#'+postID+' .sbi_meta').html() + '</div>' );
};

Also, add the following to the Custom CSS section, which is just above it:

.sbi_lightbox .sbi_meta * { color: #333 !important; font-size: 14px; margin-right: 5px; }
.sbi_lightbox .sbi_meta{ float: left; margin: 10px 0 0 0; }
.sbi_lightbox .sbi_meta span { margin-right: 15px; }

support

Couldn’t find your answer in the docs?

Contact Support