Реализовал такую историю для сайта бф-гравитация.рф, куда летят посты из группы фонда
https://vk.com/bf_gravitas
Что нужно сделать:
1. Создать приложение типа «Сайт» в vk.com/apps?act=manage, чтобы получить Сервисный ключ доступа.
2. Добавить на страницу блок T123 и вставить код ниже,
(Не забудьте подставить свой сервисный ключ и ID группы):
<style>
/* Настройки сетки */
.vk-feed-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 колонки */
gap: 30px;
max-width: 1200px;
margin: 0 auto 60px auto; /* Отступы */
}
/* Карточка поста */
.vk-card {
background: #ffffff;
border: 1px solid #e2e2e2;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
height: 100%;
transition: transform 0.2s;
}
.vk-card:hover { transform: translateY(-5px); }
/* Изображение */
.vk-card-img {
width: 100%;
height: 250px;
background-size: cover;
background-position: top center;
background-color: #f4f4f4;
position: relative;
}
/* Иконка Play для видео */
.vk-play-icon {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 50px; height: 50px;
background: rgba(0,0,0,0.6);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.vk-play-icon::after {
content: ''; display: block;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid #fff;
margin-left: 4px;
}
/* Текст и подвал */
.vk-card-content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.vk-card-text {
font-family: 'Arial', sans-serif; /* Или шрифт вашего сайта */
font-size: 15px; color: #333; line-height: 1.5;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 5; /* Ограничение кол-ва строк */
-webkit-box-orient: vertical;
overflow: hidden;
}
.vk-card-footer {
margin-top: auto; padding-top: 15px; border-top: 1px solid #eee;
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: #888;
}
.vk-card-link {
background-color: #5181b8; color: #fff !important;
padding: 8px 16px; border-radius: 4px; text-decoration: none !important;
}
/* Адаптив */
@media (max-width: 960px) { .vk-feed-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vk-feed-grid { grid-template-columns: 1fr; } }
</style>
<div id="vk-feed-root" class="vk-feed-grid">
<div style="grid-column: 1/-1; text-align: center; color: #999; padding: 40px;">Загрузка новостей...</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// === НАСТРОЙКИ ===
// Вставьте сюда ваш Сервисный ключ доступа из настроек приложения VK
var token = 'ВАШ_СЕРВИСНЫЙ_КЛЮЧ';
// ID группы обязательно с минусом
var groupId = '-00000000';
var count = 6;
// ================
$.ajax({
url: 'https://api.vk.com/method/wall.get',
data: {
access_token: token, owner_id: groupId, count: count, v: '5.131', extended: 1
},
dataType: 'jsonp',
success: function(data) {
var posts = data.response.items;
var html = '';
if (!posts || posts.length === 0) { $('#vk-feed-root').html(''); return; }
posts.forEach(function(post) {
var imgUrl = '';
var isVideo = false;
// Поиск лучшего изображения или обложки видео
if (post.attachments && post.attachments.length > 0) {
var photoObj = post.attachments.find(x => x.type === 'photo');
if (photoObj) {
var sizes = photoObj.photo.sizes;
var bestSize = sizes.find(s => s.type === 'z') || sizes.find(s => s.type === 'y') || sizes.pop();
imgUrl = bestSize.url;
} else {
var videoObj = post.attachments.find(x => x.type === 'video');
if (videoObj) {
isVideo = true;
if (videoObj.video.image) imgUrl = videoObj.video.image[videoObj.video.image.length - 1].url;
}
}
}
var imgHtml = imgUrl ?
'<div class="vk-card-img" style="background-image: url(' + imgUrl + ')">' + (isVideo ? '<div class="vk-play-icon"></div>' : '') + '</div>' : '';
var date = new Date(post.date * 1000).toLocaleDateString('ru-RU');
var postLink = 'https://vk.com/wall' + post.owner_id + '_' + post.id;
var cleanText = post.text.replace(/<br>/g, '\n');
html += '<div class="vk-card">' + imgHtml + '<div class="vk-card-content"><div class="vk-card-text">' + cleanText + '</div><div class="vk-card-footer"><span>' + date + '</span><a href="' + postLink + '" target="_blank" class="vk-card-link">' + (isVideo ? 'Смотреть' : 'Читать') + '</a></div></div></div>';
});
$('#vk-feed-root').html(html);
},
error: function() { $('#vk-feed-root').html('Ошибка загрузки.'); }
});
});
</script>
Настраиваем дизайн и нужное количество колонок в соответствии с дизайном сайта и готово
Простой
Простой
