Как реализовать функцию «Поделиться фото в Вконтакте»?

Ссылка скопирована
1 ответ

Сейчас ситуация такая: есть сайт на Nextjs/App router для скачивания покупки фото. Планирую внедрить функцию поделиться фото в вконтакте для авторизованного пользователя. Для обхода проблем с авторизацией сделал роут /public/vk-share?share_image_url={{url}}.

По вводным: расскидал следующие мета данные в файле страницы /public/vk-share:

export async function generateMetadata({ searchParams, }: Props): Promise<Metadata> { const imageUrl = (await searchParams)[ EnPublicVkShareQueryParams.SHARE_IMAGE_URL ] return { title: 'Поделиться фото', description: 'Фото для публикации ВКонтакте', openGraph: { title: 'Поделиться фото', description: 'Фото для публикации ВКонтакте', url: `https://${ENV_FRONTEND_DOMAIN}${ROUTES.PUBLIC_VK_SHARE({ [EnPublicVkShareQueryParams.SHARE_IMAGE_URL]: imageUrl }).toString()}`, siteName: 'React app', images: [ { url: imageUrl, width: 383, height: 253, alt: 'Shared image', }, ], type: 'article', }, other: { image_src: imageUrl, }, } }

По вводным: в защищенной авторизацией странице есть ссылка поделиться фото в вк:

<Link href={`https://vk.com/share.php?url=https://${ENV_FRONTEND_DOMAIN}/public/vk-share?share_image_url=${url}`} >...</Link>

Сейчас ситуация такая: ссылка кидает на страницу вк "Поделиться ссылкой". Но при отправке ссылки не отображается картинка

Сейчас ситуация такая: скорее всего я использую не тот api вк для отправки картинки, и скорее всего не так использую мета-теги но не могу найти информацию для этой функции в интернете. Был бы признателен если кто-то рассказал как это делать правильно.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Mobile-редакция Ответ

В Next.js “поделиться фото во ВКонтакте” обычно реализуется не загрузкой файла напрямую из браузера, а через публичную страницу с корректными Open Graph-метатегами и ссылку на VK share. ВКонтакте сам подтягивает заголовок, описание и изображение по URL страницы.

Минимально нужно, чтобы страница с фото была доступна без авторизации, отдавала абсолютные URL и имела метатеги:

&lt;meta property="og:title" content="Название фото"&gt;
&lt;meta property="og:description" content="Короткое описание"&gt;
&lt;meta property="og:image" content="https://site.ru/images/photo.jpg"&gt;
&lt;meta property="og:url" content="https://site.ru/photo/123"&gt;

&lt;meta property="og:title" content="Название фото"&gt; &lt;meta property="og:description" content="Короткое описание"&gt; &lt;meta property="og:image" content="https://site.ru/images/photo.jpg"&gt; &lt;meta property="og:url" content="https://site.ru/photo/123"&gt;

Ссылка для шаринга может быть такой:

const shareUrl = 'https://vk.com/share.php?url=' + encodeURIComponent(pageUrl);

const shareUrl = 'https://vk.com/share.php?url=' + encodeURIComponent(pageUrl);

В App Router метаданные лучше задавать через generateMetadata, в Pages Router — через next/head. Главное, чтобы HTML с og-тегами приходил на серверном рендере, а не добавлялся только после загрузки клиента. Боты соцсетей не всегда корректно исполняют клиентский JavaScript.

Если вы хотите именно загрузить фото в альбом ВК от имени пользователя или сообщества, это уже другой сценарий: OAuth, права photos, получение upload server, POST файла, сохранение через API. Для обычной кнопки “поделиться” это не нужно и избыточно.

Проверьте также размер картинки. Для VK лучше использовать нормальное изображение 1200×630 или близкое соотношение, доступное по HTTPS без защиты от хотлинка. Если картинка не обновляется, очистите кэш предпросмотра ВК или измените URL изображения, например добавив версию файла.

Итог: для кнопки “поделиться фото” делайте публичную страницу фото + Open Graph + vk.com/share.php. Для загрузки фото в VK нужна отдельная OAuth/API-логика, и её не стоит смешивать с обычным sharing.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно