Imagino que se você caiu aqui nesse post é porque já tem uma conta do google um um blog hospedado no serviço
blogger, então vou direto ao assunto que é a integração dessa ferramenta do google para dentro de seu site via a API disponibilizada pela própria Google
A minha intenção não é explicar como funciona cada parte da API, para isso o google já disponibiliza a documentação que é bem completa, minha intenção é disponibilizar um exemplo de como aplicar no seu site.
Procurei ser o mais simples e próximo dos próprios exemplos que tem na documentação da API.
Todo o script foi desenvolvido em javascript puro para mais fácil utilização do código.
No script tem quatro funções:
- loadposts: Carrega todos os posts para a página principal;
- loadcontent: Carrega o conteúdo do post na página;
- searchload: Carrega em uma lista todos os posts com o termo da pesquisa;
- checkEnterClick: Verifica as teclas até que o "enter" seja pressionado e faz a busca;
<!DOCTYPE html>
<html>
<body onload="loadposts()">
<div><input type="text" id="pesquisar" name="pesquisar" placeholder="Pesquisar..." onkeypress='checkEnterClick(event)'> <a href="#" onclick="searchload()">Pesquisar</a> <a href="#" onclick="loadposts()">Limpar</a></div>
<p id="demo"></p>
<script>
blogId = "000000000000000000";
key = "aaaaa0000000aaaaaaaaaaaaaaa0_00000000aaaaaaaaaaa";
function loadposts(){
document.getElementById("demo").innerHTML = "";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
for(x=0;x<=10;x++){
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML+"<br><br><a href=\"#\" onclick=\"loadcontent('"+myObj.items[x].id+"')\">"+myObj.items[x].title+"</a> <br> <img src=\""+myObj.items[x].images[0].url+"\"> <br> <img src=\""+myObj.items[x].author.image.url+"\">"+myObj.items[x].author.displayName;
}
}
};
xmlhttp.open("GET", "https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/posts?maxPosts=3&key="+key+"&fetchImages=true", true);
xmlhttp.send();
}
function loadcontent(id){
document.getElementById("demo").innerHTML = "";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = "<a href='#' onclick='loadposts()'>Voltar</a><br>"+myObj.title+"<br>"+myObj.content+"<br>"+myObj.updated+"<br> <img src=\""+myObj.author.image.url+"\">"+myObj.author.displayName;
}
};
xmlhttp.open("GET", "https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/posts/"+id+"?key="+key, true);
xmlhttp.send();
}
function searchload(){
document.getElementById("demo").innerHTML = "";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
for(x=0;x<=10;x++){
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML+"<br><br><a href=\"#\" onclick=\"loadcontent('"+myObj.items[x].id+"')\">"+myObj.items[x].title+"</a> "+ myObj.items[x].updated +" "+myObj.items[x].author.displayName;
}
}
};
queryterms = document.getElementById("pesquisar").value;
xmlhttp.open("GET", "https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/posts/search?q="+queryterms+"&maxPosts=3&key="+key+"&fetchImages=true", true);
xmlhttp.send();
}
function checkEnterClick(e){
if(e.keyCode == 13){
searchload();
}
}
</script>
</body>
</html>
O post é simples, mas como não havia encontrado um exemplo completo na internet acredito que esse script pode ajudar quem estiver com duvidas em aplicar a API do blogger no seu site.
fonte:
https://developers.google.com/blogger/docs/3.0/using
Espero ter ajudado, qualquer duvida deixe um comentário.
Obrigado e até a próxima
.
