category:
Technology
Back to Blog Index
noteのRSSを取得して自分のサイトに表示する方法
noteのRSSを取得して自分のサイトに表示するには以下のようにします。
RSSのurlは以下（accountnameはアカウント名）。
https://note.com/accountname/rss
rss to json を使う。
無料プランの条件は以下。
1 Hour Update
10,000 Requests per day
25 Feeds
My Feedsでフィードを作ったら、API Keyを確認し、以下のhtmlの該当部分にAPIキーを入れる。
<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8″>
<title>RSS Feed Reader</title>
</head>
<body>
<divid=”feed-content”>
<scriptsrc=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script>
$(document).ready(function() {
constrss_url = “https://note.com/accountname/rss”;
$.ajax({
url: ‘https://api.rss2json.com/v1/api.json’,
method: ‘GET’,
dataType: ‘json’,
data: {
rss_url: rss_url,
api_key: ‘APIキーを入れる’, // rss2jsonのAPIキーを入れてください
},
success: function(data) {
constitems = data.items;
lethtml = ”;
items.forEach(function(item) {
html += `
<div class=”feed-item”>
<h2><a href=”${item.link}” target=”_blank”>${item.title}</a></h2>
<p>投稿日: ${item.pubDate}</p>
</div>
`;
});
$(‘#feed-content’).html(html);
}
});
});
</script>
</div>
<style>
.feed-item {
margin-bottom: 20px;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.feed-item h2 {
margin: 0010px0;
}
.feed-item a {
color: #333;
text-decoration: none;
}
.feed-item a:hover {
text-decoration: underline;
}
</style>
</body>
</html>