Custom Instagram Widget With CSS in FeedWind
Contents
Customizing your Instagram Feed With CSS
Like the Facebook and Google Calendar widgets, you can use CSS to create a custom Instagram widget like any website. The setup screen for our Instagram feed widget allows you to create a variety of specific colors, fonts, and ways to display information, so you can find one that matches your brand design closely. It can also be considered an even more advanced method of customization, where the only catch is that some knowledge of basic CSS is required before you toggle the values.
CSS classes in detail
The following is a listing of relevant CSS classes for you to use as reference as you experiment with your custom Instagram CSS file:
Implementation instructions
1. Create a CSS file
Use any basic text editor software to prepare the CSS file. Your operating system’s default is an option, but you may want to opt for a slightly more flexible editor like Notepad++ for its color coding and auto-complete efficiency boosts.
We have provided an example CSS file at the end of this document that you can copy into a text file and save with the ‘.css’ file extension. As you experiment, remember that a CSS file should be split into three sections–Container, Header, and Content. Once you’ve uploaded the CSS file, you can try reloading newer versions of the same CSS file until you’ve captured the scheme that suits the website’s design.
2. Customizing Instagram widget
Some parts of the FeedWind settings screen will be disabled when using CSS, shown by grey text. This prevents conflict between the CSS file and FeedWind’s default limits.
FeedWind has the option to set the maximum length of the titles and content of feeds by specifying the number of characters to display. FeedWind adjusts the number of feeds shown based on the value entered for the maximum length. If a feed item displays outside the container, adjust the settings like line-height and width in the custom CSS file or adjust the number of characters allowed in the content in FeedWind’s settings.
3. Uploading Instagram widget CSS to a web server
To store your CSS file offsite:
Upload it to any platform like Dropbox, Github, or your own custom web server that can generate a custom URL.
Navigate to General > Advanced in the FeedWind setup screen.
Enter the URL of the custom CSS location in its corresponding box. The new custom Instagram widget design will refresh and display in the preview area.
Related posts
How to add or change the Facebook Page connected to your Instagram business account
Contents1 Why do you need to connect the Facebook page to your Instagram account?2 How do you link a...
Instagram Widget Token Issue
Contents1 Instagram token expired2 Instagram account Linking Issue with Facebook Page3 Link your Instagram Business account to your Facebook...
Create an Instagram widget with FeedWind
This document details how to set up the new Instagram Widget with FeedWind. Included are the requirements for Facebook...