Hello, fellow community members, and welcome to the second installment in this ‘how to’ series for customizing your Paper.li. For those of you who don’t know me, my name is Dorian Staten and I am the creator and editor of The Freethinker Post, a Paper.li newspaper that focuses on progressive news and politics.

Since upgrading to Pro, I’ve worked tirelessly to get the most out of my newspaper. The good people at Paper.li noticed my customizations and have asked me to write these series of ‘how to’ articles in order to share with you how I did it all.

Last time we discussed how to add a custom header bar to your Paper.li. This time we will be discussing how to add a custom news ticker to your site as well. You can visit The Freethinker Post now if you’d like to see working examples of both the custom header bar and news ticker.

Why should you add a custom news ticker to your Paper.li?

The biggest reason to include a news ticker on your paper is because it constantly updates, keeping your visitors informed without any extra work on your part. Even while you sleep, your news ticker continues updating, bringing your visitors fresh, relevant information. Having a news ticker also sets your paper apart from other papers and shows your visitors that you’re serious about providing them with as much up-to-date news as possible. Visitors love dynamic sites, and your news ticker will keep them coming back for more.

The news ticker we’ll be discussing today can contain up to five sources. You can use these five sources to provide a wealth of news on a single topic, or use them to provide a variety of five separate topics relevant to your paper. Where your ticker pulls its news from is completely up to you.

Note: the first step to moving forward with customizations is to configure a custom domain for your paper.

Alright, ready to customize your Paper.li? Then let’s get to it!

Preparing your CSS (IMPORTANT!)

If you plan on adding the custom news ticker to your site, the first thing you’ll need to do is copy the following code and paste it into your CSS (Go to Paper Settings > Appearance > Custom design > Edit the CSS of your paper, then paste the following code into the edit box that pops up):

@media screen and (max-device-width: 1024px) {
 .newsTicker {
   display: none;
   }
}

@media (min-device-width: 240px) and (max-device-width: 720px) {
 .newsTicker1024 {
   display: none;
   }
}

@media (min-device-width: 1136px) and (max-device-width: 8192px) {
 .newsTicker1024 {
   display: none;
   }
}

The above code should be pasted after any other CSS code you currently have in the box. Note that there is a full blank line between each entry. Be sure to leave these blank lines, and there should also be a blank line between the above code and any other code you already have in the box.

This CSS code will ensure your news ticker displays properly no matter what device and screen resolution your visitors are using. The full version will display on screens with a resolution width greater than 1024 pixels, a smaller version will display on screens with a resolution width of exactly 1024 pixels, and the ticker will be excluded altogether on mobile devices due to size constraints.

Installing the news ticker

To install your news ticker, select the color below that best suits your site’s color scheme, click the appropriate link (depending on whether your paper has a white background or not), and then copy all of the code in the new window and paste it into your Paper.li header (go to Paper Settings > Appearance > Custom design, switch the slider next to ‘Show Paper.li header’ to ‘Off,’ then click ‘Add or edit your custom header (HTML)’ and paste the code into the edit box that pops up.) If you have already installed the custom header bar, paste the news ticker code after the custom header bar code.

After you’ve pasted the ticker code, find the line of code that looks like this (there are two instances):

rssfeed_cache = “25e48e30c5z6z585z54df815c3c2909z“;

Change at least one character in the long string in red. It doesn’t matter what you change it to, just replace any letter or number with another letter or number. If you ever edit your ticker and don’t see the changes taking affect, change another number or letter in that string and you should then see your changes.

If you have not already installed the custom header bar, you’ll need to find this line of code (there are two instances):

<div style=”width: 100%; height: 60px;”>

In each instance, change the 60 to 20. If you have already installed the custom header bar, you can disregard this step.

You can now save your changes and preview your news ticker on your Paper.li site. You should see headlines from the default five news sources scrolling every nine seconds at the top of your page.

Configuring your news sources

The default five news sources are NBC News, CNN, Think Progress, Reuters, and Politico. You can find their links in the code following ‘rssfeed_url[0]=‘, ‘rssfeed_url[1]=‘, ‘rssfeed_url[2]=‘, ‘rssfeed_url[3]=‘ and ‘rssfeed_url[4]=‘. To use news sources of your choice, simply replace each of the links in the code with RSS feed links from your preferred sources (be sure to leave the quotation marks; only replace the links themselves).

