Как вставить иконки социальных сетей на сайт


Как добавить кнопки социальных сетей на сайт

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

к оглавлению ^

Социальные кнопки для сайта

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

Мечта каждого владельца сайта, если все его записи будут репостить читатели на своих страницах в одной из социальных сетей. Сейчас больше всего идет спрос на Вконтакте, Facebook, Twitter и Одноклассники. Я бы еще добавить LiveJournal, liveinternet и Blogger. Вот эти кнопки желательно добавить на сайт для полного удобства пользователя.

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

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

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

Существует такой подобный сервис, называется он share42. Про него масса написано материала, какой он хороший и как ним нужно пользоваться. Хороший, но для обычного пользователя, который ничего не понимает в этом, будет сложно с ним справиться.

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

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

Чем сегодня можно воспользоваться, чтоб добавить социальные кнопки для сайта:

  1. Сервис uptolike.
  2. Социальные кнопки яндекс.
  3. Добавление вручную каждой соц сети отдельно.
  4. Сервис Pluso.
  5. С помощью плагинов для WordPress (для ленивых).

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

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

к оглавлению ^

Uptolike

В данный момент я сам пользуюсь этим сервисом, понравился он мне. Кроме удобства, сервис uptolike имеет несколько привилегий перед другими себе подобными.

  • Широкий выбор среди кнопок социальных сетей;
  • Кнопки адаптированы под мобильные устройства;
  • Возможность цитирования в соц сетяъ любого участка текста;
  • Можно добавить кнопку наверх;
  • Возможность добавления всплывающего окна на подписку в группу Вконтакте;
  • Выбор размера иконок;
  • Выбор стиля иконок для сайта;
  • Добавить эффект при наведении;
  • Изменение фона кнопки, цвета текста, фона счетчика;
  • Увеличение или уменьшение текста в счетчике.

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

Кроме этого, что еще может сервис uptolike.

Поделиться Сделать репост страницы.
Добавить лайки Пользователь имеет возможность поблагодарить автора.
Подписаться Пользователь имеет возможность подписаться на группу Вконтакте.
Поделиться изображением Любой желающий сможет поделиться понравившейся картинкой с сайта.
Опрос При необходимости добавить и провести опрос на сайте.
Добавить рейтинг записей С помощью рейтинга можно увидеть, что нравится читателям а что нет.
Добавить счетчик посещаемости Установить на сайт невидимый счетчик посещаемости.
Плагин для WordPress Кто ленится добавлять код, есть возможность установить плагин.
Плагин для Joomla Плагин для Drupal
Добавить модуль Bitrix

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

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

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

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

Если у вас сайт на WordPress, открываем файл single.php и вставляем готовый код сразу после окончания контента странице. Обновляем страницу и смотрим, что получилось. Сложного ничего нет.

к оглавлению ^

Яндекс

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

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

к оглавлению ^

Ручной метод добавления

В этом способе нужно открыть каждую соц сеть отдельно и настроить каждую кнопку репоста отдельно. Для добавления кнопки фейсбука нужно пройти сюда. Для одноклассников и моего мира нужно добавить данные тут. Для твиттера все происходит на этой странице. Для добавления кнопки Вконтакте переходим по этой странице.

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

к оглавлению ^

Вконтакте

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

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

к оглавлению ^

Pluso

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

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

После всех этих действий, снизу будет находиться готовый код для вставки на страницу. Если нужно вставить на главную страницу, ковыряемся в файле index.php, если во все ваши записи, добавляем код в файл single.php сразу после окончания записи.

к оглавлению ^

WordPress

Если вы ничего не понимаете в этом коде, что куда нужно копировать и как все это работает, выход есть. Если у вас движок WordPress, можно установить плагин, с помощью которого у вас появятся кнопки социальных сетей. Сегодня таких плагинов просто большое количество. Заходи в админку — Плагины. Можно сразу написать в поиске плагинов «соц кнопки», «social» или «вконтакте». Я уверен, вы что то найдете.

Среди большинства таких подобных плагинов для WordPress, посмотрев на рейтинг, больше всего ставят именно такие:

  1. Social Share Buttons for WordPress.
  2. Social.
  3. Social Media Feather — lightweight social media sharing and follow buttons.

На самом деле подобных таких плагинов очень много, нужно устанавливать и перебирать, какой вам больше понравится, правильно работает, что показывает и как его можно настроить под себя. Разберем на примере первый такой плагин Social Share Buttons for WordPress.

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

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

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

Выбор остается уже за вами, каким способом будете пользоваться. Добавлять иконки социальных сетей через uptolike, Pluso или через Яндекс. Не стоит сразу устанавливать плагин на WordPress, попробуйте сделать все ручным методом или с помощью сервиса.

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

