Below is a list of optional settings you can use to customize your feed.
Name | Setting | Options | Description | Example |
Settings | ||||
Feed Type | type | hashtag or tagged | The type of feed to display (default is user account) | 'type' : 'hashtag', |
User | user | The user name of the account you would like to display in your feed. It must have a related Access Token stored in your config.php file | Official user name found in the first set of characters of your access token | 'user' : 'smashballoon', |
Hashtag | hashtag | #plugins, #cool | The hashtag of the feed you would like to display | 'hashtag' : '#plugins', |
Tagged | tagged | The user name of the account you would like to show a feed of tagged posts from | Official user name found in the first set of characters of your access token | 'tagged' : 'smashballoon', |
Number | num | Any number | Set the total number of posts that will display in the feed that fit your settings | 'num' : '20', |
Columns | cols | Any number | The number of vertical columns in the feed. Set this equal to your “num” setting for a single row | 'cols' : 4, |
Sprite Image File Path | imagefile | complete url | The path to the sbi-sprite.png file. Useful if you are using a cdn or have an alternative path to the sbi-sprite.png file otherwise it’s not required. | 'imagefile' : 'https://drive.google.com/uc?export=view&id=0BxhkGs_1Lmi5Sk9WWTRuUGdqN28', |
Connect.php File Path | path | complete or relative url | The path to the connect.php file. Useful if you would like to keep the connect.php and config.php in a different directory than the instagram-feed folder is using. | 'path' : 'https://my-site.com/path/to/connect.php', |
Header | ||||
Show header | showheader | true (default) false |
Whether or not to show your feed header (avatar, bio, posts and likes counts) | 'showheader' : 'true', |
Header style | headerstyle | circle (default) boxed |
“Boxed” header or a “Circle” avatar style header | 'headerstyle' : 'circle', |
Show followers | showfollowers | true (default) false |
Show the number of followers in the header (user feeds) | 'showfollowers' : 'true', |
Show bio text | showbio | true (default) false |
Whether or not to display bio text in the header (user feeds) | 'showbio' : 'true', |
Header color | headercolor | Color Hex code – # | Background color of the header | 'headercolor' : 'FF0000', |
General Styling | ||||
Feed width | feedwidth | Any number + unit | The width of the feed container (including the unit) | 'feedwidth' : '500px', 'feedwidth' : '50%', |
Feed height | feedheight | Any number + unit | The height of the feed container (including the unit) | 'feedheight' : '500px', |
Background color | bgcolor | Color Hex code – # | The background color of the feed (not including the #) | 'bgcolor' : 'FF0000', |
Image padding | imagepadding | Any number | The padding applied to each image in the feed | 'imagepadding' : '20', |
Image padding | imagepaddingunit | “px” or “%” | The unit of measurement | 'imagepaddingunit' : 'px', |
Disable Mobile Layout | disablemobile | true false (default) |
Disable the responsive layout for small devices (single or double column) | 'disablemobile' : 'true', |
Photos | ||||
Sort Images By | sortby | date (default) random |
Choose random to randomize from the last 33 posts made | 'sortby' : 'random', |
Image Resolution | res | auto (default) thumb medium full |
thumbnail (150×150), medium (306×306), full (640×640) | 'res' : 'full', |
Media type | media | all (default) photos videos |
What media types to display | 'media' : 'videos', |
Caption Links (Shoppable Feeds) | captionlinks | true false (default) |
This will change the link for each post to any url included in the caption for that Instagram post. The lightbox will be disabled. Visit this link to learn how this works. | 'captionlinks' : 'true', |
Photo Hover Style | ||||
Hover Background Color | hovercolor | Color Hex code – # | This will change the background of the element that appears on hover | 'hovercolor' : '3030c0', |
Hover Text Color | hovertextcolor | Color Hex code – # | This will change the color of the text that is revealed on hover | 'hovercolor' : 'ff00ff', |
Hover Information | hoverdisplay | username icon date location caption likes |
This will change what information is shown when hovering over an image | 'hoverdisplay' : 'date,user', |
Carousel | ||||
Enable Carousel | carousel | true false (default) |
Your feed will display as a carousel instead of grid | 'carousel' : 'true', |
Carousel Arrows | carouselarrows | true false (default) |
Your carousel feed will include arrows for navigation on either side of the posts | 'carouselarrows' : 'true', |
Carousel Pagination | carouselpag | true false (default) |
Dots below the feed will be shown to indicate pagination | 'carouselpag' : 'true', |
Carousel Autoplay | carouselautoplay | true false (default) |
Your carousel feed will change automatically but stop when hovered over | 'carouselautoplay' : 'true', |
Interval Time | carouseltime | Any number (milliseconds) | Number of milliseconds the carousel takes to change when carousel autoplay is enabled | 'carouseltime' : '10000', |
All Carousel Options | carousel | Comma separated settings | Settings are in this order – enable carousel, carousel arrows, carousel pagination, carousel autoplay, autoplay interval time |
'carousel' : '[true,true,true,false,5000]', |
Caption and Likes/Comments | ||||
Show Caption | showcaption | true (default) false |
Whether or not to show the caption of the post below the image | 'showcaption' : 'true', |
Caption Length | captionlength | Any number (characters) | Number of characters to include in the caption originally. Remaining text can be revealed on click | 'captionlength' : '75', |
Caption Color | captioncolor | Color Hex code – # | Color of the caption text | 'captioncolor' : '333333', |
Caption Size | captionsize | Number + px | Size of the caption text | 'captionsize' : '11px', |
Show Icons | showlikes | true (default) false |
Whether or not likes and comments icons will be displayed below the image | 'showlikes' : 'true', |
Icon Color | likescolor | Color Hex code – # | Color of the icon text | 'likescolor' : '003333', |
Icon Size | likessize | Number + px | Size of the icon text | 'likessize' : '11px', |
Lightbox Comments | ||||
Show Comments in Lightbox | lightboxcomments | true (default) false |
Whether or not to include comments in the lightbox | 'lightboxcomments' : 'true', |
Number of Comments | numcomments | Any number | The number of latest comments for the post to display | 'numcomments' : '20', |
Buttons | ||||
Show “Load More” Button | showbutton | true (default) false |
Whether or not to show the “Load More” button | 'showbutton' : 'true', |
“Load More” Button Background Color | buttoncolor | Any Hex number – # | Background color of the button | 'buttoncolor' : '0f00ff', |
“Load More” Button Text Color | buttontextcolor | Any Hex number – # | Text color of the button | 'buttontextcolor' : '00ff00', |
“Load More” Button Text | buttontext | Any phrase | Change or translate “Load More” | 'buttontext' : 'Show more', |
Show “Follow” Button | showfollow | true (default) false |
Whether or not to show the “Follow” button | 'showfollow' : 'true', |
“Follow” Button Background Color | followcolor | Any Hex number – # | Background color of the button | 'followcolor' : '343433', |
“Follow” Button Text Color | followtextcolor | Any Hex number – # | Text color of the button | 'followtextcolor' : 'c67ddd', |
“Follow” Button Text | followtext | Any phrase | Change or translate “Follow” | 'followtext' : 'Follow us', |
Moderation | ||||
Excludewords | excludewords | Any word or phrase | Exclude posts that contain these words or phrases. Add “#” for hashtags to exclude | 'excludewords' : '#notCool', |
Includewords | includewords | Any word or phrase | Only include posts that contain these words or phrases. Add “#” for hashtags | 'includewords' : '#motivation', |
Moderation Mode | moderationmode | true false (default) |
Enables moderation mode for the feed. Note: this will be visible to anyone who visits your site while it’s in use. It may be best to create a test page to use it. | 'moderationmode' : 'true', |
Hide specific photos | hidephotos | Any post ID or IDs of individual posts | Block these photos from being shown. Enabling moderation mode can help you collect these ids. | 'hidephotos' : 'sbi_1500937627733638189_10145706', |
Show specific photos (white list) | whitelistids | Any post ID or IDs of individual posts | Only show these posts. Enabling moderation mode can help you collect these ids. | 'whitelistids' : 'sbi_1500937627733638189_10145706', |