For instance, the code that tells the news ticker to pull stories from NBC News looks like this (I’ve added the red for distinction):

rssfeed_url[0]=”http://feeds.nbcnews.com/feeds/topstories“;

Say you’d like to replace NBC News with BBC News. BBC News’ RSS feed URL is ‘http://feeds.bbci.co.uk/news/rss.xml‘. So after editing the code, it should look like this:

rssfeed_url[0]=”http://feeds.bbci.co.uk/news/rss.xml“;

If you would like to use less than five sources, simply delete the extras beginning with the last one. If you have only one source, it should be ‘rssfeed_url[0]=‘ (note we’re starting with zero). If you have two, they should be ‘rssfeed_url[0]=‘ and ‘rssfeed_url[1]=‘ (start with zero, then one, then two, etc.) and so on.

Note that there are two sections where the news source links are included in the news ticker code – one towards the top, and one towards the bottom. The redundancy is because there are two different versions of the news ticker that will display depending on the visitor’s screen resolution. You will need to add your RSS feed links in both sections.

Most news and blog sites have RSS feeds. Just look for the word ‘RSS’ or for the RSS symbol on the page.

 

TIP: If you have a blog of your own, why not add your blog’s RSS feed to your news ticker? Your new blog posts will automatically become headlines on your ticker!

Changing the number of headlines to display

The default number of headlines your ticker will display is 25. If you have all five sources filled, you should average around five stories per source, depending on how often each source publishes new articles. Twenty-five can be a lot, however, if you have only one or two sources. Since each source will have 10 to 15 headlines (or a whopping 25 if you have only one source), the oldest headlines may be a bit out of date. If you would like to change the number of headlines to display, look for this line of code (there are two instances):

rssfeed_no_items=”25“;

Simply change the 25 to adjust the number of headlines to display. I would suggest about five headlines per source in order to keep the headlines fresh.

Replacing my Google ad with your own

The Google ad serves two purposes; in addition to its possible monetary benefits, it also helps fill some white space. Many headlines aren’t very long, so without the ad, you can sometimes end up with 80% of your news ticker being just white space. The ad helps to balance things out and fill some space. You are of course welcome to replace the current code with your own ad code. Look for the following in the news ticker code (there is only one instance):

<script type=”text/javascript”><!–
google_ad_client = “ca-pub-0768038032574496”;
/* The Freethinker Post Header */
google_ad_slot = “6308746164”;
google_ad_width = 234;
google_ad_height = 60;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Replace the above code with your own Google ad code in order to display your ads. The ad should be 234X60 to fit properly. If you’re not familiar with Google ads, you can learn more and sign up at Google Adsense.

If you choose not to replace the Google ad code with your own, I humbly ask that you leave my ad code intact. Think of it as a way of thanking me for the work I put into putting the ticker and this article together. =)

And we’re done!

I hope I’ve explained everything clearly enough and that you enjoy your new news ticker. If you’d like to show yours off, or if you’re having difficulty installing yours, please feel free to leave a comment.

Stay tuned, and next time we’ll discuss how to add a custom footer to match your custom header. See you then!

Dorian Staten
I lived and worked in Texas, US for the first 39 years of my life, and spent most of my working years in web design. I'm self taught and started my own web design business in Galveston, Texas in 1998. My business never really got off the ground, but the experience taught me the skills I needed to get my foot in the door and quickly build a career in web design. I left the rat race a couple of years ago and have spent the last nine months in Cancun, Mexico. I'm a liberal humanist and now spend a great deal of my time following the news and politics. My goal these days is to use social media and my Paper.li newspaper to inform people about the injustices currently going on in the world.

Published by

Tags:

5 Responses to “How-to Add A Custom News Ticker To Your Paper.li”

  1. Roman Potapov

    Dorian,
    Excellent piece of code. But for some reason it stays above the page title, no matter what I do. Got any fix for that?

    Check it out at news.iseecompany.com

    Thanks in advance!

    Reply
    • Dorian Staten

      Hi Roman,

      I’m so glad you like the custom news feed. I just checked your paper, and I see your feed is above your paper’s title. Does this mean you were able to resolve the issue?

      Best,
      Dorian

      Reply
  2. Anand

    Hello Dorian.

    Thank you for the code. It helps to add a news ticker above my site title. But how do I get it to display below the site navigation bar like you have it on your paper? Cheers!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *