Интеграция блога
Так получилось, что я не стал использовать CMS на своем сайте ввиду отсутствия явной необходимости, а кроме того, поскольку предпочитаю не использовать WYSIWYG редакторы, мне проще и понятней использовать Atom (представлен во вкусностях). Однако, мой сайт имеет собственный дизайн, кроме того, для того, чтобы фоновая музыка не прерывалась во время перехода из страницы на страницу я переходы реализовал с помощью технологии AJAX. Как именно я это сделал, я расскажу в отдельном посте. Итак, идеальным решением в данной ситуации является комбинация AJAX+JSON. К счастью, платформа Google Blogger располагает API для получения нужной информации в формате JSON. Опять же, учитывая то, что создавать записи я буду непосредственно в Bogger, у меня нет необходимости использовать весь спектр функциональных возможностей Blogger API через OAuth2.
Итак, приступим. Прежде всего нам необходим ключ API. Для этого создаем его из консоли API Google (необходима учетная запись Google). Там находим ссылку "Get a key". Теперь, у нас получится осуществить запрос к Google Blogger через URL вида https://www.googleapis.com/blogger/v3/blogs/<ID блога>/posts?key=<ключ API>. ID блога можно получить из адресной строки во время создания поста. Там среди параметров URL будет blogID=<ID блога>.
Результат подобного запроса будет выглядеть примерно так:
{
"kind": "blogger#postList",
"items": [
{
"kind": "blogger#post",
"id": "5464670857505990994",
"blog": {
"id": "7611486589141024871"
},
"published": "2017-08-10T02:54:00-07:00",
"updated": "2017-08-10T03:21:16-07:00",
"etag": "\"h3phi6z0oROkI1XWpXsALUFHLuA/dGltZXN0YW1wOiAxNTAyMzYwNDc2NzMxCm9mZnNldDogLTI1MjAwMDAwCg\"",
"url": "http://alexey-studio.blogspot.com/2017/08/blog-post.html",
"selfLink": "https://www.googleapis.com/blogger/v3/blogs/7611486589141024871/posts/5464670857505990994",
"title": "Публикация сайта",
"content": "Итак, свершилось! \u003ca href=\"http://alexey-studio.ru/\"\u003eМой сайт\u003c/a\u003e сегодня увидит свет. …",
"author": {
"id": "g110346839629770518902",
"displayName": "Алексей Котышков",
"url": "https://www.blogger.com/profile/02638834574158231073",
"image": {
"url": "//lh6.googleusercontent.com/-qmtGrxa5fPo/AAAAAAAAAAI/AAAAAAAAAu4/6g3kTjON5Kc/s35-c/photo.jpg"
}
},
"replies": {
"totalItems": "0",
"selfLink": "https://www.googleapis.com/blogger/v3/blogs/7611486589141024871/posts/5464670857505990994/comments"
},
"labels": [
"Веб-разработка"
]
}
],
"etag": "\"h3phi6z0oROkI1XWpXsALUFHLuA/MjAxNy0wOC0xMVQxNjowMzo1Mi41NjRa\""
}
Итак, у нас есть источник данных и сами данные, осталось только вставить их куда нужно. Для этого воспользуемся функцией jQuery, осуществляющей Ajax-запрос:
$.get({
url: <наш адрес>,
dataType: 'json',
success: function(data /*в переменную data мы получим результат запроса, и обработаем его в функции из параметра success*/){
posts=data.items; //Для удобства я использовал переменную posts, куда собрал посты из запроса
tempHtml=''; //Сюда мы будем собирать HTML-код постов
for(f=0; f<posts.length; f++){ //Цикл обработки постов
tempHtml+=posts[f].title; //Заголовок поста
tempHtml+=posts[f].content; //Тело поста
}
$('#id_контейнера_для_блога').html(tempHtml);
}
});
Комментарии
Отправить комментарий