Vkontakte ru share php url

Кнопки «Поделиться», «Tweet» и «Share» с собственным дизайном

Начну с того, что дизайн — не единственная причина, по которой следует использовать собственные кнопки социальных сетей. О причинах написано в отдельном посту, поэтому сейчас в это углубляться не будем.

Рассмотрим создание кнопки для каждого социального сервиса по-отдельности. В качестве тестируемой страницы у нас будет стандартный пост WordPress — «Привет, мир!».

Twitter

Начнём с несложного примера:

Текст и URL — два основных параметра, конечно, их вполне достаточно для создания кнопки, хэштеги например можно спокойно добавлять в переменную $text, тем не менее давайте рассмотрим полный список параметров:

url Абсолютный URL с HTTP или HTTPS, будет автоматически сокращён через t.co. Также рекомендуется пропускать его через php-функцию urlencode() . text Текст твита. Должен быть в кодировке UTF-8 и состоять не более чем из 140 символов (с учётом ссылки и хэштегов!). После нажатия на кнопку «Твитнуть» у пользователя будет возможность отредактировать этот текст — также имейте это ввиду. hashtags Список #хэштегов через запятую без символа «#». via Через что был опубликован твит? Информация будет добавлена в конце твита. Например с помощью @twitterfeed. В передаваемом параметру значении символ «@» указывать не нужно. in_reply_to Ответ на другой твит. В качестве значения параметра нужно указать ID твита, на который нужно ответить. Имя автора, на чей твит мы хотим написать ответ, будет автоматически добавлено в начало твита. related Укажите через запятую аккаунты в Твиттере, которые будет автоматически рекомендовано зафолловить пользователю после того, как он запостит твит.

Раньше я использовал php-функцию для преобразования ссылок через bit.ly, но это значительно тормозило скорость загрузки страниц и я решил не сокращать ссылки на своём блоге.

Язык во всплывающем окошке будет таким же, как в профиле посетителя вашего сайта в твиттере.
Ещё один пример:

При нажатии на кнопку «Твитнуть» получаем следующее:

Facebook

p[title] Заголовок поста. p[summary] Анонс поста. p[url] Ссылка на пост. Не забываем про функцию urlencode() . p[images][0] Основное изображение поста, вы также можете перечислить дополнительные изображения в параметрах p[images][1] , p[images][2] и так далее. Хотел бы заметить, что если вы защищаете изображения от хотлинков через .htaccess, то надо будет добавить все эти социальные сети в исключения, иначе ваши картинки просто не будут отображаться.

Вконтакте

Все параметры абсолютно аналогичны параметрам из примера про кнопку Facebook, поэтому не буду их описывать лишний раз. А в результате получаем вот что:

Ну вот и всё, теперь при помощи CSS вы можете придать ссылкам какой угодно вид (например как у меня на блоге).

Смотрите также

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

Кнопки «поделиться» для сайта

Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать.

.share-buttons < display: flex; flex-wrap: wrap; >.share-buttons a < margin-bottom: 5px; width: 40px; height: 40px; >.share-buttons a:not(:last-child) < margin-right: 5px; >.share-buttons .facebook < background: url("../img/share-btns.png") no-repeat left top; >.share-buttons .vkontakte < background: url("../img/share-btns.png") no-repeat -168px top; >.share-buttons .ok < background: url("../img/share-btns.png") no-repeat -126px top; >.share-buttons .twitter < background: url("../img/share-btns.png") no-repeat -42px top; >.share-buttons .pinterest < background: url("../img/share-btns.png") no-repeat -210px top; >.share-buttons .mail < background: url("../img/share-btns.png") no-repeat -294px top; >.share-buttons .telegram < background: url("../img/share-btns.png") no-repeat -672px top; >

Так просто можно добавить кнопки «поделиться» на ваш сайт.

Благодаря тому, что мы писали весь код вручную, без использования сторонних сервисов, стилизовать кнопки можно как это необходимо.

Важно лишь верно заполнить ссылки, которые позволяют делится контентом текущей страницы.

Поделиться в фейсбук

https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться вконтакте

https://vkontakte.ru/share.php?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в ok

https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ&st.comments=ОПИСАНИЕ

Поделиться в телеграм

https://telegram.me/share/url?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в pinterest

https://ru.pinterest.com/pin/create/button/?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для pinterest необходимо так же добавить изображение записи (страницы)

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Поделиться в twitter

https://twitter.com/intent/tweet?text=ТАЙТЛ_СТАТЬИ(ЗАГОЛОВОК). Описание. Ссылка

Поделиться в @Мой мир mail.ru

https://connect.mail.ru/share?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для @Мой мир необходимо так же добавить изображение записи (страницы).

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Используя данные ссылки, вы можете создать виджет абсолютно любого вида и размера. Например, вместо спрайта что мы использовали ранее — можете воспользоваться шрифтовыми иконками fontAwesome:

И далее добавлять необходимые стили.

Чтобы подтягивались необходимые изображения ваших статей, используйте Open Graph разметку.

Поделиться в Linkedin

Чтобы поделиться в Linkedin используйте следующий код.

Мы рассмотрели, как добавить кнопки «поделиться» для наиболее популярных социальных сетей в русскоязычном сегменте.

Если вам понравилась данная статья, то возможно и ссылки на мессенджеры окажется для вас полезной.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 5 )

Подскажите пожалуйста, как быть, если я пишу сайт на локальном сервере Open Server, какой полный адресс указывать? https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ на типо: /roads/road_1.php?

А зачем вам указывать локальный адрес? Вы же его не будите расшаривать. Вам нужно указывать глобальный адрес (адрес сайта, который будет на хостинге).

Спасибо! Но, не совсем понял, можете объяснить если не сложно? Или показать хотя бы как пример как записать адресс в моем случае? Ведь домена у меня еще нет. Просто пишется код в open server. И где мне тогда в моем случае взять глобальный адресс?

Источник

Элементарные социальные share-кнопки

В ответ на посты о кнопках для шаринга в социальных сетях с громоздким исходным кодом, и сложной детальной кастомизацией, хочу показать хабрасообществу решение которое однажды написал неизвестный, но однозначно добрый программист. Автор сего чуда не я, но использую это решение уже больше года в проектах с которыми работаю.

HTML

Share = < vkontakte: function(purl, ptitle, pimg, text) < url = 'http://vkontakte.ru/share.php?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&image=' + encodeURIComponent(pimg); url += '&noparse=true'; Share.popup(url); >, odnoklassniki: function(purl, text) < url = 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'; url += '&st.comments=' + encodeURIComponent(text); url += '&st._surl=' + encodeURIComponent(purl); Share.popup(url); >, facebook: function(purl, ptitle, pimg, text) < url = 'http://www.facebook.com/sharer.php?s=100'; url += '&p[title]=' + encodeURIComponent(ptitle); url += '&p[summary]=' + encodeURIComponent(text); url += '&p[url]=' + encodeURIComponent(purl); url += '&p[images][0]=' + encodeURIComponent(pimg); Share.popup(url); >, twitter: function(purl, ptitle) < url = 'http://twitter.com/share?'; url += 'text=' + encodeURIComponent(ptitle); url += '&url=' + encodeURIComponent(purl); url += '&counturl=' + encodeURIComponent(purl); Share.popup(url); >, mailru: function(purl, ptitle, pimg, text) < url = 'http://connect.mail.ru/share?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&imageurl=' + encodeURIComponent(pimg); Share.popup(url) >, popup: function(url) < window.open(url,'','toolbar=0,status=0,width=626,height=436'); >>; 

Счетчик шаринга

В случаях, когда надо вести подсчет количества шаринга страницы для каждой из социальных сетей любым возможным способом, а не конкретной кнопкой, здесь конечно идеальный вариант.

Но у меня стояла другая задача, надо было отследить статистику нажатий именно на кнопку шаринга размещенную непосредственно на расшариваемой странице. Далеко не уходя от способа шаринга представленного выше, эта задача была решена табличкой в БД, еще одним параметром функции и простым ajax’ом:

 popup: function(url,soc) < window.open(url,'','toolbar=0,status=0,width=626,height=436'); $.post('/social/share', , function (data)<>); > 

В моем случае принимающий скрипт достает с URL айдишник записи, заносит в табличку запись и/или увеличивает счетчик на 1 для конкретной социальной сети.

Данное решение является самым минималистичным из мною встречаемых, с свободной кастомизацией внешнего вида. Оно избавляет от надобности в использовании сторонних сервисов типа pluso.ru и дает возможность вести собственную статистику на своем же сервере.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add VK share URL #6

Add VK share URL #6

Comments

The text was updated successfully, but these errors were encountered:

As sample
https://vk.com/share.php?url=github.com&title=TITLE%20MEANS%20%D0%97%D0%90%D0%93%D0%9B%D0%90%D0%92%D0%98%D0%95&description=%D0%9E%D0%9B%D0%9E%D0%9B%D0%9E%20MEANS%20OLOLO
gives

Ah, thanks, that is correct. Checked documentation, looks good. Made updates, should be good now.

thanks @HoldOffHunger I have merged your changes in

@bradvin There are additional params for sharing to VK:

• url Link to the page to be posted.
• title Post title. If not set, title from the post page will be used.
• description Post description. If not set, description from the post page will be used.
• image Link to image of the post. If not set, image from the post page will be used.
• noparse If true, VK server will not make an additional request to download missing information from the posted page. If false, request will be sent always.
• no_vk_links If the value is 1, there will be no active links to VK in the post window.

I suggest to change VK URL to:

https://vk.com/share.php?url=&title=&description=&image=

Also it would be great if there are links to detailed documentation near the URLs in the readme.

Источник