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

facebook, twitter, ВКонтакте  /  77 комментариев

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

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

Twitter

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

<?php
$text = 'Привет, мир!'; // текст твита
$url = 'https://misha.agency/?p=1'; // ссылка на страницу
?>
<a href="http://twitter.com/share?text=<?php echo $text ?>&url=<?php echo urlencode( $url ) ?>" title="Поделиться ссылкой в Твиттере" onclick="window.open(this.href, this.title, 'toolbar=0, status=0, width=548, height=325'); return false" target="_parent">Твитнуть</a>

Текст и 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, но это значительно тормозило скорость загрузки страниц и я решил не сокращать ссылки на своём блоге.

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

<?php
$title = 'Привет, мир';
$url = 'https://misha.agency?p=1';
$hashtags = 'wp,wordpress';
// обратите внимание, что некоторые из параметров я включил непосредственно в URL
?>
<a href="http://twitter.com/share?text=<?php echo $title; ?>&via=twitterfeed&related=truemisha&hashtags=<?php echo $hashtags ?>&url=<?php echo $url; ?>" title="Поделиться ссылкой в Твиттере" onclick="window.open(this.href, this.title, 'toolbar=0, status=0, width=548, height=325'); return false" target="_parent">Твитнуть</a>

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

Поделиться ссылкой в Твиттере

Facebook

<?php
$title = 'Привет, мир'; // заголовок
$summary = 'Короткое описание данной статьи, например можно использовать функцию WordPress the_excerpt()'; // анонс поста
$url = 'https://misha.agency?p=1'; // ссылка на пост
$image_url = 'https://misha.agency/wp-content/themes/truemisha/a/apple-touch-icon-144x144-precomposed.png' // URL изображения
?>
<a href="http://www.facebook.com/sharer.php?s=100&p[url]=<?php echo urlencode( $url ); ?>&p[title]=<?php echo $title ?>&p[summary]=<?php echo $summary ?>&p[images][0]=<?php echo $image_url ?>" onclick="window.open(this.href, this.title, 'toolbar=0, status=0, width=548, height=325'); return false" title="Поделиться ссылкой на Фейсбук" target="_parent">Поделиться</a>
p[title]
Заголовок поста.
p[summary]
Анонс поста.
p[url]
Ссылка на пост. Не забываем про функцию urlencode().
p[images][0]
Основное изображение поста, вы также можете перечислить дополнительные изображения в параметрах p[images][1], p[images][2] и так далее. Хотел бы заметить, что если вы защищаете изображения от хотлинков через .htaccess, то надо будет добавить все эти социальные сети в исключения, иначе ваши картинки просто не будут отображаться.
Поделиться ссылкой на Фейсбук

Вконтакте

<?php
$title = 'Привет, мир';
$description = 'Короткое описание данной статьи, например можно использовать функцию WordPress the_excerpt()';
$url = 'https://misha.agency?p=1';
$image_url = 'https://misha.agency/wp-content/themes/truemisha/a/apple-touch-icon-144x144-precomposed.png'
?>
<a href="http://vkontakte.ru/share.php?url=<?php echo urlencode($url); ?>&title=<?php echo $title; ?>&description=<?php echo $description; ?>&image=<?php echo $image_url; ?>&noparse=true" onclick="window.open(this.href, this.title, 'toolbar=0, status=0, width=548, height=325'); return false" title="Сохранить в Вконтакте" target="_parent">Сохранить</a>

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

Сохранить в Вконтакте

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

Миша

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

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

Комментарии — 77

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

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал