Generate an RSS feed for Pinterest

Informing your audience about fresh information on your website is easy with RSS feeds. They enable visitors to subscribe to the information on your website and receive updates in their preferred RSS reader. We'll go over how to include an RSS feed into a Next.js project in this article.

Let's first create a brand-new Next.js project. If you're unfamiliar with Next.js, you can look up instructions on how to get started in the official documentation. Installing various npm packages will be necessary once your project is set up in order to assist you in creating the RSS feed.

However, I find it more useful to build the generator myself, this way I don't have issues with updating dependencies or not using 99% of the contents of the package.

To create a basic RSS-feed we need the following structure in our outgoing XML-file.

"rss" root element
"channel" element that contains information about the feed
"title" and "link" elements for the feed title and website link
"description" element for a brief summary of the feed's content
"item" element for each individual item or entry in the feed
"title" and "link" elements for the entry title and a link to the full article
"description" element for a brief summary of the entry's content.

Putting all this together our final file should look something like this:

<rss version="2.0">
  <channel>
    <title>Feed Title</title>
    <link>http://www.example.com</link>
    <description>A description of the feed's content</description>
    <item>
      <title>Item 1 Title</title>
      <link>http://www.example.com/item1</link>
      <description>A brief summary of item 1</description>
    </item>
    <item>
      <title>Item 2 Title</title>
      <link>http://www.example.com/item2</link>
      <description>A brief summary of item 2</description>
    </item>
  </channel>
</rss>

Before we begin assembling our RSS-Feed function I build a utility function that escapes characters that we are not allowed to use in XML-files. It looks something like this:

// htmlEscaper.js

const { replace } = "";

// escape
const es = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
const ca = /[&<>'"]/g;

const esca = {
	"&": "&amp;",
	"<": "&lt;",
	">": "&gt;",
	"'": "&#39;",
	'"': "&quot;",
};
const pe = (m) => esca[m];

// Safely escape HTML entities such as `&`, `<`, `>`, `"`, and `'`.
// @param {string} es the input to safely escape
// @returns {string} the escaped input, and it **throws** an error if
// the input type is unexpected, except for boolean and numbers,
// converted as string.

export const escape = (es) => replace.call(es, ca, pe);

Next to this file I also created a file for all the siteMetadata that I want to add, so I make it easier for myself to change the contents in the future.

// siteMetadata.js

const siteMetadata = {
	title: "lujo",
	headerTitle: "lujo",
	description: "My personal blog about the things I learn on the web. It is a place where I test new things and share my thoughts about them.",
	language: "en-us",
	siteUrl: "https://lujo.dev",
};

So we start with creating a new file for our RSS feed generator function. I build a basic version for this, but of course, you can add a lot of additional information to the feed. A good idea is also to look at other blogs in your niche and see which additional XML-Tags they provide that you could add to your feed too.

// generate-rss.js

import siteMetadata from "./siteMetadata";
import { escape } from "./htmlEscaper";

const generateRssItem = (post) => `
  <item>
    <guid>${siteMetadata.siteUrl}/blog/${post.slug}</guid>
    <title>${escape(post.title)}</title>
    <link>${siteMetadata.siteUrl}/blog/${post.slug}</link>
    ${post.summary && `<description>${escape(post.summary)}</description>`}
    <pubDate>${new Date(post.date).toUTCString()}</pubDate>
    ${post.tags && post.tags.map((t) => `<category>${t}</category>`).join("")}
    ${post.image && `<enclosure ur="${post.image.startsWith("http") ? escape(post.image) : siteMetadata.siteUrl + post.image}" typ="image/jpeg" />`}
  </item>
`;

const generateRss = (posts, page = "feed.xml") => `
  <rss versio="2.0" xmlns:ato="http://www.w3.org/2005/Atom" xmlns:medi="http://search.yahoo.com/mrss/">
    <channel>
      <title>${escape(siteMetadata.title)}</title>
      <link>${siteMetadata.siteUrl}/blog</link>
      <description>${escape(siteMetadata.description)}</description>
      <language>${siteMetadata.language}</language>
      <lastBuildDate>${new Date(posts[0].date).toUTCString()}</lastBuildDate>
      <atom:link hre="${siteMetadata.siteUrl}/${page}" re="self" typ="application/rss+xml"/>
      ${posts.map(generateRssItem).join("")}
    </channel>
  </rss>
`;
export default generateRss;

As a result, including an RSS feed into a Next.js project is a simple process that can tremendously benefit your audience by informing them whenever new information is added to your website. You may quickly add an RSS feed to your Next.js project by using the instructions provided in this post.

From here there is nothing more to do than copy the link to your RSS-Feed and save it in your Pinterest profile.

How to bulk upload pins

To bulk upload pins on Pinterest you need a business account with Pinterest. From there you go to Settings -> Bulk create Pins and under Auto-publish enter the URL of your XML-Feed. If you did everything correctly, it should look something like this: