Custom Facebook widget using CSS
Contents
Customizing your Facebook feed
As with all our widgets, you can use CSS to create a custom Facebook widget and match any website design. The setup screen for our Facebook feed widget allows you to create a variety of different styles. However, we understand you may need a news feed widget styled to match your site design more closely; using CSS you can achieve almost any styling you want.
HTML structure and CSS classes
Here are the CSS classes and structure for you to create a custom Facebook widget:
Implementation instructions
1. Create a CSS file
Use your favorite text editor or software to prepare the CSS file. Notepad++ is a great free editor that is ideal for creating a CSS file, but there are others available online. All you need is a text editor that does not apply any formatting such as font sizing etc..
A basic file would look something like the example (see below), and produce the custom facebook widget you see in the example below. As you can see the CSS is split into three sections; the Container, Header and Content. We have commented these . You can simply copy this code into your code/text editor and modify the contents, then save is as myfilename.css (or whatever name you want but it must have the .css extension).
2. Upload the CSS file for your custom Facebook widget to your web server
Place the CSS file on your local server or use a service such as Dropbox to store your CSS file offsite. Copy the URL for use in the Feedwind setup screen.
3. Input the CSS URL
Click on the >Advanced Settings link in the “General” section of the setup screen. Enter the URL of the custom CSS location in URL of Custom CSS box. The new custom facebook widget design will display in the Preview area.
Match your settings to the available container size
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 automatically adjusts the number of feeds shown based on the value entered for the maximum length. Sometimes a feed item can display outside the container depending on the line-height and other settings in the custom CSS. In this case, please adjust the settings in the CSS file or adjust the number of characters allowed in the titles/content.
Related posts
Facebook posts: Enhance your brand’s online presence with custom overlay design
Stand Out with Custom Overlay Designs While images play a vital role in catching the eye, the design elements...
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...
Facebook feed widget FAQ
Contents1 Q. What information will display in my Facebook feed widget?2 Q: I receive an error message about admin...