Suppose you want to display a news feed on your website. How could you do it? What would it take? Well, the easy way is to use a tool like RSS-Mikle aka FeedWind. But suppose you wanted to write it all yourself, is that possible? First, it can&';t be done totally in Javascript. That&';s because Javascript can&';t read files on another website unless that website gives permission. If you own the news feed, you can give yourself permission. If the news feed is on the same domain as your news display website then it can be done totally in Javascript, no permission needed. But, more than likely, you&';re trying to display a news feed from somebody else&';s website. So, you&';ll need a little PHP to help you out.
Most newsreader website code examples refresh the display every so often. How about if we let the user handle the refresh &n-; more than likely, they&';re reopening your website. First, change your <body> tag to <body onload="location.reload(true)">. The true tells the reload to not reload from the cache. You can also add a button <button onclick="location.reload(true)">Refresh</button> to your webpage for the user to use, rather than having them click F5 or whichever key is their refresh key.
Next you need to find the news feed. Go to your news source and look for RSS - it may be hidden at the bottom of the page. It may be really hidden and you have to search that page for it. RSS is an XML page containing the news feed. Some news sources require you to subscribe to the news to get the RSS feed. Subscribing may simply mean, clicking on the icon in order to get the to RSS page. It may mean giving them your email address. It may mean paying a subscription fee. Some news sources will give you easy access to the news feed, but once you put it on your page, it never updates. I suspect this is because you didn&';t suscribe with a fee. Some news sources you don&';t want because in your opinion they&';re biased or because they display offensive news at times. The way around these subscription issues is to use Google News Feeds on your site and filter out the ones you don&';t want. More on that later.
Terminology
RSS stands for Really Simple Syndication and as mentioned above is just an XML page which conforms to RSS standards. There are various shades of RSS - RSS, RDF, Atom, Podcast, Media RSS (MRSS), Open Search RSS, Blog Channel, Content, Creative Commons, Dublin Core, Slash, Well-Formed Web (WFW), Ipod, Wordpress, etc. Most can be handled similarly to RSS, but some of the nuances might cause you problems when figuring out how to format the feed. CORS stands for Cross-Origin Resource Sharing. This allows or rather disallows you from using Javascript to access files on somebody else&';s website. Sure, you could use jQuery or something else, but they take a lot of resources and slow your page when loading. I&';m looking for something I can do with a little Javascript and PHP. XHR stands for XMLHttpRequest. XMLHttpRequest will request the RSS file from the source. XMLHttpRequest is initiated in Javascript, but passes control to php to actually get and display the RSS. XMLHttpRequest can be used to get any file. If the file is on your website or on a website domain, you can use XMLHttpRequest solely in Javascript. But I&';ll let you research how to do that. It might be possible to just use php to get the RSS file and then use Javascript to display it, but timing and other considerations make that difficult. If I were writing it, I&';d want to keep it simple and perform both the get and display in php. XML is a file with HTML-like tags. In XML all tags must have a corresponding end tag </whatever-the-begin-tag-was>. All RSS files are XML files, but all XML files are not RSS files.
The Code
First you initiate the request to execute your php module which will get the RSS and echo it to your website. If you want to format it, that would be easier to do in Javascript, but how do you figure out when PHP has passed the information back to you? You can read the RSS feed in PHP, create a file local to your website, read the file in Javascript, and display the feed.
More Issues
So, suppose you do all that. What you&';ll end up with is the RSS feed on your website. But there will probably be duplicate entries you&';ll want to eliminate (just getting the latest one). Another issue is that each RSS feed tells you how often the feed is refreshed. While we said, we&';d let the user refresh the page and therefore the feed, they may do this more often than the newsfeed warrants, and you should probably cache the feed results until it&';s time to refresh them. Looking at these issues - Duplicate entries, Refresh rates, Cache, Formatting the feed (especially given all the various flavors of RSS), I realized this was more than I wanted to code, especially since I wasn&';t getting paid for it. Some websites told me there was only RSS, but I kept finding various feeds that were some other flavor of RSS. So, I turned to FeedWind for everything except feeds from my blog which is in Wordpress. FeedWind appears to have a small footprint (it loads quickly). I just make some Javascript calls and it does the rest.
RSS-Mikle aka FeedWind
To add FeedWind to your webpage to display a newsfeed, add the following in the <head> section of your HTML: <script type="text/javascript">document.write('\x3Cscript type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'https://') + 'feed.mikle.com/js/rssmikle.js">\x3C/script>');</script> That looks a little strange, but it&';s just linking you up with the FeedWind Code, going to an https site if your site is https otherwise it goes to a http site.
Then add the required FeedWind Branding link, unless you&';re paying to use it: <div style="font-size:10px; text-align:center; width:300px;"><a href="https://feed.mikle.com/" target="_blank" style="color:#CCCCCC;">RSS Feed Widget</a><!--Please display the above link in your web page according to Terms of Service.--></div>
<div style="font-size:10px; text-align:center; width:300px;"><a href="https://feed.mikle.com/" target="_blank" style="color:#CCCCCC;">RSS Feed Widget</a><!--Please display the above link in your web page according to Terms of Service.--></div>
Then add a <div> similar to the following to display the newsfeed: <div width="302">
<script type="text/javascript">(function() {var params = {rssmikle_url: "https://feeds.feedburner.com/NewshourHeadlines",rssmikle_frame_width: "300",rssmikle_frame_height: "100",frame_height_by_article: "5",rssmikle_target: "_blank",rssmikle_font: "Arial, Helvetica, sans-serif",rssmikle_font_size: "10",rssmikle_border: "on",responsive: "off",rssmikle_css_url: "",text_align: "left",text_align2: "left",corner: "on",scrollbar: "on",autoscroll: "off",scrolldirection: "up",scrollstep: "3",mcspeed: "20",sort: "Off",rssmikle_title: "on",rssmikle_title_sentence: "",rssmikle_title_link: "",rssmikle_title_bgcolor: "#EFD6CC",rssmikle_title_color: "#454545",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#EFD6FC",rssmikle_item_bgimage: "",rssmikle_item_title_length: "55",rssmikle_item_title_color: "#0066FF",rssmikle_item_border_bottom: "on",rssmikle_item_description: "on",item_link: "off",rssmikle_item_description_length: "235",rssmikle_item_description_color: "#444444",rssmikle_item_date: "gl1",rssmikle_timezone: "Etc/GMT",datetime_format: "%l:%M %p %b %e, %Y",item_description_style: "text+tn",item_thumbnail: "crop",item_thumbnail_selection: "auto",article_num: "5",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: ""};feedwind_show_widget_iframe(params);})();</script>
</div> Specify the width for your newsfeed <div>. Then set your variables. I list all the variables every time. For one thing, FeedWind reinitializes all the variables. For another, the way the variable assignment is now structured, it makes it difficult to create a function to set some of the variables (those you want set to the same thing all the time) and then to just set the rest (those that change) before calling feedwind_show_widget_iframe.
You can grab the code for your <div> at Feed.Mikle.Com. Just enter a news feed url, set options, and copy the code. I&';ll go over some of the params: rssmikle_url → this is the news feed url rssmikle_frame_width; rssmikle_border → rssmikle_frame_width is the width of the div minus border width → 2 if rssmikle_border is on, 0 if off. rssmikle_frame_height; frame_height_by_article → this is the height of the div minus border. You can also set the height to a number of articles with frame_height_by_article which overrides rssmikle_frame_height. rssmikle_font → set to match your font style. scrollbar; autoscroll → if you don&';t want your articles to constantly scroll, set autoscroll to off. sort → At first you might think you want to sort by date. But almost all news feeds are already sorted by latest article first. So, I leave sort set to off. rssmikle_title; rssmikle_title_sentence → if you want the newsfeed title, set rssmikle_title to on and leave rssmikle_title_sentence empty. If you want to override the newsfeed title (because sometimes it&';s meaningless or not unique enough), place your title for the news feed in rssmikle_title_sentence. datetime_format → I forget what the default is, but I didn&';t like it, so rearranged the elements. item_description_style → set to text, text+tn, or tn where tn = thumbnail. Some news feeds had flashing images, so I set item_description_style to text. article_num → the number of articles to display. You can set the frame_height_by_article to 1 and scroll through all the articles. To retrieve all articles, set article_num to 15 → should be plenty. keyword_inc; keyword_exc → these filters include or exclude articles with any of the keyword phrases. Use a semicolon (;) delimited list such as apple;orange juice;squash. Google News Feed sometimes returns "There is no content available". Haven&';t figured out why. Somebody on the web reported a similar problem with a Weebly website. My other feeds are fine, so it must have to do with Google and Weebly. I&';m guessing it&';s because Google is trying (not too successfully) to block unsubscribed feeds. FeedWind also displays Google Calendar events. I&';ll let you figure that one out.
Display a Wordpress Blog Article
It appears that I can display Wordpress blogs using FeedWind, but I only want to display certain articles, so I use the following method. I have a Wordpress subdomain for my blog. I want to display certain articles of my blog (the ones I&';ve deemed to be newsletters) on a page in my main domain. Just how would I go about doing this? You can search for the answer, and maybe you&';ll come across an article from Wordpress telling you how it&';s done. If you do, it will more than likely it will tell you both pages need to be on the same domain. They do, but subdomain will work. First, you have to do it in php. Well, maybe not have to, but Wordpress works really well with php. So, I set up the page I want to &l";copy&r"; the article to as a php page. At the top of the <body> of that page, place <?php
error_reporting(E_ERROR | E_PARSE);
require('../huggingthewind.stubbart.com/wp-blog-header.php');
?> error_reporting is optional. I was getting a warning and tried to handle it with error_reporting. However, since the warning was happening outside my page, it error_reporting didn&';t keep the warning from showing. The warning was &l";Warning: Cannot modify header information - headers already sent by&...; in &...; wp-super-cache&...;&r";. WP Super Cache was the problem program. WP Super Cache is a great program for caching your articles (retrieves them faster for display). However, it can&';t handle this situation. I switched to W3 Total Cache and the warning went away. I tried switching to another blog platform, but none of them was as easy for me to understand as Wordpress, and none told me how to display an article on another part of my website that wasn&';t using that platform. There are lighter footprint platforms than Wordpress, so I&';d rather use them, if only &...;. By using ../ convention in the require statement, I was able to back down to the http level and get to my blog. wp-blog-header.php contains all the necessary Wordpress stuff, so you can display the article on your website. Where you want the article to appear, place the following code. This is just displaying one article, if you want to display all the articles your can use an <iframe>. See Integrating WordPress with Your Website will show you how to loop through your articles using Wordpress php, rather than an <iframe>. This article is also helpful. As is this one. And, as mentioned before, you can use FeedWind to loop through your articles. <?php
error_reporting(E_ERROR | E_PARSE);
$my_postid = 227;//This is page id or post id
$title = get_the_title($my_postid);
echo "<br /><b>" . $title . "</b>";
$content_post = get_post($my_postid);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
//echo apply_filters('the_content', get_post_field('post_content', $post_id));
//remove last 2 div which contains share buttons
$content = substr($content,0,strripos($content,"<div")-1);
$content = substr($content,0,strripos($content,"<div")-1);
echo $content;
?> Again, error_reporting is optional Set $my_postid to the article/post number. (I call them articles, Wordpress calls them posts.) Wordpress is making it harder to get to this post number. While logged into Wordpress, click on the post. The post number should appear as part of the URL in your URL bar, not in the fancy URL in the permalink. Next, I get the title and display (echo) it with a little formatting. Then I get the post, do something with it and apply filters &n-; whatever that code is doing. That&';s what Wordpress told me to do. Then we come to $content = str_replace(']]>', ']]>', $content);. This keeps the code happy on my website. You may not need it, but I did. It keeps that particular > from being interpreted as a > too soon. I use a social media plugin (Add to Any) on my blog posts. If you use a social media plugin on your posts, those links will be contained in <div>s at the end of your $content. If those links don&';t come through nicely, you&';ll need to remove them. Different social media plugins use different numbers of <div>s. The one I use has 2 <div>s, thus the repeated statement. Lastly, echo the content to display it.
icon in order to get the to RSS page. It may mean giving them your email address. It may mean paying a subscription fee.