Embed Helio News

[sylvain]

I have think to create a new topic about some feature that i think would be great for heliohost users. Is that they have the possibility to embed some html codes into a webpage; that auto update of course. This embed codes would show some "subject title" in style (bold) and under some brief description (not bold); then under it some link as (more infos here).

So like that the users that go on some website on heliohost, can see a page that have some heliohost and helionet recent news. Like example (server down/maintenance info/donate infos/changes as updates on the server/etc.). So the users that go see some website hosted with you, can see the latest news.

It could be in the footer of the heliohost and helionet webpages. I suggest that the link would be called: "Embed Helio News". I wonder if this feature does exist? If not it could be a great idea and thing to add for users.

Thanks for your time.

[Krydos]

If you go to https://heliohost.org and scroll down about 2 inches you can see that it already exists 

Also if you login the latest news post is shown in your dashboard too.

[KazVee]

On the new Wiki, there are 2 links in the footer to see latest news, too. The Announcements link goes to the forum's News section, and there's also an RSS Feed link. I don't use an RSS reader myself but I think this link could be added into an existing RSS reader to get the latest HelioHost news along with the other news topics people follow in their reader.

If you try to use the RSS feed, please let us know how it works for you, it'd be great to have another example to show people how they can stay up to date with what's happening at HelioHost. 🙂

[sylvain]

Thanks for the url RSS Feed. With the online free RSS.app i could create some auto-responsif embed codes and url for the Heliohost News.

The url is: https://rss.app/embed/v1/carousel/hy2T84PN9L1LmouG

[MoneyBroz]

There is also an RSS feed available for the news section of this forum. you can find the button at the bottom of the pages.

Edited Sunday at 10:34 PM by MoneyBroz
Typo

[sylvain]

Thanks for letting know. It not only help my self, but could help other heliohost users. 👍 Also if some peoples search the forum with the word like: "embed news" i think they should find this discussion and find the rss feed indications. I just noted at the present time that this rss.app is a trial of like 5 days. So i wonder if there is peoples that know some free rss to embed with basic things with no trial as time limit.

My new website that i'm building (not online at the present time) have a page that give the link to this rss.app url. So like that users could simply click the link and see the heliohost news. But i think that i must abandon the embed radio that peoples suggested for the site, that i find sad for me and sad for the peoples request. I think more to maybe put some free embed weather widget for the users, that simply locate the localisation and show the weather of the place there are; but i wonder if this free widget exist to embed?

Edited Sunday at 11:31 PM by sylvain

[KazVee]

I don't know about free RSS readers, but I did a quick test with a php file and got a test website up with the latest news inside a footer. I limited it to the last 5 news posts since it seemed like enough, but this could be edited. This may be an option for you, since it doesn't need any RSS reader service? This is the little blue footer at the bottom:

To build this, I made an .htaccess file with this inside:

<IfModule mod_headers.c>
    SetEnvIf Origin "https://my-website.heliohost.us" CORS_ALLOWED
    Header set Access-Control-Allow-Origin "https://helionet.org" env=CORS_ALLOWED
    Header set Access-Control-Allow-Methods "GET" env=CORS_ALLOWED
    Header set Access-Control-Allow-Headers "Content-Type" env=CORS_ALLOWED
</IfModule>

Then I made a get-feed.php file with this inside:

<?php
$cacheFile = 'rss_cache.xml';
$cacheTime = 1800;

if (@file_exists($cacheFile) && (filemtime($cacheFile) + $cacheTime > time())) {
    $response = file_get_contents($cacheFile);
} else {
    $response = @file_get_contents('https://helionet.org/index/rss/1-news.xml');
    if ($response === FALSE) {
        die('Error fetching the RSS feed.');
    }
    file_put_contents($cacheFile, $response);
}

header('Content-Type: application/rss+xml');
echo $response;
?>

