Feed Widget Customising
66 commentsIf you are interested in using our feed widget, but you are not sure how to customise it, read on. Here's a gentle guide that will show you how to create a great looking feed that fits with your site design. The great thing about the widget is that you can make it look like it was created just for your website. You'll need knowledge of CSS to be able to style your widget, there are lots of great resources available online to get you started.
If you have any questions, or would like to offer feedback, please leave a comment below, or on the rss widget page or leave a comment below.
For this example, we'll create a twitter feed widget using our twitter account at http://twitter.com/surfingwaves. As public acccess to third party Twitter feeds is no longer available, we'll use our news feed URL. We'll also remove some of the redundant code that is not required when using a custom style sheet. The finished product can be seen on the right. Let's get cracking!
Create a background image for the custom widget
The easiest way to get a great looking widget is to use a background image. With an image you can create a nice border, include your company logo, or photo of your grandma if you so choose. Make sure the image is the size that you want your widget to be. We'll be using a 160x240px image, it will fit just nicely into the sidebar of our imaginary website. We won't go into the details of creating the image, as with CSS, there are plenty of web resources if you are unsure. Here's our background:
Customise the widget and get the embed code
Using the feed widget interface, edit the advanced options in each panel until you have the required functionality. Many of the options will not be relevant, as the values will all be taken from the custom CSS that we will create. Here is a list of the options that can be changed, and the options that we selected for our example. Ones that are not mentioned will be overwritten by the custom CSS entries.
Feed URL
- Enter your feed url. (we used https://surfing-waves.com/newsrss.xml)
General settings
- Specify the width and weight of your widget. ( Width:160px Height 240px)
- Autoscroll (on)
- Scroll step: seconds . (we used 8 seconds for the scroll step)
- Widget with scroll bar (off - we are using the auto scroll, the tweets will scroll automatically every 8 seconds)
- Link open (New window - this will open the twitter page in a new browser window)
- URL of custom CSS (input the url of the CSS file that you will be creating and uploading)
Main title
- Feed title (on). In this example, we are using the background image to display the title, so we need to have a feed title.
- Title name ( single space " "). The single space ensures that the title bar will format properly and the scroll will not obscure the title.
Entry title
- maximum length (130)
- Source icon (on). This displays the twitter icon next to every post title. This can be handy as a visual source reference when you are using several different feeds from different sources.
Entry contents
- Contents (off). We don't want the contents to display. In this case, where we are using the twitter feed, the entry content is a duplicate of the title.
- Maximum length is now not relevant for our example.
- Html (image / links) (off). Again, not relevant for the twitter example.
Feed footer
- Feed footer (on). As with the Title, our image provides the footer detail. We still want the footer to be included for the correct display of our widget.
Now you have the widget functionality you have the embed code you need to paste into your web page. Next, we need to create the CSS file that will contain the widget display styles.
Create and upload the custom CSS file
The default display entries, such as border and font colors will be overwritten when you specify the use of your custom CSS file. These need to be specified in the style sheet. Here you specify how your widget looks. This is where your knowledge of CSS comes in.
Using a Custom CSS
Here's the html layout of the widget. With this in mind, you can create your custom CSS file and upload it to your server.
If you have access to your feed source, you can add your own classes to further customise your feed widget.
The CSS we use in our example
Here's the contents of our style sheet.
body{margin:0;padding:0;background-image:url(/images/ex-twitter.jpg);}
.feed-container{font-size:11px;font-family:"Trebuchet MS",Helvetica,Arial,Sans-serif;}
.feed-container .header{margin:0px;padding:3px 3px 3px 3px;}
.feed-container .footer{display:none;padding:5px 5px 5px 5px;}
.feed-container .content{margin:3px;padding:0 3px;}
.feed-container .content .item{margin:0 0 7px 0;padding:0 0 7px 0;border-bottom:1px solid #CCCCCC;}
.feed-container .content .item .title{color:#105289;text-decoration:none;}
.feed-container .content .item .title a:link{color:#105289;text-decoration:none;}
.feed-container .content .item .title a:visited{color:#5a4860;text-decoration:none;}
.feed-container .content .item .title a:hover{color:#BC2A4D;text-decoration:none;}
.feed-container .content .item .title a:active{color:#105289;text-decoration:none;}
.feed-container .content .item .description a{text-decoration:none;color:#3399ff;}
.feed-container .content .item .description a:hover{text-decoration:underline;color:#6699ff;}
We have a number of examples of feeds, each with it's own style sheet. Take a look at the CSS source.
good
Hi! I can't to get my rss?
Hi. Great widget thank you. I would like to change the font colour for the entry contents ... it seems to be stuck on black ?
Great service guys. Thank you!
Maybe there's a way to change hours ago into different language?
@Henri: There's no way to change that at the moment. Multi language support is not something that we're going to add to the functionality. Perhaps at some time in the future when there is some spare resource.
This is exactly what I am looking for. I have one problem. My schedule is backwards. Date in July, 2013 show up before events in October 2012. Is there a way to change this?
@Lilo, There's no way to change that at the moment. Sorry about that.
How do I get it to auto update the feeds ?
@Guest on Oct 18, 2012: The widget updates itself every 30 minutes.
cannot seem to change the font size ?
host site not found!
Can I set it to only show recent posts i.e. show only last 10 articles?
@Guest on Jun 4, 2013: Use the General settings > Entry limit: option to specify the number of items displayed.
Today my widget stopped. After week?
I had to get a new code
2 or 3 columns widget possible?
looks can only generate 1 column widget
A multi column widget is not possible.
I love the auto scrolling feature but I am searching for a way to stop it when playing a video on the same page, because the sounds hickups while the feed is scrolling.
I need to update the script everyday. Every 24 hours the script stops showing the feed. Do you have an idea what the problem is?
Can i use it in email template?
I plugged your code in to the source code of the page I wanted it on and it is not displaying. All I see in a faint gray is "widget@surfing-waves.com
What am I doing wrong?
This CSS seems to work in Safari, but the feed doesn’t show up in Chrome. Any suggestions?
Regards
Jessica
http://www.hitechinstitute.in
I am attempting to add this feed widget to my site but my site uses ssl certificate and it keeps blocking the feed. Is it possible for me to buy the script so I can add it to my website.
Unfortunately this is not possible.
Works alright, but i want to center the message. Its now align to the right. Witch code can i use?
I tried:
rssfeed_item_title_align="center";
But this is not working.
Help!
Grtz Vincent
You do need to use a custom stylesheet to do this, applying this style to the div you want to centre.
text-align: center;
when using multiple feeds (rssfeed_url[0], rssfeed_url[1], rssfeed_url[2]...) it doesn't seem to switch between them or showing a mix...is there an interval that drives this or is it somehow related to the rssfeed_no_items? thanks, btw...awesome widget!
Hi Seth, I think the feeds arrange themselves by date order with the newest appearing first. The rssfeed_no_items limits the number of posts that the widget displays. If you've opted to display 5 posts and the 5 latest posts all come from one feed then only that feeds' posts will display.
Great service to humanity: More grease to your elbow, guys... It works perfectly.. You did a great job. Thanks
Seems I can alter everything except the feed url. No matter what rss feed I past in its place, the sample feed is all that comes up. Do you have any idea what I am doing wrong?
I really like this solution otherwise. Donation on the way if I can get this to work.
- rob
Managed to figure out the cache situation and update the feed. Wondering what the xml format is for creating my own News Feed to host? In other words, I have a website that posts news about their own company... so I need to create the xml (or rss) file that the widget references. Is there a standard format the news agencies use for the data?
Sorry.... got the format figured out. But now I can't get the feed to refresh again. I thought I could change the number of the cache (because that was working) but not any more. How do we refresh the feed... say when I want it to see a different feed or I have made changes to my own rss feed?
Same problem as April 26. We're new to this RSS feed, and it doesn't seem to update. It worked first time, but no updates.
The feed widget caches once it is displayed. If the RSS feed source is changed when the feed widget is cached, the feed widget will not reflect the change until it is re-cached. The current cache time for the feed widget is 30 minutes, so the maximum time to wait for a change to an RSS feed source to be reflected in the feed widget is 30 minutes.
If you want to have a widget displaying one feed and a seperate widget displaying another feed you have to generate two separate widgets, otherwise one will simply display the cached version of the other feed widget.
Caching does not apply to some changes that you can make to the widget. For example, if you were to change the font size you would see that change straight away. It may be confusing to see a change to the way the widget looks being displayed immediately but not to see any change in the feed content.
The reason for caching a source feed is to reduce the number of requests that the widget server has to make to a third party website.
We have a site using our feed widget that has over 1 million widget views a month. Imagine how quickly a site would block our widget server is we were requesting their RSS feed a million times a month.
Hi,
How can center the entry titel?
I tried:
rssfeed_item_title_align="center" ;
but isn't working
Greatings Vincent
(The Netherlands)
Sorry, is it possible to align without a style sheet?
Hi Vincent,
It's not possible to align the title without using a style sheet.
When I change the feed URL- why do it say "URL is not valid" instead changing the feeds?
The feed is not a valid feed. You need to make sure that make sure the feed is valid (use and online checker)
I tried everything to position the widget including css, to no avail. It appears stuck where it is, upper left hand corner.
The widget does not position itself in the page. It will stay within the section of the page where the code is placed. Place it within a <div></div> section where you would like it to display.
When the feed has a image, how can I put description in front of the photo and not over the photo
Youd' have to use some custom css for that if the feed already has a description. If it doesn't have one there is no way to add one.
I can't seem to have 2 separate rss feeds on 2 different pages. Any idea?
Thanks,
Gary
Hi Gary,
You need to generate two entirely different widgets. You can't just copy a different URL into the widget script. It doesn't work like that.
Hey Surf Patrol, would like to use this on a website that needs to meet accessibility standards. Need an assist from you. The iframe that is generated has a 'name' but not a 'title'. Can you add that to the JS so it will generate something for a title? (like title="RSS feed" would work) The title attribute is not interchangeable with the name attribute as far as accessibility is concerned. The title labels the frame for users; the name labels it for scripting and window targeting.
Thanks so much for your help.
Hi Alabama,
I'll have to take a look at that for you. Please email support@ with your details. Thanks,
Help!
I want to post rss url on the left column and one on the right of my webpage. Can I do this?
How do this to get two rss url feeds on same webpage?
tecwork
Hi, I use your rss reader for months now, it has always worked well, but right now it's broken (except the link to your site lol). Did you notice it? (I haven't changed anything to my page). Time to move again to something else...
ALCON,
The widget is down due to an SSL Certificate issue. Do you know when it will be back up? Also, is it possible for you to post the JS file for download so we don't become so dependent on another server? Thanks.
Looks like the widget has gone away!
Still showing SSL Errors. Causing a lot of outages as google is removing sites that do not have Full ssl.
is possible keywords selection widget show only with the "selected" words?
Hi,
Im using CSS file but I can not find the way to use max-with for the iframe to make it adaptable for smartphones, and smoler screens. Any idea how to fix this problem?
Thanks
I'm trying to do a newsfeed on my new website I got from GoDaddy. I followed the instructions to the tee. Still having issues. Please help
Thanks! How do I change the Justification of text to appear from right to left (in order to use it in Hebrew)
Hi, how i can saw a data and time on my postes. i can add only "... days ago".
atahank you
Use the Posted time ago option:
Customise your Feed Widget > Entry contents > Posted time ago: (ON)
How can I implement a responsive frame height. I want different heights based on screen orientation and resolution
Is there a way to have alternative text appear when there are no posts instead of the system message of
url: "[feed url]" No current posts
Hi Valerie, unfortunately there is no way to customise this text.
First of all, great job on this! Second, I love it all, but my feed comes in with my dates backwards. Instead of 10/29/2022 (today's date) and the feed ending on 11/11/2022 at the bottom, I am getting 11/11/2022 at the top and 10/29/2022 at the bottom. Is there something I can do to fix this issue?
This tool is great - thanks for providing it. When I add images, they show below the text content. Is there a way to place the image left (or right) of the text?
Great tool, thanks! Is there a way to show images to the right or left of the text content, and not below, after it?
@robgky
There is no way to change the order of posts. The latest one in the feed should appear at the top.
@tavo
There is no way to change where the images appear in the widget.
@Guest on Nov 3, 2022.
There is no feed setting to do this but you might be able to do this with some custom CSS.
Three questions:
1. Is there any way to show the scrollbar only when there's enough content to require scrolling? Sometimes our RSS feed (class cancellations) has only one or two items, but sometimes dozens or more.
2. Similarly, is there a way to stop auto-scroll when there isn't enough content to require scrolling? When there's only one item in the feed, the momentary flash makes it look like it's glitching out.
3. When auto-scroll is enabled, is it possible for users to scroll up and down manually as well? I would have expected that enabling "widget with scroll bar" would have done that, but it doesn't seem that it does. Maybe I'm missing something. Auto-scroll looks great, but I can't use it if users can't get to something that's already scrolled past without waiting for it to come around again.