If you are thinking about building your own landing page or personal portfolio which can show off all your works (your blog posts from Medium or your YouTube channel) to the world. Then, you may ask the solutions for this question “ ” Luckily, I came with this solution for you in this tutorial. It is exciting for me to share it here, and I hope you are also excited. Okay, let’s get started! How to embed Medium RSS feed or YouTube RSS feed in my websites. What we will explore in this topic: How to Embed Medium RSS Feed in a Website How to Embed YouTube RSS Feed in a Website Technologies I am using for this tutorial: ReactJS (You can use another front-end library/ framework as you like) RSS to JSON to convert RSS URL link to JSON data so that it can be fetched, then you can embed the results to your sites. (you can read their documentation ) here Material UI (this is just my personal preference for UI design in React App, you can use another front-end library based on your need) Optional: react-share dependency package to share your blog posts or videos to social media (I used Facebook for this Demo) 1. How to Embed Medium RSS Feed in a Website First, assign your variable to its string value (URL link) like this: mediumRSSFeed mediumRssFeed = “https: const //api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@YOUR_MEDIUM_PROFILE_NAME_HERE” To check if this link is correct, you can copy this URL link with your Medium Profile Name to a blank browser, then hit Enter. If you can see the JSON objects, it means this link is correct. This should be shown like this: Then, fetch your articles’ data as below: MAX_ARTICLES = ; [articles, setArticles] = useState();
useEffect( { loadArticles = () => {
fetch(mediumRssFeed, { : { : “application/json” } })
.then( res.json())
.then( data.items.filter( item.title.length > ))
.then( newArticles.slice( , MAX_ARTICLES))
.then( setArticles(articles))
.catch( .log(error));
};
loadArticles();
}, [MAX_ARTICLES]); const 10 const => () const async headers Accept ( ) => res ( ) => data ( ) => item 0 ( ) => newArticles 0 ( ) => articles ( ) => error console Because I used React Hook for this Demo, you can see that I make use of the and function to fetch this data. I set to limit the number of articles shown on my page, but you can set it to a different number as you like. For the max-count over 10, you have to signup/login to to get the API key as they said, “ ” useState() useEffect() MAX_ARTICLES=10 rss2json Count of feed items to return, default is 10 (api_key is required to use this parameter). Then, the function will help to return each item in the array of like this: map() articles, {articles
? articles.map( ( <Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={item.thumbnail}
title={item.title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{item.title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
{parseDate(item.pubDate)}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<FacebookShareButton url={item.link}>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</a>
))
: "no article shown"} ( ) => item < = = = = = = = > a className "link" href {item.link} target "_blank" rel "nofollow noopener noreferrer" title {item.title} aria-label {item.link} key {item.link} In this Demo, I used the helper function for to format the date for it easier to read. I added this function in the file name such as below: parseDate() item.pubDate util.js parseDate = { year = date.substring( , ); month = date.substring( , ); day = date.substring( , ); (month) { : day + + year; : day + + year; : day + + year; : day + + year; : day + + year; : day + + year; : day + + year; : day + + year; : day + + year; : day + + year; : day + + year; : day + + year; : ;
}
}; export const ( ) => date const 0 4 const 5 7 const 8 10 switch case "01" return " January " case "02" return " February " case "03" return " March " case "04" return " April " case "05" return " May " case "06" return " June " case "07" return " July " case "08" return " August " case "09" return " September " case "10" return " October " case "11" return " November " case "12" return " December " default return "No publication date" You can custom this format based on your need. Now your articles will be shown on your page like this. See here: Demo 2. How to Embed YouTube RSS Feed in a Website Similarly, I also used the same technology for the demo. The only different part here is the . This data should look like the below structure: RSS Feed URL link youtubeRssFeed= “https: const //api.rss2json.com/v1/api.json?rss_url=https://youtube.com/feeds/videos.xml?channel_id=YOUR_CHANNEL_ID_HERE” You also can check if it is the correct link by following the above method. Then you can fetch your YouTube videos’ data as below: MAX_VIDEOS = ; [videos, setVideos] = useState();
useEffect( { loadVideos = () => {
fetch(youtubeRssFeed, { : { : “application/json” } })
.then( res.json())
.then( data.items.filter( item.title.length > ))
.then( newVideos.slice( , MAX_VIDEOS))
.then( setVideos(videos))
.catch( .log(error));
};
loadVideos();
}, [MAX_VIDEOS]); const 10 const => () const async headers Accept ( ) => res ( ) => data ( ) => item 0 ( ) => newVideos 0 ( ) => videos ( ) => error console Once again, I also set my to limit the number of videos shown on my page. You can set it to another number based on your choice. For the max-count over 10, you have to signup/login to to get the API key as they said, “ ” MAX_VIDEOS=10 rss2json Count of feed items to return, default is 10 (api_key is required to use this parameter). Also, the function will help to return each item in the array of videos like this: map() , {videos
? videos.map( ( <Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={item.thumbnail}
title={item.title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{item.title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
{parseDate(item.pubDate)}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<FacebookShareButton url={item.link}>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</a>
)) ( ) => item < = = = = = = = > a className "link" href {item.link} target "_blank" rel "nofollow noopener noreferrer" title {item.title} aria-label {item.link} key {item.link} Now, your YouTube videos are embedded and shown similarly like this : Demo Admire your work and enjoy! That’s it for this short tutorial. I hope you found this useful. Let me know if you need further help on this. Thanks for reading, and have a fun day! Also Published On: https://juninguyen.medium.com/

Facebook

Fetch

Target

YouTube

read my other latest web development tips on Medium

A self-taught developer and a curious soul still learning and exploring the beauty of [coding]

2021 - HackerNoon Contributor of the Year - WEBSITE-DEVELOPMENT

Too Long; Didn't Read

Questions about cloud security? Get answers here.

ReactJS Tutorial: Embed Your YouTube and Medium RSS Feeds Into Your Website

Too Long; Didn't Read

Companies Mentioned

juniNguyen.

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

ReactJS Tutorial: Embed Your YouTube and Medium RSS Feeds Into Your Website

Too Long; Didn't Read

Companies Mentioned

juniNguyen.

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES