Displaying an RSS Feed on a Web Page

The Flow of Information today is Everything.
We have become such an incredibly Interconnected Society, that we don’t even realize it. Phones, Web, Social Media… but also Automation in your Home, Surveillance systems… even your Car, in some way receives and shares information of some kind. In some ways it’s a good thing… in other things maybe it would be appropriate to create a more in-depth discussion in other places.

Anyway, the Topic of this Article dedicated to Webmasters is as the title suggests, how to implement and display an RSS Feed on a Web page. But let’s start from the beginning.

What is an RSS or Feed

We are talking about a dedicated System with the anachronism of “Really Simple Syndication“; or more simply, a File or Code that automatically Updates information from a Source, transforming it into XML format.

Today this method is extremely popular and is used practically everywhere, from Google to the simplest Blogs, where this function is native. An RSS feed takes the headlines, summaries, and update notices, and then links back to Articles on your favorite website’s page. And its peculiarity is that all this happens in Real Time.

After this short and quick description, let’s analyze for a moment, why you want to implement this RSS on a Web page.

One reason, given the Native Interaction with the News extracted in real time, is to show the Users of your Website, always new and updated content.
It is not something to be taken lightly, especially for static websites created for example as a “showcase” without particular functions. It can help increase the SEO of the page / site as well as maintaining the freshness of the information that is provided. Another reason could be to integrate external content, to the topic of your page. For example, in a section of your site you talk about cooking recipes, and at the end of your article, you can add a feed with the latest news dedicated to this topic.
These are just a few examples.

So, now let’s try to explain how to integrate an RSS Feed on your PHP page, in a few minutes.

First, let’s create a little Style, so that the visualization makes sense and adapts to the graphics without breaking them; a good idea is to enclose this snippet in a </div> or a <section> of the page, where there are already some CSS rules, so that there can be a graphic continuity.

<style>
body
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:80%;
}
#wrapper h1
{
 margin-top:100px;
 font-size:40px;
}
#wrapper h1 p
{
 font-size:17px;
}
#wrapper #feed_div
{
 background-color:white;
 width:auto;
 height:250px;
 overflow-y:scroll;
 margin-left:auto;
 margin-top:20px;
 text-align:left;
 border:1px solid gray;
 padding:10px;
}
#wrapper #feed_div h2
{
 font-size:17px;
}
#wrapper #feed_div .title a
{
 text-decoration:none;
 color:#0080FF;
}
</style>

This is a basic way to display the Feed inside a wrapper on your page; it’s just an example that you can modify as you like; but it’s a good starting point. Now let’s add the “core” of the snippet:

<section>
<div id="wrapper">
<div id="feed_div">
<?php
$rss = simplexml_load_file('https://blog.scriptnet.net/feed'); //Add your own Feed Source
echo <'h2>.  $rss->channel->title . </h2>;
foreach ($rss->channel->item as $item) 
{
 echo <'p class="title"><a href="<?= $item->link ?>"><?= $item->title ?></a></p>;
 echo <p class='desc'><?= $item->description ?></p>;
} 
?>
</div>
</div>
</section>

In this example, we have displayed a Source directly on the page; however, we are talking about an RSS that currently only returns the List of News that contain the Title, the short Description and the Link to the Source page. Nowadays, however, almost all RSSs contain much more information; data that you can display and integrate, as in the previous example, in your PHP page if you want.

In this new example, we add other functions to our Code, to be able to import and display our RSS including the images of the Feed or, if it is not available, a default image.

<?php
$rss = simplexml_load_file('https://blog.scriptnet.net/feed');
?>
<section id="recent-blog-posts" class="recent-blog-posts">
  <div class="container" data-aos="fade-up">
    <header class="section-header">
      <h2>Blog</h2>
      <p>Recent posts from our Blog</p>
    </header>
    <div class="row">
      <?php foreach ($rss->channel->item as $item) { ?>
        <div class="col-lg-4">
          <div class="post-box">
            <?php
            // Gets the HTML content of the post's "content" element
            $content = $item->children('http://purl.org/rss/1.0/modules/content/&#039;)->encoded;
            // Extracts the first "img" tag from the post content HTML
            preg_match(/<img.+src=['"](?P<src>.+?)['"].*>/i, $content, $image);
            // If an image is found, display it, otherwise display a default image
            if (!empty($image)) {
              echo <div class="post-img"><img src=". $image['src']" class="img-fluid" alt=""></div>;
            } else {
              echo <div class="post-img"><img src="https://via.placeholder.com/800x600.png?text=Image+not+available" class="img-fluid" alt=""></div>;
            }
            ?>
            <span class="post-date"><?php echo date('D, F j', strtotime($item->pubDate)); ?></span>
            <h3 class="post-title"><?php echo $item->title; ?></h3>
            <a href="<?php echo $item->link; ?>" class="readmore stretched-link mt-auto"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      <?php } ?>
    </div>
  </div>
</section>

In this example, we used the main style of the site, using the template classes and Bootstrap, which almost everyone uses nowadays. The news from the Feed are extracted and used to populate the Image, content, timestamp and link to the source fields. If there is no image, one of your choice is shown. Here an Live Example of the result:

Good Coding!