Как реализовать функцию «Поделиться фото в Вконтакте»?
Сейчас ситуация такая: есть сайт на 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 вк для отправки картинки, и скорее всего не так использую мета-теги но не могу найти информацию для этой функции в интернете. Был бы признателен если кто-то рассказал как это делать правильно.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
В Next.js “поделиться фото во ВКонтакте” обычно реализуется не загрузкой файла напрямую из браузера, а через публичную страницу с корректными Open Graph-метатегами и ссылку на VK share. ВКонтакте сам подтягивает заголовок, описание и изображение по URL страницы.
Минимально нужно, чтобы страница с фото была доступна без авторизации, отдавала абсолютные URL и имела метатеги:
<meta property="og:title" content="Название фото"> <meta property="og:description" content="Короткое описание"> <meta property="og:image" content="https://site.ru/images/photo.jpg"> <meta property="og:url" content="https://site.ru/photo/123">
Ссылка для шаринга может быть такой:
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.