Как создать кнопки «Поделиться» для вашего сайта шаг за шагом

Кнопки социальных сетей являются незаменимым элементом каждого веб-сайта. Будь то личный или бизнес-блог, онлайн-портфолио или проект электронной коммерции, социальные кнопки позволяют клиентам легко распространять информацию о вашем контенте в Facebook, Twitter, Instagram или Pinterest. Внедрив на свой веб-ресурс простые кнопки социальных сетей, вы сможете значительно расширить охват и привлечь новых клиентов, которые придут на ваш сайт в поисках ценного контента или товаров. В наши дни нельзя недооценивать силу социальных сетей. Если компанию нельзя найти в Facebook или Instagram, она упускает возможность охватить свою целевую аудиторию и продавать свои товары и услуги большему количеству людей. Как следует из названия, кнопки социальных сетей делают ваш контент более доступным для общего доступа в Интернете. Современные пользователи часто делятся ссылками на предпочитаемые ими продукты на своих страницах в Facebook. Каждый пост в социальной сети доступен подписчикам с теми же интересами и предпочтениями, что и у вашего клиента.

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

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

Как создать кнопку «Поделиться» шаг за шагом

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

Курсы веб-дизайна

• Онлайн-классы по программированию для домашнего обучения
• Полный пакет мастерства Photoshop

Если вы не хотите иметь дело с огромным, перегруженным кодом и сложной настройкой деталей, этот учебник именно для вас. Даже новички в HTML найдут его легким для понимания. Итак, пристегните ремни и приступим!

Шаг 1

Первое, что вам нужно сделать, это открыть HTML-файл и вставить приведенный ниже код.

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
или же
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Шаг 2

Теперь создайте файл js, содержащий такую ​​информацию:

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

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Этот скрипт получает идентификатор из URL, добавляет метку в таблицу и/или увеличивает счетчик на единицу для конкретной социальной сети. Это простое решение для кнопок «Поделиться». Вы можете легко изменить внешний вид своих кнопок с помощью CSS, вы можете создать свои собственные кнопки в Photoshop и использовать их здесь. Вы можете сделать почти все!

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

Популярные социальные сети позволяют создавать собственные фрагменты кода, которые мы можем встраивать в сообщения или страницы веб-сайтов, чтобы люди могли транслировать предпочитаемый ими контент. Facebook и Twitter — две самые популярные социальные сети, поддерживающие соответствующие функции. Давайте посмотрим, как интегрировать такие социальные кнопки на свой сайт.

Как добавить кнопку «Поделиться в Facebook»

Кнопки «Поделиться» в Facebook позволяют вашим клиентам делиться ссылками, ведущими на публикации или сделки на вашем веб-сайте, с фрагментом написанного на заказ текста.

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

Теперь давайте посмотрим, что означают некоторые поля на странице настройки.

• URL to Like - это поле добавляет страницу сайта, которой мы хотим поделиться на Facebook.
• Ширина - здесь задается ширина кнопки.
• Глагол для отображения - здесь мы можем выделить текст в кнопке "Нравится" или "Рекомендую".
• Цветовая схема — здесь вы можете выбрать дизайн кнопок для светлых или темных сайтов.
• Шрифт - выберите шрифт для надписей на кнопках.

После того, как мы выбрали настройки, находим кнопку «Получить код» и нажимаем на нее. Далее высветится окно с кодом, его тоже нужно вставить в два этапа:

Вставьте код сразу после тега <body>.

Код для отображения кнопки:

Вставьте этот код туда, где должна отображаться кнопка из facebook:

Как добавить кнопку «Поделиться в Твиттере»

Добавляя кнопки «Поделиться» в Twitter на свой веб-сайт, разработчики Twitter рекомендуют вам помнить о нескольких вещах:

• Если пользователь не вошел в свою учетную запись Twitter, ему будет предложено войти в систему, чтобы отредактировать ваше сообщение.
• Твит будет ссылаться на веб-страницу, которую посетил человек. Пользователь может свободно корректировать сообщение твита так, как он хочет.
• После нажатия «Твитнуть» всплывающее окно покажет список связанных учетных записей в Твиттере. Пользователь может решить, где следовать за ними или игнорировать их.
• Нет ограничений на количество раз в день, когда один и тот же пользователь может твитнуть что-то на временной шкале.

Чтобы добавить кнопку «Поделиться в Твиттере», сделайте следующее:

• Перейдите на сайт publish.twitter.com и нажмите «Кнопки Twitter».
• Выберите тип кнопки «Поделиться в Твиттере», которую вы хотите добавить на свой сайт.
• Отредактируйте твит и сообщение, которое оно будет содержать, упомянув, какой @аккаунт вы хотите упомянуть.
• После этого скопируйте и вставьте код на свой сайт.

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