Правильная структура вашего кода должна выглядеть следующим образом: вы забыли поместить теги скрипта и стиля для браузера, чтобы интерпретировать
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div id='linkedin-feed'>
<div id='linkedin-user'></div>
</div>
<script type="text/javascript">
const url = 'https://linkedin-feed.richdevelops.com'
const proxyurl = "https://cors-anywhere.herokuapp.com/";
fetch(proxyurl + url)
.then(response => response.json())
.then(data => {
// console.log(data) // Heres the feed array
let userImage = data[0].profileImageSource
let userDescription = data[0].profileDescription
let userName = data[0].profileName
let user = `
<div>
<img src='${userImage}'></img>
<p>${userName}</p>
<p>${userDescription}</p>
</div>
`
let linkedinUser = document.querySelector('#linkedin-user')
linkedinUser.innerHTML = user
let feed = ''
for (item of data){ //Itterate through each post.
let title = item.title
let subTitle = item.subTitle
let imageSource = item.imageSource
let postUrl = item.postUrl
let postedUrl = item.postedUrl
let body = item.body
if (item.type==='link'){
feed = `
<h3 class='title'>${title}</h3>
<h4 class='subtitle'>${subTitle}</h4>
<div class='image'>
<img src='${imageSource}'></img></div>
<a href='${postUrl}'><p>Linkedin Post Link</p></a>
<a href='${postedUrl}'><p>Posted Url</p></a>
`
} else if (item.type==='post'){
feed = `
<div class='subtitle'>${body}</div>
<a href='${postUrl}'><p>Linkedin Post Link</p></a>
`
}
let div = document.createElement('div')
div.classList.add('feed-item')
div.innerHTML = feed
let linkedinFeed = document.querySelector('#linkedin-feed')
linkedinFeed.appendChild(div)
}
})
.catch(error => console.error(error))
</script>
<style type="text/css">
/* CSS CODE in a seperate file */
.feed-item {
border: 1px black solid;
max-width: 600px;
padding: 10px;
}
img{max-width:150px;}
</style>
<footer>
</footer>
</body>
</html>
Теперь вам просто нужно добавить любой виджет, который принимаетhtml следующий код:
<div id='linkedin-feed'>
<div id='linkedin-user'></div>
</div>
<script type="text/javascript">
const url = 'https://linkedin-feed.richdevelops.com'
const proxyurl = "https://cors-anywhere.herokuapp.com/";
fetch(proxyurl + url)
.then(response => response.json())
.then(data => {
// console.log(data) // Heres the feed array
let userImage = data[0].profileImageSource
let userDescription = data[0].profileDescription
let userName = data[0].profileName
let user = `
<div>
<img src='${userImage}'></img>
<p>${userName}</p>
<p>${userDescription}</p>
</div>
`
let linkedinUser = document.querySelector('#linkedin-user')
linkedinUser.innerHTML = user
let feed = ''
for (item of data){ //Itterate through each post.
let title = item.title
let subTitle = item.subTitle
let imageSource = item.imageSource
let postUrl = item.postUrl
let postedUrl = item.postedUrl
let body = item.body
if (item.type==='link'){
feed = `
<h3 class='title'>${title}</h3>
<h4 class='subtitle'>${subTitle}</h4>
<div class='image'>
<img src='${imageSource}'></img></div>
<a href='${postUrl}'><p>Linkedin Post Link</p></a>
<a href='${postedUrl}'><p>Posted Url</p></a>
`
} else if (item.type==='post'){
feed = `
<div class='subtitle'>${body}</div>
<a href='${postUrl}'><p>Linkedin Post Link</p></a>
`
}
let div = document.createElement('div')
div.classList.add('feed-item')
div.innerHTML = feed
let linkedinFeed = document.querySelector('#linkedin-feed')
linkedinFeed.appendChild(div)
}
})
.catch(error => console.error(error))
</script>
<style type="text/css">
/* CSS CODE in a seperate file */
.feed-item {
border: 1px black solid;
max-width: 600px;
padding: 10px;
}
img{max-width:150px;}
</style>
но вы можете добавить css во внешний файл css и js в файл javascript и просто добавить html-код внутри виджета, который тоже будет работать