Search code examples
javascripthtmlblogger

How to get the blogger posts feed and to incorporate it to an HTML5 page?

I'm trying to get the data from the blogger and to put it on a HTML page. The code HTML code is the following:

<section class="colorlib-blog" data-section="blog">
                <div class="colorlib-narrow-content">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 col-md-pull-3 animate-box" data-animate-effect="fadeInLeft">
                            <span class="heading-meta">Read</span>
                            <h2 class="colorlib-heading">Recent Blog</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
                            <div class="blog-entry">
                                <a href="blog.html" class="blog-img"><img src="images/blog-1.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a>
                                <div class="desc">
                                    <span><small>April 14, 2018 </small> | <small> Web Design </small> | <small> <i class="icon-bubble3"></i> 4</small></span>
                                    <h3><a href="blog.html">Renovating National Gallery</a></h3>
                                    <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInRight">
                            <div class="blog-entry">
                                <a href="blog.html" class="blog-img"><img src="images/blog-2.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a>
                                <div class="desc">
                                    <span><small>April 14, 2018 </small> | <small> Web Design </small> | <small> <i class="icon-bubble3"></i> 4</small></span>
                                    <h3><a href="blog.html">Wordpress for a Beginner</a></h3>
                                    <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
                            <div class="blog-entry">
                                <a href="blog.html" class="blog-img"><img src="images/blog-3.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a>
                                <div class="desc">
                                    <span><small>April 14, 2018 </small> | <small> Inspiration </small> | <small> <i class="icon-bubble3"></i> 4</small></span>
                                    <h3><a href="blog.html">Make website from scratch</a></h3>
                                    <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 animate-box">
                            <p><a href="#" class="btn btn-primary btn-lg btn-load-more">Load more <i class="icon-reload"></i></a></p>
                        </div>
                    </div>
                </div>
            </section>

which generates the folloing part of the page:

enter image description here

I want to replace this data from this code with a blogger content ... so I'm getting the link for the blogger.

I have to get the images thumbnail of the post the name of the post the link of the posts and a description of the post to put on this html code.

The code to get the data from the blogger is the folloing:

<html>
<div id="demo"></div>
<script>
function getPosts(json) {
    var list = [];
    var data = json.feed.entry;
    for (var i = 0; i < data.length; i++) {
        var img = data[i].media$thumbnail ? "<img src'" + data[i].media$thumbnail.$t + "'>" : "";
        list.push("<div><a href='"+ data[i].link.pop().href + "'>" + img + data[i].title.$t + "</a></div>");
    }
    document.getElementById('demo').innerHTML = list.join('');

}
</script>

<script src="https://www.blogger.com/feeds/614640065733671379/posts/default?alt=json&max-results=3&callback=getPosts"></script>
</html>

But it gives just the links of the posts as this:

teste3
teste 2
Teste

Thanks very much

Solution

  • At first, you need to allow full feed in order to get the third party image and post content

    Go to Settings > Others > Site feed > Allow Blog Feed and select Full then Save Settings

    Then try this: (require full feed)

    <!DOCTYPE html>
<html>
<head>
<style>
#demo {
	display: flex;
	flex-wrap: wrap;
}
.feed-post {
	padding: 10px;
	width: 30%;
    word-break: break-word;
}
.feed-post a {
	text-decoration: none;
}
.feed-post img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}
</style>
</head>
<body>

<div id="demo"></div>

<script>
function getPosts(json) {
    var list = [];
    var data = json.feed.entry;
    for (var i = 0; i < data.length; i++) {
        
        var title = "<h3>" + data[i].title.$t + "</h3>";
        var link = data[i].link.pop().href;
        var summary = "<p>" + data[i].content.$t.replace(/<\/?[^>]+(>|$)/g, "").substr(0, 120) + "</p>";
        if (data[i].media$thumbnail) {
        	var img = "<img src='" + data[i].media$thumbnail.url + "'>";
        } else {
        	var doc = new DOMParser().parseFromString(data[i].content.$t, "text/html");
        	var imgtag = doc.querySelector('img');
        	if (imgtag) {
        		var img = "<img src='" + imgtag.src + "'>";
        	} else {
        		var img = "";
        	}
        	
        }

        list.push("<div class='feed-post'><a href='"+ link + "'>" + img + title + "</a>" + summary + "</div>");
    }
    document.getElementById('demo').innerHTML = list.join('');

}
</script>

<script src="https://www.blogger.com/feeds/614640065733671379/posts/default?alt=json&max-results=3&callback=getPosts"></script>

</body>
</html>