Displaying My Rss Feed On Hartley Consultants Front Page
I had always planned to replace the feed on the front page of Hartley Consultants web site with a summary of recent posts from this blog. I had previously sucked in news articles from the local SMF Forum that is on site, but I intend to remove the forum shortly because I am setting up the equivalent on this site, where it is more appropriate.
It turned out to be remarkably easy to achieve. A call to “file_get_contents” with the url of my feed returned the raw xml into a variable, whilst a call to “preg_match_all” enabled me to parse the feed content and find the relevant information to display. The formatting of the articles was already achieved by matching the same format as I had used for the forum feed.
Here is the code I used
$feed = file_get_contents(‘http://www.chandlerfamily.org.uk/feed/’);
//having got the xml feed from chandler’s zen we parse the xml looking for all the entries
$pat = ‘#<item>.*?<title>(.*?)</title>.*?<link>(.*?)</link>.*?<pubDate>[^,]+,\s+(\d+)\s+([[:alpha:]]+).*?</pubDate>’;
$pat .= ‘.*?<description><!\[CDATA\[(.*?)\[\.\.\.\]\]\]></description>.*?</item>#sm’;
if (preg_match_all($pat,$feed, $topics,PREG_SET_ORDER)){
$item = 0;
foreach($topics as $newsitem) {
$item++;
?> <div class="newsitem">
<div class="date"><h4><?php echo $newsitem[4]; ?></h4><h5><?php echo $newsitem[3]; ?></h5></div><h3><?php echo $newsitem[1]; ?></h3>
<p><?php echo $newsitem[5];?></p>
<p><a href="<?php echo $newsitem[2]?>" title="view full post at www.chandlerfamily.org.uk (in a new window)" target="_blank">More …</a></p>
</div>
<?php
if($item > 2) break;
}
} else {
echo ‘<div class="newsitem">Sorry No Data</div>’;
}
unset ($feed);
unset ($topics);
The most important part is the pattern to match. But even that turned out to be quite straight forward, even in it did take a bit of trial and error to get it exactly right. I hope someone trying to do the same thing can use this as a starting point.
UPDATE 22nd April 2020. As I move this site over to Jekyll and Hartley
Consultants has already become a one page static site (I am retired and not
looking for more business, so its just a placeholder until the domain name
registration runs out), I am about to do the same thing again, this time using
javascript
in the client to achieve a similar outcome.
Note the stuff below is NOT working yet, but shows the approach
fetch('https://www.chandlerfamily.org.uk/feed.xml')
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
.then(data => {
const entries = data.querySelectorAll('entry');
let html = ``;
entries.forEach(el => {
const title = el.querySelector('title').innerHTML;
html += `
<article>
<h2>
<a href="${el.querySelector('link').href}" target="_blank" rel="noopener">
${el.querySelector('title').innerHTML}
</a>
</h2>
<details>
<summary>${el.querySelector('summary').innerHTML}</summary>
<p>${el.querySelector('content').innerHTML}</p>
</details>
</article>
`;
});
document.body.insertAdjacentHTML("beforeend", html);
});