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

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

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

Twitter

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

<?php
$text = 'Привет, мир!'; // текст твита
$url = 'https://truemisha.ru/?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://truemisha.ru?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://truemisha.ru?p=1'; // ссылка на пост
$image_url = 'http://rudrastyh.com/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://truemisha.ru?p=1';
$image_url = 'http://rudrastyh.com/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 вы можете придать ссылкам какой угодно вид (например как у меня на блоге).

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

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

Комментарии 75

  • Andrey3 октября 2012 в 11:10 #

    попробовал добавить вк-шный код, не рабоает( просто ничего не происходит при клике

  • Илья27 октября 2012 в 23:10 #

    Миша, ссылки на описания по Твиттеру, Фэйсбуку и ВКонтакте не работают. Исправь, пожалуйста.

    • Миша28 октября 2012 в 10:10 #

      Спасибо большое, что отписался, Илья! После установки нового функционала на сайт на многих статьях полетела верстка.

      Если бы не ты, неизвестно, когда бы я этот пост исправил)

  • Тимур8 мая 2013 в 18:05 #

    Что надо!))

  • Сергей8 сентября 2013 в 09:09 #

    Здравствуйте Миша.

  • Сергей8 сентября 2013 в 22:09 #

    Здравствуйте Михаил. Я вынужден еще раз к вам обратиться, надо было сразу описать суть проблемы. :)
    Дело в том, решил я поставить себе на блог ваши кнопки, хочу увеличить скорость загрузки блога, но к сожалению они не совсем корректно работают. При клике по кнопке, окно открывается, но выводится пустое сообщение, то есть нет тайтла, описания и ссылки. В коде есть вывод всего вышесказанного, но почему-то не работает.

    Я чайник полный, помогите пожалуйста!

    • Миша9 сентября 2013 в 10:09 #

      Добрый день,
      1. какие именно кнопки не передают тайтл/описание страницы?
      2. мне нужно взглянуть на ваш сайт.

      • Сергей9 сентября 2013 в 10:09 #

        Ну я пока на локалке только установил их, а кнопки все не передают.

      • Сергей9 сентября 2013 в 10:09 #

        Я вот тут предположил, может редактор символов левых в код добавил при редактировании статьи. Заранее извиняюсь, если глупость сморозил, я в php полный ноль. :)

        • Миша9 сентября 2013 в 11:09 #

          C символами всё ок, у меня же на сайте работает) единственное моё подозрение - это то, что не заданы переменные $link, $title, $description.

          я в php полный ноль

          тем более.

          • Сергей9 сентября 2013 в 11:09 #

            Ну я не совсем ноль, основы то я знаю. Все переменные заданы. Я подозревал символы, типа вот этих - &&p , &p,(амперсанд) у вас в коде. На сколько я знаю они не используются, хотя могу ошибаться.
            Спасибо Миша, что не проигнорировали и ответили. Обычно от таких чайников как я отписываются. :)

            • Миша9 сентября 2013 в 12:09 #

              нет, амперсанды тут нужны)
              да не за что)

            • Миша9 сентября 2013 в 12:09 #

              но эта статья действительно требует обновления, а то посл. раз обновлялось год назад, займусь этим сразу же, как появится время, возможно что-то в коде и не работает (хотя опять же повторюсь - на этом сайте ведь всё ок)

              • Сергей9 сентября 2013 в 13:09 #

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

  • Антон23 сентября 2013 в 03:09 #

    Здравствуйте!
    Использовал ваши коды (пока только на локальном сайте) и вдруг вижу, что мне не хватает таких же ссылок только для сервисов Google+ и Linkedin.
    Сможете еще и для них выложить коды ссылок? Очень надо, пожалуйста.

    • Антон23 сентября 2013 в 04:09 #

      и еще такой момент:

      в коде для фейсбука есть такой параметр: &&p[images][0]=и_тут_линк_на_картинку

      пробовал (локально правда) поставить линк на существующую картинку в инете (на своем же сайте), но фейсбук наотрез отказался ее брать оттуда (в .htaccess запрет не стоит!)

      что может быть?

    • Миша23 сентября 2013 в 08:09 #

      Приветствую, да, конечно.

      google+

      <a href="https://plus.google.com/share?url=<?php echo $link ?>" title="Опубликовать ссылку в Google Plus" onclick="window.open(this.href, 'Опубликовать ссылку в Google Plus', 'width=800,height=300'); return false">google+</a>

      linkedin

      <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php echo $link ?>&amp;title=<?php echo $title ?>&amp;summary=<?php echo $description ?>" onclick="window.open(this.href, 'Опубликовать ссылку в LinkedIn', 'width=800,height=300'); return false">LinkedIn</a>
      • Миша23 сентября 2013 в 08:09 #

        данные примеры будут также работать при отключенном JavaScript, можно разве что приписать к ссылкам атрибут target="_blank"

      • Миша23 сентября 2013 в 08:09 #

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

      • Антон24 сентября 2013 в 00:09 #

        а можете еще написать код ссылки для Я.ру??
        http://my.ya.ru/

      • Андрей23 августа 2014 в 16:08 #

        День добрый!
        Огромное спасибо за скрипты!
        Но возникла проблема, при нажатии на гугл+ мне говорит:
        "На этой странице обнаружена циклическая переадресация"

        Что бы это значило, не подскажите?

  • Антон23 сентября 2013 в 23:09 #

    Вот еще такой вопрос...
    у меня в мета-данных есть такой фрагмент кода:

    <meta property="og:title" content="Название сайта"/>
    <meta property="og:description" content="Описание сайта"/>
    <meta property="og:url" content="http://www.мойсайт.ru/"/>
    <meta property="og:site_name" content="Имя сайта"/>
    <meta property="og:type" content="website"/>

    будут ли все вышеприведенные ссылки брать инфу из этого блока?

  • Иван8 ноября 2013 в 07:11 #

    Миша, спасибо за статью!
    По какой причине могут фото не подгружаться в пост?

    Если просто ссылку на картинку в браузер вставить то картинка отображается

    • Миша8 ноября 2013 в 10:11 #

      пожалуйста!
      трудно сказать, у всех по-разному, например facebook смотрит на пропорции изображения

  • Миша28 ноября 2013 в 10:11 #

    Обновил пост) Ура-ура.

  • Сергей28 ноября 2013 в 20:11 #

    Наконец-то, дождался. Огромное спасибо Миша.

  • Ник1 июля 2014 в 19:07 #

    Четото, вобще не реагирует не на один прарметр кроме [url], описание страницы, и тайтл берет из метатегов страницы, а карти картинку сайта на пофиг походу, первую попавшуюся, может этот метод уже не актуален? я зря мучаюсь

    • Миша2 июля 2014 в 07:07 #

      А вы посмотрите кнопки на моем блоге - всё работает. Можно взглянуть на ваш сайт?

  • Антон24 октября 2014 в 05:10 #

    Я вот так и не понял, как сделать так, чтобы title и описание само генерировалось, в WP глупо будет смотреться с одним описанием все статьи. Если можно, мне бы вот этот код, как вызвать эти две функции title и the_excerpt()?

  • Максим2 ноября 2014 в 23:11 #

    А я себе прикольную 3d панель под социальные кнопки сделал - главное оригинальность и глаз радует;)

  • Анастасия1 марта 2015 в 21:03 #

    Здравствуйте! Наконец нашла код кнопки поделиться в ВК, которая отображает и картинку и текст. Только помогите, пожалуйста разобраться. Куда именно нужно вставлять этот код. В шаблон ( тогда в какой именно?) или на каждую страницу сайта? Я так поняла, что на каждую страницу. Но получается каждый раз придется вручную прописывать $title, $description, $url и $image_url для каждой страницы? Или я не так поняла?

    • Миша2 марта 2015 в 11:03 #

      Здравствуйте!
      А какой у вас движок?

      • Анастасия2 марта 2015 в 18:03 #

        WordPress

        • Миша2 марта 2015 в 21:03 #

          Ну тогда просто заменяйте $title, $description, $url и $image_url на соответсвующие функции.

          Вставить можете в single.php.

          • Анастасия2 марта 2015 в 22:03 #

            Это мой первый сайт. Поэтому, извините за надоедливые уточнения - на какие именно функции заменять? И после чего именно вставить Ваш код? Код single.php:

            <?php
            /**
            *
            * single.php
            *
            * The single post template. Used when a single post is queried.
            *
            */
            get_header();
            <?php if ( function_exists('yoast_breadcrumb') ) {
            yoast_breadcrumb('','');
            } ?>

            ?>

            theme_get_previous_post_link('« %link'),
            'next_link' => theme_get_next_post_link('%link »')
            )
            );
            }
            while (have_posts()) {
            the_post();
            get_template_part('content', 'single');
            }
            /* Display navigation to next/previous posts when applicable */
            if (theme_get_option('theme_bottom_single_navigation')) {
            theme_post_navigation(
            array(
            'prev_link' => theme_get_previous_post_link('« %link'),
            'next_link' => theme_get_next_post_link('%link »')
            )
            );
            }
            } else {
            theme_404_content();
            }
            ?>

            • Миша3 марта 2015 в 08:03 #

              $title на get_the_title(), $url на get_permalink(), $image_url на get_the_post_thumbnail(). $description - зависит от ситуации.

              Вставлять примерно после get_template_part.

              Вообще тут может быть много моментов - можете написать мне по email и я вам помогу.

  • Анастасия10 апреля 2015 в 09:04 #

    Здравствуйте!
    Столкнулась с такой проблемой.
    Когда я нажимаю кнопку поделиться (фейсбук), то фейсбук подтягует не ту картинку, которую я хочу, а котая ему самому понравилась. Я уже даже картинку переименовала.

    Если фейсбук уже сохранил выбранное им изображение. Как мне его теперь изменить? Вот мой сайт omolozhenie.com.ua/ Я хочу чтоб выводился логотип компании omolozhenie.com.ua/i/Akciya.png
    Вот мой код

    <meta name="viewport" content="user-scalable=1, width=1001px, initial-scale=1">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://omolozhenie.com.ua/">
    <meta property="og:title" content="ЛАЗЕРНОЕ ОМОЛОЖЕНИЕ">
    <meta property="og:image" content="http://omolozhenie.com.ua/i/Akciya.png" />
    • Миша11 апреля 2015 в 08:04 #

      Здравствуйте!
      Возможно фейсбук хочет, чтобы эта картинка также присутствовала на страницах сайта.

    • Анастасия28 апреля 2015 в 12:04 #

      Сталкивалась с такой проблемой. Оказалось, что facebook кеширует у себя картинки.
      Чтобы очистить кеш зайдите сюда https://developers.facebook.com/tools/debug/.
      Нужно ввести Ваш URL и нажать на "Fetch new scrape information", он обновит кеш и добавится Ваша новая картинка.

  • Дмитрий20 июля 2015 в 17:07 #

    Привет. Столкнулся с проблемой, пишу в PHP вот так:

    $title = the_title();
    $summary = the_excerpt(); 
    $url = get_permalink();

    но при обновлении страницы для проверки работы кнопок он в самих кнопках выводит название цитату и ссылки. ЧЯДНТ - что я делаю не так?

    • Миша21 июля 2015 в 08:07 #

      Привет!

      $title = get_the_title();
      $summary = get_the_excerpt(); 
      $url = get_permalink();
      • Дмитрий21 июля 2015 в 11:07 #

        Как это обычно бывает, одновременно с ответом нашел решение в кодексе WP, большое спасибо!

        • Миша21 июля 2015 в 21:07 #

          В связи с нехваткой времени не всегда успеваю оперативно отвечать на комментарии... Рад, что у вас всё получилось)

  • Александр27 июля 2015 в 16:07 #

    Добрый день!
    Подскажите пожалуйста, как сделать картинки соц.сетей, вы сами делали или качали откуда-то?
    Спасибо!

    • Миша28 июля 2015 в 07:07 #

      Добрый день! А какие именно картинки вы имеете ввиду? Которые сверху выпадают при прокрутке? Или которые в сайдбаре?

  • Александр28 июля 2015 в 09:07 #

    Доброе утро.
    Я имею ввиду картинки соц. сетей, как их сделать?
    Спасибо!

  • админ23 августа 2015 в 17:08 #

    люди, которые говорят "на блоге" будут вариться в аду в отдельном котле.

  • Влад6 сентября 2015 в 14:09 #

    Уважаемый автор, не можете ли подсказать, почему при полном копировании примера с ссылкой поделиться в вк все работает хорошо, и ваша картинка отображается http://rudrastyh.com/wp-content/themes/truemisha/a/apple-touch-icon-144x144-precomposed.png, но стоит ее заменить - отображение не происходит.Картинка: http://runupclub.com/img_pic/0.jpg. Блокировки хотлинков не стоит. Но даже при добавлении ее и принудительном исключении vk.com ничего не происходит

  • Александр21 сентября 2015 в 10:09 #

    Здравствуйте. Уважаемый автор, быть может вы подскажете почему не работает пример с Facebook?

    Использую вот такую ссылку:

    https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http%3A%2F%2Fjustcoolidea.com%2Fwhich-animal-lives-in-you%2F&p[title]=Some+Title&p[image][0]=http://justcoolidea.com/wp-content/uploads/2015/09/Cover.jpg

    Т.е. передаются только два параметра: ссылки и заголовок. Ссылка принимается и обрабатывается. Но заголовок не тот что я указал, а тот, который установлен на странице.
    Аналогично если передать изображение.

    • Миша22 сентября 2015 в 09:09 #

      Здравствуйте!
      Перешел по вашей ссылке — вроде всё ок, и заголовок и изображение есть.

      • Александр22 сентября 2015 в 09:09 #

        Заголовок и изображения берутся с самой страницы.

        По переданной ссылке заголовок должен быть "Some Title"

        А картинка - http://justcoolidea.com/wp-content/uploads/2015/09/Cover.jpg

  • Дмитрий9 октября 2015 в 20:10 #

    Привет, спасибо за урок. Возникла проблема - FancyBox (LightBox для картинок) конфликтует с ссылками из этой статьи: он пытается вывести картинки из ссылки. Никак не могу понять, что делать...

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Миша: Добрый день! В принципе вам только немного нужно доработать код из этого поста - категории уже есть, цена - это и так...

  • eveniy: Добрый день Михаил, подскажите на примере как добавить свои произвольные поля в в вашу форму фильтрации: Я так понимаю...

  • Миша: Отлично! )

  • Дмитрий: сам разобрался: в настройках кастомного типа записи недавно оптимизировал настройки и переоптимизировал: в аргументе 'ta...

  • Дмитрий: У меня по какой-то причине пропало отображение (как в колонке меню слева, так и метабокс в записях ) раздела рубрик для...