Custom Facebook widget using CSS

  • Created : Apr, 26, 2017
  • Last Updated: Mar, 26, 2019

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.

CSS classes in detail

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.

customize facebook widget

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.


EXAMPLE CUSTOM FACEBOOK WIDGET CSS TEMPLATE

Here is an example custom RSS widget (see below for the CSS used):


/* This adds the ability to utilize Google WebFonts in your FeedWind widget */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

/* This is the styling for main Facebook feed container – NOTE: the background-color affects the footer background.*/
#fw-container {
text-align: left;
padding: 10px;
font-family: ‘Noto Sans’, Helvetica, sans-serif;
box-sizing: border-box;
background-color:#4e82d0;
}

/* This is the styling for the header container*/
#header {
margin: 10px 20px 10px 20px;
color: #fff;
font-size: 18px;
background-color: #888;
background-image: url(“https://glassho.me/fwtest/bannertop.png”);
background-repeat: repeat-x;
}

/* This styles the feed item URL */
.fw-fb-feed-item-url {
text-decoration: none;
}

.fw-fb-feed-item {
display:block;
}

/* Styling for the Main Title in the header container*/
.fw-fb-feed-title {
margin: 10px 20px;
font-weight: bold;
word-wrap: break-word;
text-align: center;
text-shadow: 1px 1px 0 blue;
display:block;
}

.fw-fb-feed-header-title {
border:0 solid #000;
}

/* Styling for the Main Title link in the header container*/
.fw-fb-feed-title a:link {
color: #fef;
text-decoration: none;
}

/* Styling for a “visited” Main Feed Title link in the header container*/
.fw-fb-feed-title a:visited {
color: #ddd;
text-decoration: none;
}

/* This is the styling for a Main Title link on “mouseover” (also known as “hover”) in the header container*/
.fw-fb-feed-title a:hover {
color: #fff;
text-decoration: none;
}

/* This is the styling for an “active” Main Title link in the header container*/
.fw-fb-feed-title a:active {
color: #fff;
text-decoration: none;
}

/* This is the styling for the feed body (i.e all Feed Items) container. */
/* WARNING: be careful adding Left or Right Padding as you can lose the scrollbar
when the L/R padding is set to more than 8px; the scrollwheel on a mouse still works however,
but the scrollbar can disappear after 8px of padding either side. Use Margins instead add space around the content container.*/

/* This is the styling for the Feed Item content module – i.e. the body container */
.fw-fb-feed-item-content-module {
margin: 10px 10px 10px 0;
height: 170px;
padding: 10px;
border-bottom: 1px solid #7a86c4;
border-top: 1px #7a86c4 solid;
box-shadow: 0 1px 1px #222;
background-color: rgba(30, 30, 30, 0.6);
}

/* This is the styling for the Facebook Item Title in the body container*/
.fw-fb-feed-item-title {
display:block; 
}

/* This is the styling for an “unvisited/unclicked” Facebook Item Title link in the body container*/ 
.fw-fb-feed-item-title a:link {
margin: 20px 0 10px 0!important;
color: #00aeff;
text-decoration: none;
font-size: 16px;
}

/* This is the styling for a “visited/clicked” Facebook Item Title link in the body container*/ 
.fw-fb-feed-item-title a:visited {
color: #39f;
padding: 20px 0 0 0;
text-decoration: none;
} 
/* This is the styling for a Feed Item Title link on “mouseover” (also known as “hover”) in the body container*/ 
.fw-fb-feed-item-title a:hover {
color: #39c;
text-decoration: none;
padding: 20px 0 0 0;
}
/* This is the styling for an active Facebook Item Item Title link in the body container*/
.fw-fb-feed-item-title a:active {
color: #09f;
text-decoration: none;
padding: 20px 0 0 0;
}

/* This is the styling affecting a Feed Item Description, Thumbnail or Video Player link for a feed item in the body container*/ 
.fw-fb-feed-item-link {
margin: 0 0 0 3px;
padding: 0 2px 0 3px;
color: red;
text-decoration:none;
}

/* This is the styling affecting an “unvisited/unclicked” Feed Item anchor for a feed item in the body container*/ 
.fw-fb-feed-item-link a{
color: #123456;
text-decoration: none;
}

/* This is the styling affecting an “unvisited/unclicked” Feed Item Link anchor for a feed item in the body container*/ 
.fw-fb-feed-item-link a:link {
color: #fff;
text-decoration: none;
}

/* This is the styling affecting an “visited/clicked” Feed Item Link anchor for a feed item in the body container*/ 
.fw-fb-feed-item-link a:visited {
color: #fff;
text-decoration: none;
}

/* This is the styling for a Feed Item Title Link Anchor on “mouseover” (also known as “hover”) for a feed item in the body container*/ 
.fw-fb-feed-item-link a:hover {
color: #fff;
text-decoration: none;
}

/* This is the styling affecting an “active” Feed Item Link anchor for a feed item in the body container*/ 
.fw-fb-feed-item-link a:active {
color: #666666;
text-decoration: none;
}

/* This is the styling for the Description in a Feed Item (i.e. the text of a Feed Item in Thumbnail mode, or text+images in Full HTML mode)*/ 
.fw-fb-feed-item-description {
font-size: 12px;
text-align: left;
margin: 10px 0 0 0;
color: #fff;
font-weight: 300;
word-wrap: break-word;
text-decoration:none;
display:block; }

/* This is the styling affecting a Feed Item Date for a feed item in the body container*/ 
.fw-fb-feed-item-date {
display:block;
margin: 0 20px 0 3px;
padding: 0 2px 0 3px;
color: #999;
font-size: 10px;
text-align: right;
}

/* This is the styling for a Feed Item thumbnail. Note: currently image dimensions (height: and width:) are not supported */ 
.fw-fb-feed-item-image {
border-top:1px solid #7a86c4;
padding-right:10px;
}

/* adjust the Facebook thumbnail container – NOTE: you cannot adjust the image size/dimensions here */
.fw-fb-feed-item-image-module {
margin: 10px 0 0 10px;
}

Usually, the easiest way to find out if your CSS works with FeedWind is by adding a new item into the CSS and refreshing your web page to see how it appears.

Create a Facebook widget

 

 

 

 

 

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now