And usually I'd move the styling out into a separate file, but for now it's all inside index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website with News Footer</title>
    <style>
      body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      margin: 0;
      padding: 0;
      }
      .content {
      flex-grow: 1;
      padding: 0 20px;
      }
      footer {
      background-color: #d0fefe;
      padding: 10px;
      text-align: center;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
      font-size: 16px;
      }
      #rss-news {
      display: flex;
      flex-direction: row;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 10px;
      }
      #rss-news div {
      text-align: center;
      font-size: 14px;
      line-height: 1.5;
      }
      #rss-news a {
      text-decoration: none;
      color: #0073e6;
      font-weight: bold;
      font-size: 14px;
      }
      #rss-news a:hover {
      text-decoration: underline;
      }
      #rss-news small {
      color: #666;
      font-size: 12px;
      }
      h4 {
      font-size: 16px;
      margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>Welcome to My Website</h1>
      <p>This is the main content of the website.</p>
    </div>
    <footer>
      <h4>Latest HelioHost News</h4>
      <div id="rss-news">
      </div>
    </footer>
    <script>
      const rssUrl = 'get-feed.php';
      
      fetch(rssUrl)
          .then(response => response.text())
          .then(data => {
              const parser = new DOMParser();
              const xmlDoc = parser.parseFromString(data, "application/xml");
              const items = xmlDoc.querySelectorAll("item");
              const newsContainer = document.getElementById("rss-news");
      
              let newsHTML = "";
              items.forEach((item, index) => {
                  if (index < 5) {
                      const title = item.querySelector("title").textContent;
                      const link = item.querySelector("link").textContent;
                      const pubDate = item.querySelector("pubDate").textContent;
      
                      const formattedDate = new Date(pubDate).toLocaleString("en-US", {
                          year: 'numeric',
                          month: 'short',
                          day: 'numeric',
                          hour: '2-digit',
                          minute: '2-digit'
                      });
      
                      newsHTML += `
                          <div>
                              <a href="${link}" target="_blank">${title}</a>
                              <br><small>${formattedDate}</small>
                          </div>
                      `;
                  }
              });
      
              newsContainer.innerHTML = newsHTML;
          })
          .catch(error => {
              console.error('Error fetching RSS feed:', error);
              const newsContainer = document.getElementById("rss-news");
              newsContainer.innerHTML = "<p>Unable to load the latest news. Please try again later.</p>";
          });
    </script>
  </body>
</html>

You could probably make it look a lot better but I liked the idea of a "latest news" embed in a footer for those who wanted to have it on their page!

[sylvain]

Me what i have memorize is the rssdog. Here is the embed html codes i have made with it:

<iframe width="250" height="250" class="rssdog" src="https://www.rssdog.com/index.php?url=https%3A%2F%2Fhelionet.org%2Findex%2Frss%2F1-news.xml&mode=html&showonly=&maxitems=5&showdescs=0&desctrim=0&descmax=0&tabwidth=80%25&excltitle=1&showdate=1&nofollow=1&utf8=1&linktarget=_blank&bordercol=%23d4d0c8&headbgcol=%23999999&headtxtcol=%23ffffff&titlebgcol=%23f1eded&titletxtcol=%23000000&itembgcol=%23ffffff&itemtxtcol=%23000000&ctl=0"></iframe>

 

[KazVee]

I'll check it out, thanks for sharing! RSS feeds are one of those things I heard about and thought it'd be cool to use but then just never did. 😄 I didn't really even know they were still popular, so maybe I'll finally get one set up for myself. 

[sylvain]

i have got to say that your way moneybro i believe its way better, because it dont need some external website. But im no expert as many moderators and administrators. I just try to find things online that are free and mostly legal. What i think would be good that maybe admins and moderators could create is some kind of heliohost rss embed code generator. Maybe similar as rssdog. Some kind of free widget for all users, as it give users and viewers some news about heliohost.

Youre result is great, would be good in the footer that display the news. Also what i think be great, would be small as a news widget i think is some kind of iframe that would show "3" horizontal news lines (but first line clickable news above the second line clickable news, and second line news above the third line news) this into some iframe. But theses 3 clickable news line (that show the title bold, and date not bold), would have the possibility to show the next 3 horizontal clickable news. Why this type of heliohost news player? To be compatible with the different "displays" and small embed section in a page (desktop/laptop/smart phone).The user would choose if the 3 horizontal "latest" news (each above the other), would show like the 3 next latest news. How they would appear?  A little like the msn bing news apear (with the arrows) that make possible to scroll to the next latest later news. The users would see the heliohost 3 clickable recent link news that auto change (scrooling into a iframe), the viewers could then if they want click the arrows above (next news/previous news) as msn bing. If the user dont scroll the news with the arrows (like 10 seconds "each part news") then it auto scroll again. The link directly to the helionet informations. I think it is a good idea, but i wonder what you might think?

[sylvain]

I'm glad to help KazVee, i always try to do good things to and for the peoples. But as i say, if i would not have good peoples with good intentions for me; i would not be able to have and do great good things. As i say to give good things to peoples, and leave good footprints into peoples lives.