Основное руководство по вставке значков социальных сетей во все содержимое

В этом руководстве вы найдете:

  • Бесплатные загрузки иконок социальных сетей: Facebook, Twitter, LinkedIn, Google+ и 7 других. Каждый значок имеет разные стили: линейный, с заливкой, более упрощенный, менее упрощенный или цветной.
  • Практические инструкции для различных веб-, мобильных, настольных платформ и печати.

Бесплатные загрузки

Подробные инструкции для каждой конкретной платформы, но для начала, это файлы .

Все логотипы выполнены в разных стилях

Вы можете скачать их в любом формате:

  • PNG разных размеров - самый простой способ практически на любую платформу
  • SVG - отлично подходит для Интернета. Посмотрите наш лучший способ вставки SVG-иконок
  • PDF - лучше всего подходит для вставки значков в приложения iOS в Xcode. Смотрите нашу инструкцию
  • EPS - некоторые предпочитают, хотя PDF примерно такой же, но лучше
  • В качестве шрифта - некоторые фронтенд-разработчики предпочитают, чтобы

Фрагменты и библиотеки JavaScript

Ниже мы вручную выбрали решения, которые мы пробовали при разработке Icons8 и которые отлично нам подошли: сниппеты, библиотеки JavaScript и тому подобное.

Хотя для каждого случая существует несколько решений, мы предпочли:

  • Легкие решения лучше тяжелых. Если можно поделиться текстом с простой ссылкой, зачем загружать тяжелые библиотеки JavaScript?
  • Бесплатное ПО с открытым исходным кодом по сравнению с рекламным и отслеживающим ПО. Существуют «бесплатные» сервисы, которые отслеживают вас и продают данные рекламодателям. Ни за что!

Блоги

Если вы используете WordPress или Blogger, вы сделаете это за 5 минут или меньше.

Добавить значки социальных сетей в WordPress

У вас есть счастливый билет.Установите любой плагин WordPress для социальных сетей, который вам нравится, и готово.

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

Установить Ultimate Social Media

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

Добавить значки социальных сетей в Blogger

Мы не большие поклонники этой платформы, тем не менее, вот видеоинструкция:

Добавление значков социальных сетей в подпись электронной почты

Используете ли вы Gmail или любую другую почтовую службу, подход один и тот же:

    1. Найдите нужный значок.Например, значок твиттера
    1. Щелкните имя значка на правой панели, чтобы открыть страницу этого значка.
    2. Теперь нажмите кнопку «Создать HTML»
  1. Выберите вкладку «Наш CDN», выберите размер значка (обычно 48 пикселей) и скопируйте код куда-нибудь. Скоро воспользуемся
  2. Найдите и откройте конфигурацию подписи в своей почтовой программе или службе и вставьте это:
   twitter   

Имейте в виду, вы должны изменить 2 вещи в этом коде:

  
  • используйте код, который мы скопировали с шага 5 здесь.

Добавить значки социальных сетей в приложение Mac OS X

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

 NSArray * array = @ [@ "myText", [NSImage imageNamed: @ "myImageFile"]]; NSSharingService * sharingServiceFB = [NSSharingService sharingServiceNamed: NSSharingServiceNamePostOnFacebook]; [sharingServiceFB performWithItems: массив]; 

Для любого элемента или группы элементов NSSharingService отобразит лист общего доступа, позволяющий пользователю предварительно визуализировать то, что будет предоставлено службе.Служба обмена может: создать сообщение в социальной сети, такой как Twitter или Facebook, отправить сообщение по электронной почте или iMessage, загрузить видео в службы просмотра или отправить файл через AirDrop.

Вот видеоурок:

20-минутное руководство по добавлению значков

Добавить значки социальных сетей в приложение iOS

Начиная с iOS 6, Apple представила Social Framework.

И у каждой крупной сети (например, Facebook) есть свой гид.

Также обратите внимание на эту универсальную библиотеку с открытым исходным кодом.

Попробуйте бесплатные инструменты для разработчиков от команды Icons8

Photo Creator , бесплатное средство для создания коллажей с технологиями на основе искусственного интеллекта для создания индивидуальных фотографий для вашей истории Pichon , настольное приложение для загрузки значков и картинок и использования их в автономном режиме


Также получите списки бесплатных векторных программ и бесплатных программ для редактирования фотографий.

.

Как добавить значки социальных сетей на веб-сайт HTML

  • Виджеты
  • Блог
  • Учебники
  • Войти
  • Зарегистрироваться
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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