Конструктор кнопок социальных сетей. Кнопки социальных сетей
Здравствуйте, уважаемые друзья. Сегодняшняя статья будет посвящена созданию блока социальных кнопок без сервисов и плагинов. А ещё в этот блок войдут кнопки, позволяющие посетителям сайта распечатать страницу, отправить ссылку статьи на электронную почту и сделать закладу на вашу статью. Такие кнопки сегодня можно встретить практически на каждом сайте. Только вот реализованы они при помощи сервисов или плагинов. А я же покажу, как сделать это самостоятельно.
Сервисы, которые я использовал на сайтах клиентов и на своём блоге — и . Эти сервисы позволяют достаточно легко реализовать поставленную задачу.
В чём преимущество собственных социальных кнопок перед сервисами и плагинамиА в этом блоке используются лишь необходимые изображения социальных кнопок, объединённые в . Все стили сведены к минимуму. Плюс простой каркас html.
Мы же рассмотрим классический вариант, когда кнопки расположены после статьи.
Сделать это можно либо открыв файл, отвечающий за вывод статей (single.php ) и в исходный код добавить блок социальных кнопок. Либо это можно сделать через файл функции темы (functions.php ).
Я покажу оба варианта, а вы для себя выберите подходящий.
Вставка блока в исходный код single.phpПредупреждение: Пред началом всех действий сделайте резервную копию файла single.php!
Открываем административную панель Вордпресс – «Внешний вид» — «Редактор» — «Одна запись (single.php)» .
В исходном коде ищите место, где заканчивается вывод статьи, и начинаются комментарии или постраничная навигация. Именно в это место нужно будет вставить html код блока социальных кнопок.
Внимательно смотрите на скриншот, ориентируйтесь на коды, отвечающие за вывод статьи и комментариев . И вставляйте приведённый ниже код.
Конечно, в ваших шаблонах будут некоторые отличия, но уверен, вы разберётесь, сложного в этом ничего нет. И к тому же у вас есть резервная копия, бояться нечего.
А вот и сам html код блока социальных кнопок:
","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook "> &subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal "> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter "> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki "> &target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote "> ","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg "> . Каждая ссылка имеет свой класс, через который присваивается изображение кнопки.
На этом вставка через исходный код закончена. И далее нужно подключить css стили.
Вставка блока в исходный код single.php через функции темыПредупреждение: пред началом работ, — сделайте резервную копию файла functions.php!
Для того чтобы использовать это вариант, нужно открыть файл functions.php и в самом конце добавить этот код:
/* Вставка соцкнопок*/ add_action("comments_template","soc_button"); function soc_button() { ?> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook"> &subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal"> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter"> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki"> &target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote"> ","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg"> . В противном случае сайт перестанет работать.Пояснения по коду: место, где будут выставлены кнопки социальных сетей, определяется через API ключ comments_template . По этому ключу определяется место перед комментариями. Сам код соцкнопок заключён в обратные теги открытия и закрытия php. В коде я их обозначил красным цветом. в этом вся хитрость вставки html кода в php, через функции темы.
На этом и это способ окончен, переходим к загрузке изображений на сайт.
Загрузка изображения кнопок на серверДля примера я подготовил несколько спрайтов с изображениями социальных кнопок. Скачать их можете .
Спрайт, который я использую в качестве примера, весит всего 3,97 кб и содержит только необходимые кнопки. А раз это спрайт, то и запрос к базе всего одни, а не для каждой кнопки в отдельности.
Скачиваете изображения или готовите свои и загружаете их на свой сайт. Думаю с этим проблем возникнуть не должно. Далее, ссылка на этот спрайт потребуется для оформления кнопок через стили css.
Подключение стилей CSSЭтот шаг можно конечно, выполнить самым первым, но я предпочитаю вначале выполнить всю сложную техническую работу, а уже после приступить к приятным мелочам с css стилями.
Итак, открываем файл style.css, отвечающий за дизайн вашего сайта. И вставляем вот эти стили:
Share a { display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test..png ") no-repeat scroll 0px 0px transparent;} .share a.vkontakte { background: url("http://test..png ") no-repeat scroll -168px 0px transparent; } .share a.google { background: url("http://test..png ") no-repeat scroll -252px 0px transparent; } .share a.livejournal { background: url("http://test..png ") no-repeat scroll -336px 0px transparent; } .share a.twitter { background: url("http://test..png ") no-repeat scroll -42px 0px transparent; } .share a.mail { background: url("http://test..png ") no-repeat scroll -294px 0px transparent; } .share a.odnoklassniki { background: url("http://test..png ") no-repeat scroll -126px 0px transparent; } .share a.pinterest { background: url("http://test..png ") no-repeat scroll -210px 0px transparent; } .share a.liveinternet { background: url("http://test..png ") no-repeat scroll -378px 0px transparent; } .share a.evernote { background: url("http://test..png ") no-repeat scroll -420px 0px transparent; } .share a.bookmark { background: url("http://test..png ") no-repeat scroll -462px 0px transparent; } .share a.email { background: url("http://test..png ") no-repeat scroll -504px 0px transparent; } .share a.print { background: url("http://test..png ") no-repeat scroll -546px 0px transparent; } .share a.digg { background: url("http://test..png ") no-repeat scroll -588px 0px transparent; } .share a.spring { background: url("http://test..png ") no-repeat scroll -630px 0px transparent; }
Пояснения по коду: класс.share определяет общий вид блока, размеры каждой кнопки, отступы и задаёт единый фон. А далее каждая ссылка имеет свой класс и каждой такой ссылке, через свойство background присваивается вид кнопки. Кнопки выполнены в качестве css спрайта, и каждая кнопка имеет ширину и высоту 40px, а между ними отступ 2px, что позволяет с точностью определить изображение для каждой кнопки. То есть первая кнопка указана, как 0, а вторая как 42 и так далее. В коде эти значения обозначены оранжевым цветом. Ссылка на спрайт тоже выделена оранжевым цветом, её вы меняете на путь к своему спрайту.
На этом весь процесс создания своего блока социальных кнопок – закончен. Можно смело переходить к проверке.
А ещё у меня есть видеоурок, в котором весь процесс показан наглядно, полюс показана работа самих кнопок. Смотрите и внедряйте на своих сайтах и блогах.
Вот теперь всё. С поставленной задачей справился. Всем желаю удачи и до встречи в новых статьях и видеоуроках.
Привет, друзья! Сегодня статья будет очень объемной, но в то же время необычайно полезной. Почему я решила написать эту статью? Дело в том, что меня постоянно спрашивают, как получить больше поклонников в ту или иную социальную сеть? Почему мало кто подписывается на мою страницу на Фейсбук? Почему никто не фолловит компанию в Твиттер?
Почти у каждой компании сегодня есть сайт и даже блог. А у вас есть сайт? Надеюсь, что да! Если еще нет, то об этом нужно срочно задуматься! Ну с блогерами и обладателями свободных профессий (консультанты и фрилансеры) и так понятно, у них обязательно есть свой адрес в интернете — веб-сайт. Друзья, проблема в том, что мало какие сайты реально оптимизированы под социальные сети. Они могут производить кучу очень полезного и интересного контента, но их никто не видит и не слышит. SMO (social media optimization) — слышали такой термин? Так вот этим самым СМО (оптимизацией сайта под соц. сети) никто и не занимается. А зря! Существует огромное количество способов, о которых знают специалисты, чтобы создать, что говориться, движуху на веб-сайте. Простые манипуляции + наличие идей и креативности могут существенно помочь вашей компании в продвижении. Это я вам гарантирую!
Итак, ниже я расскажу вам, как установить в сайт официальные социальные кнопки и виджеты . Это будут только официальные кнопки и виджеты — никаких сервисов и плагинов!
Социальные сети очень постарались и создали огромное количество различных кнопок и виджетов. О многих никто даже и не слышал, хотя имеются они в свободном доступе для каждого желающего. Здесь мы рассмотрим только самые нужные и эффективные из них, которые помогут вам увеличить базу поклонников, а также сделают распространение ваших статей и другого контента простым и непринужденным для посетителей вашего ресурса.
Если вы хотите установить такие же кнопочки, как у меня на сайте, то подробнее об этом написано .
Выберите соц. сеть, кнопки которой вы хотите установить:
Виды социальных кнопокПеред тем, как мы начнем разбираться с инструкциями по установке кнопок, хочу привлечь ваше внимание к тому факту, что существуют разные типы кнопок:
У Фейсбук, как и у других соц. сетей существует большой выбор социальных кнопок и виджетов. У каждой из них есть своя функция и предназначение. В этом разделе мы рассмотрим только самые используемые и нужные из них. Остальные вы сможете посмотреть и протестировать на сайте разработчиков на Фейсбук.
Примечание: Давайте сразу договоримся. В описании каждого раздела я буду давать ссылку на сайт разработчиков рассматриваемой соц. сети. На таких страницах, вы можете найти ссылки на все существующие кнопки и виджеты. Поэтому сразу открывайте страницу разработчиков в отдельной вкладке и читайте дальше эту статью.
Сайт разработчиков на Фейсбук: https://developers.facebook.com/docs/plugins
Кнопка «Нравится»Как установить?
Установить кнопочку «Нравится» очень просто! Вам нужно перейти на сайт разработчиков на Фейсбук (как мы договорились, ссылка находится в начале этого раздела). Прежде, чем вы приступите к созданию новых кнопок и виджетов, вам необходимо создать новое приложение в меню «Apps». Это нужно сделать обязательно, так как без этого Фейсбук не даст вам создавать кнопки!
Если с созданием приложения или с генерацией скриптов у вас возникли проблемы, дайте мне знать в комментариях, и я сделаю еще более подробную инструкцию по установке кнопок.
Итак, чтобы установить кнопку «Нравится», на странице разработчиков, в левой колонне, кликните на «кнопка «Нравится» (сеть)
«.
Теперь вам необходимо выбрать из предложенных Фейсбук опций, чтобы получить именно такой виджет, который вы желаете.
1) Url to Like — введите ссылку на страницу, публикацию, лендинг, для которой вы создаете кнопку «Нравится». Это может быть любой тип контента, даже изображение или видео. Главное, чтобы вы указали ссылку, которой будут делиться пользователи.
2) Width — Если место для кнопки у вас ограничено, то вы можете указать ширину виджета в пикселях. Кнопки сами по себе небольшие, но если вы выбираете стандартные кнопки, то текст занимает достаточно много места. Об этом я расскажу в следующем пункте.
3) Layout — Вид виджета. Фейсбук предлагает на выбор 4 варианта : стандартный (как на картинке), с большим счетчиком, с маленьким счетчиком и просто кнопки. Здесь все зависит от вашего вкуса, стиля сайта, имеющегося места под кнопки, а также желании показывать счетчики (т. е. сколько человек нажали на кнопку).
4) Action Type — вид действий, т. е. какой тип кнопки вы желаете установить: «Нравится» или «Рекомендую». Подробно о различиях этих кнопок — и вообще виджетах на Фейсбук — я писала в моем .
5) Show friends’ faces — если вы желаете, чтобы кнопки показывали посетителю вашего сайта аватарки его друзей, кто уже кликнул на кнопку «Нравится», то поставьте галочку в этом пункте. Если никто из друзей не лайкнул страницу, статью и т. д., то Фейсбук не будет отображать фото, а в тексте предложит пользователю стать первым, кому это понравилось. Если вам позволяет место, то я рекомендую включать эту опцию, так как лица друзей положительно влияют на восприятие контента читателем, увеличивая его доверие и часто толкая его также кликнуть на кнопку, хотя бы из солидарности.
После того, как вы заполнили все поля, щелкните по кнопке Get Code , чтобы сгенерировать код, который вы установите на сайт. Первая часть скрипта устанавливается в тег страницы, а вторая часть вставляется в то место, где вы хотите установить кнопку.
Сайт должен открыться на русском языке, но если, по какой-то странной причине, он на английском, то вы можете изменить язык в самом верху страницы.
Как установить?
Кнопка «Твитнуть»Еще одна всем известная кнопочка на Твиттер — «Твитнуть», которая позволяет пользователям делиться вашим контентом с фолловерами в Твиттер.
Как установить?
Все кнопки Твиттер устанавливаются на странице разработчиков, упомянутой выше. Процесс для всех кнопок практически идентичный — выбираем нужный вид кнопки, заполняем параметры и копируем код, который потом вставляем на сайт.
Кнопка «Хэштег»Это очень интересная кнопочка, о которой, уверена, почти никто не знает. Я лично ни разу не видела, чтобы ее использовал кто-то в Рунете. Тем не менее, она очень хороша для решения определенных задач. Например, такую кнопку можно использовать для продвижения каких-либо мероприятий, вебинаров, дискуссий в Твиттер под определенным тегом, маркетинговых кампаний, конкурсов. Да что угодно! Здесь есть большой простор для креативности!
Логично, если кнопка «хэштег», устанавливается на страницах, имеющих отношение к данному хэштегу. Например, вы написали статью о новом , который вы проводите для поклонников в Твиттер. Для участия в конкурсе, необходимо использовать определенный хэштег. Используя подобную кнопочку, вы облегчите жизнь человеку, так как кликнув по ней у него откроется твит с нужным хэштегом. Он может просто добавить какой-то текст и отправить твит в свободное плавание. И ему хорошо, и у вас появится новый участник. Не здорово ли это? Одним словом, ковать железо нужно не отходя от кассы, т. е. пока читатель находится под эмоцией прочитанного. Две минуты позже, он отвлечется и может вообще забыть, что он только что прочитал.
Пока у меня разыгралось воображение, поделюсь с вами еще одной идей. Скажем так, вы проводите мероприятие (онлайн или оффлайн). Для его продвижения вы создаете отдельную статью или страницу, посвященную этой теме. Тут же, в тексте, вы вставляете кнопку «Хэштег» и рядышком вставляете отдельный виджет, который будет отображать, в реальном времени, все твиты с использованием этого хэштега. Просмотрев дискуссию других пользователей, возможно, ваш не очень активный читатель созреет для того, чтобы принять в ней участие. Цель здесь — привлечь внимание читателя к происходящему, вовлечь его в дискуссию, ну и, конечно, задержать его на сайте.
Как установить?
Устанавливается кнопка «Хэштег» все с той же страницы, о которой я писала выше.
Кнопка «Упомянуть»Напоследок расскажу еще об одной хорошей кнопки, которой никто, к сожалению, не пользуется. А зря! Это, можно сказать, обычный твит, направленный заранее указанному профилю. Думаю, что кнопка мало используется потому, что многие не знают, как и где ее устанавливать. Приведу пару примеров, которые мне приходят в голову. Если вы знаете, что ваша целевая аудитория находится в Твиттер и активно использует эту соц. сеть, то почему бы вам не подстегнуть людей отправлять вам твиты прямо с сайта? Это может быть твит автору статьи, твит со страницы «О нас» или «Контакты», твит прямиком в службу поддержки на Твиттер и т. д. Понимаете, сколько возможностей оживить ваш аккаунт в Твиттер, вы упускаете?
Если человек пришел на ваш сайт, то какой-то интерес к вам он уже испытывает, поэтому подтолкнуть его к действию нужно прямо сейчас. Через минуту может быть уже поздно! Увы, такие настали времена, что мы забываем сделать что-то очень быстро, так как переключаем внимание с одного на другое каждую минуту. А чем моложе ваша аудитория, тем сильнее проявляется это явление, поэтому не забывайте о существовании этой кнопки и старайтесь использовать ее, где это уместно.
Как установить?
Устанавливаем кнопку все с той же страницы. Если вы читали инструкции к предыдущим кнопкам, то все параметры кнопки «Упомянуть» в Твиттер, вам должны быть понятны.
Смотрите ниже, как работает такая кнопка. Не забудьте твитнуть мне, что вы думаете об этой статье 🙂 Мне важно знать, что думают мои читатели, поэтому буду рада услышать вас.
Пример кнопки «Упомянуть»
Виджеты ТвиттерС кнопками Твиттер мы разобрались. Теперь мне бы хотелось вкратце рассказать вам об официальных виджетах, которые есть у Твиттер. Скрипты для всех виджетов, вы можете получить по этой ссылке .
Виджеты бывают следующего типа:
- Обычный виджет с последними твитами;
- Виджет поиска , который показывает результаты поиска по заданному ключу в реальном времени. Этот тип виджета очень удобен для поиска, например, по вашему брендовому хэштегу. Смотрите пример его использования в разделе кнопка «Хэштег» для Твиттер;
- Виджет «Избранное» — показывает твиты, которые вы добавили в избранное. Этот тип виджета может использоваться, к примеру, чтобы показать позитивные отзывы о компании. Почему нет?
- Виджет «Коллекции» — коллекции — это что-то между избранным и списками. Вы можете вручную выбирать, какие твиты попадут в коллекцию. Замечу, что у каждой коллекции есть своя ссылка и описание. Эта функция в Твиттер очень мало используется, хотя и очень интересна.
- Виджет «Списки» показывает созданные вами списки профилей. Здесь тоже можно скреативничать и сделать что-то интересное и полезное для читателя, что, в то же время, принесет пользу и вам. Как насчет списка партнеров, аккаунтов вашей компании (если их много), портфолио из управляемых вами аккаунтов на Твиттер (для агентств и фрилансеров) или, например, список членов, состоящих в вашем клубе? Опять таки простор для креативности здесь не ограничен.
Пример обычного виджета Твиттер
ВконтактеУ социальной сети Вконтакте, как и у других, существует целая куча различных кнопок и виджетов. Полный их список можно увидеть на сайте разработчиков: https://vk.com/dev/sites
Опять таки, я пройдусь только по самым важным, иначе эта статья будет не статьей, а целой книгой… Думаю, что в виджетах ВК будет намного проще разобраться, так как веб-сайт и вся необходимая документация имеются и на русском языке.
Кнопка «Мне нравится»Как установить?
Сначала вам нужно зайти на страницу виджета. Ссылку на список виджетов, я дала в самом начале раздела Вконтакте.
Как установить?
Для того, чтобы вставить виджет «Сообщество» в сайт, вам, прежде всего, необходимо ввести ссылку на вашу страницу или группу во Вконтакте. Далее, вы выбираете, хотите ли, чтобы виджет отображал лица участников группы или поклонников страницы, а также последние новости со страницы или же вы желаете простой плагин с кнопкой «Нравится». Так как виджет ВК очень похож на Фейсбуковский, то рекомендации по поводу вида плагина остаются теми же. Не буду повторяться, поэтому, если интересно, смотрите раздел плагинов Фейсбук.
Далее идут параметры, относящиеся к размеру плагина и его внешнему виду. Тут все зависит от цветовой палитры вашего сайта и доступного места под плагин. В принципе, цвет вы можете выбирать любой, но все же рекомендуется сохранять оригинальную цветовую палитру, так как такие цвета привычней пользователям и не пугают их. Ну и наконец мы добрались до последнего пункта — вставляем код на сайт. Как вы уже помните, первая часть кода идет в тег страницы, а вторая часть в то место, где будет стоять плагин.
Совсем недавно я создала страничку блога «Про СММ» в Вконтакте. Поэтому, если желаете получать последние обновления в этой соц. сети, то присоединяйтесь!
Пример плагина «Сообщество» Вконтакте
Как и схожий по названию плагин на Фейсбук, этот виджет рекомендуется для всех, кто желает развивать свой личный бренд. Если вы, например, автор книг или блога, журналист, адвокат, агент недвижимости и т. д., то почему бы вам не установить такую кнопку у себя на сайте? Потенциальным покупателям проще устанавливать контакт с реальным человеком, чем, например, со страницей или группой, за которой не понятно кто стоит. Так уж мы устроены, человек — социальное существо, и мы любим личный контакт, поэтому, такой виджет придется очень кстати любому профессионалу, в какой области вы бы не работали.
Как установить?
Установить его проще простого! Заходите на страницу виджета в ВК и вводите адрес своего профиля. Далее, выбираете, какую кнопочку хотите установить. Еще раз повторю, что устанавливать через скрипт желательно только кнопки (например, кнопка или легкая кнопка). Если вам нужны просто ссылка, то сделать это лучше через код HTML, чтобы не перегружать сайт скриптами без которых можно очень просто обойтись. Эффект будет тот же самый, а сайт будет грузиться быстрее.
Другие виджеты ВконтактеРебята, выше я перечислила самые распространенные и эффективные виджеты ВК, но на этом список не ограничивается. У Вконтакте есть еще целая куча разных виджетов, которые могут быть полезны в той или иной ситуации. Например, виджет «Опрос» , которым практически никто не пользуется. Если вы создали опрос на вашей странице ВК, то почему бы не вставить его в статью по тематике? Читатели вашего сайта смогут проголосовать за свой вариант прямо у вас на сайте, а информация об этом пойдет и в ВК. Неплохо, не так ли?
Есть также интересный виджет «Рекомендации» , который выдает самые интересные статьи на вашем блоге или сайте. Степень интереса того или иного контента определяется количеством нажатий на кнопку «Мне нравится». Одним словом, Вконтакте будет автоматически считать, сколько пользователей кликнули по кнопкам «Нравится» и будет собирать все самые интересные статьи в этом блоке. Если ваша целевая аудитория широко представлена в соц. сети Вконтакте, то стоит попробовать и установить эти два виджета: «Мне нравится» и «Рекомендации». Уверена, что результаты не заставят себя ждать!
LinkedInТеперь давайте поговорим про — LinkedIn. Эта сеть только наращивает популярность у нас, поэтому не многие еще понимают, как ей можно пользоваться для достижения положительных результатов. В Америке, откуда эта сеть родом, мало какой профессионал или компания не имеет своего профиля в LinkedIn. Там на вас косо посмотрят, если вы хотя бы не зарегистрированы в соц. сети. В Европе использование соц. сети очень сильно отличается в зависимости от страны. Например, Великобритания и Швеция являются лидерами по включению LinkedIn в маркетинговую стратегию компаний. Они не только рекомендуют работникам иметь профили в сети, но и нанимают людей через LinkedIn, рекламируют компании и продукцию, ищут потенциальных клиентов и партнеров и т. д.
Но мы сегодня не об этом. Мы будем говорить о социальных плагинах, которые разработал для нас LinkedIn и о том, где и как их можно использовать. Не спешите говорить, что эта сеть вам не интересна! А если вы работаете в сфере консалтинга, b2b, то вам читать этот раздел просто обязательно.
Итак, у LinkedIn, как и у всех соц. сетей, есть отдельная страница, где можно увидеть все существующие кнопки и плагины: https://developer.linkedin.com/plugins
Сайт разработчиков, к сожалению, существует только на английском языке, поэтому постараюсь как можно подробнее объяснить установку каждого плагина и кнопки.
Как установить?
Как установить?
Устанавливается кнопка «Подписаться» с той же страницы разработчиков, ссылку на которую я дала в начале раздела. В левой колонне кликните на «Follow company » и LinkedIn покажет вам нужный раздел. Сначала выберите, какого вида кнопку вы хотите установить: с вертикальным или горизонтальным счетчиком или может самую обычную и кликните на Get it . Далее вам необходимо ввести название компании для которой вы устанавливаете кнопку. В соответствующей графе, начните писать название, буква за буквой, и оно должно будет выпасть в списке. Иногда список загружается довольно долго, поэтому не торопитесь. Название нужно писать точь-в-точь, как оно написано на странице компании. Затем выберите язык кнопки — Russian, вид кнопки и нажмите на кнопку «Получить код «. Теперь просто вставьте код в нужное место на сайте и — все готово! На русском, кстати, кнопка будет называться «Отслеживать», что мне не очень нравится. Я лично оставила бы английскую версию. Благо все уже в курсе, что означает слово «фоллоу» 🙂
Я пока не создавала страничку компании в LinkedIn, поэтому реального примера пока нет. Если в будущем сделаю страничку, то обязательно вставлю ее в качестве примера в статью.
Кнопка «Личный профиль»Это еще один хороший, но опять таки мало используемый плагин. Эта кнопка отображает фото личного профиля, должность и показывает друзей пользователя, который видит этот плагин. Конечно же, чтобы LinkedIn смог показывать профессиональные связи читателю вашего сайта, он — читатель — должен быть залогиненым (если так можно сказать) в LinkedIn. Одним словом, пользователь должен войти в LinkedIn, чтобы плагин функционировал на полную.
Для кого этот плагин может быть полезен? Думаю, что для людей, работающих в секторе b2b, он будет наиболее полезен. Хотя использовать его можно где угодно: на странице об авторах сайта, на странице о сотрудниках компании, на страницах о ваших клиентах и партнерах (с их позволения, конечно) — вариантов много. Главное, чтобы такие кнопки-профили органично вписывались в ваш сайт и стратегию компании. Если ваши сотрудники имеют полузаполненные профили, заходят в LinkedIn один раз в год и имеют 10 связей, то смысла выставлять такие профили на показ нет. Если же ваша компания наоборот активно занимается продвижением в соц. сети, то такой плагин может принести вам много пользы.
Кнопка +1Как установить?
Как установить?
Все кнопки и виджеты Pinterest устанавливаются по ссылке, указанной выше. Чтобы установить кнопку «Pin it», необходимо выбрать соответствующую кнопку в левой колонне.
Кнопочки Pinterest немного сложнее в установке, так как у них много различных параметров, но все же вполне реально установить их самостоятельно.
1) В самой первой строке «Button Type » вы можете выбрать тип кнопки, которую желаете установить на сайт: заданное изображение, любое изображение со странцы или кнопка Pin it, которая будет появляться на изображениях страницы/статьи.
2) Вторая строка — «Appearence «, т. е. вид кнопки. Здесь Pinterest предлагает много параметров на выбор: большая или маленькая; прямоугольная или круглая; красная, серая или белая; текст на английском или японском.
3) Третья строка — это счетчик. Вы можете здесь выбрать счетчик сверху, сбоку или совсем убрать его.
В зависимости от типа кнопки, который вы выберете, ее параметры будут меняться.
- Кнопка «One image » подразумевает, что вы хотите задать определенное изображение, которое читатель сайта сможет запинить для определенной ссылки. То есть выбора у читателя не будет, даже если на вашей странице имеются другие изображения. Если вы решите задать изображение для кнопки, то такую кнопку нужно устанавливать отдельно на каждую страницу, так как она требует введения ссылки на страницу/статью. В первую графу вам необходимо вставить ссылку на страницу, которой пользователи будут делиться, т. е. ту ссылку, которую они будут пинить. Далее, указываете ссылку на изображение. Это, кстати, может быть любой источник, даже вне вашего сайта. В последней графе, вы можете указать текст к изображению, которым пользователь будет делиться. Это может быть, например, название страницы или заголовок статьи. Перед отправлением пина, пользователь, при желании, сможет заменить ваш текст на свой собственный.
- Кнопка «Any image » или любое изображение. Эта кнопочка совсем простая и не требует никаких дополнительных параметров. Вам всего навсего нужно выбрать размер и вид кнопки, а также решить нужен вам счетчик или нет.
- Кнопка «Image hover «, т. е. кнопочка, которая будет появляться на самом изображении, при наведении на него курсора мышки. Вы можете попробовать, как это работает на изображении-примере Pinterest.
Теперь пара слов о коде , который вам нужно установить на странице. Pinterest, как и другие соц. сети, имеет два кода: первая часть вставляется в тег , а вторая часть в то место, куда устанавливается сама кнопка. Если у вас несколько кнопок Pinterest на одной и той же странице, то вам нужно установить первый код только один раз.
Примерная часть кода, который устанавливается только один раз в тег страницы: .
Кнопка «Подписаться»Pinterest, как и Google+, не делает различий между личными аккаунтами и аккаунтами компаний, поэтому кнопка «Подписаться» для того и другого создается в одном месте. Эту кнопочку установить проще простого. Все, что вам нужно сделать, — это ввести ссылку на ваш профиль и задать имя кнопки.
Как я уже написала выше, я не могу вставить кнопки Pinterest из-за конфликта скриптов, поэтому если хотите подружиться со мной в Pinterest, то просто перейдите по этой ссылке.
Бонус: гиперссылкиНиже, я приведу примеры, как такие ссылки создаются вручную. Вы также можете попробовать специальный генератор ссылок — Share Link Generator . На этом сайте вы можете создавать ссылки для Фейсбук, Твиттер, Google+, Pinterest и LinkedIn. Разобраться в сайте будет просто, поэтому не буду объяснять что и как. Тем не менее, посмотрите мои советы, так как генератор ссылок не дает полной ссылки для формата HTML + кода как сделать так, чтобы ссылка открывалась в новом окне. Все это плюс примеры ссылок для соц. сети Вконтакте, вы найдете в этом разделе.
В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!
Социальные сети предоставляют коды своих кнопок и виджетов для размещения на сайте, и прилагают инструкции по их установке в системе управления сайтом. Установить их позволяют любые CMS (операционные системы), главное гармонично вписать их в дизайн вашего сайта.
Каковы возможности и функции?Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.
Кнопки социальных сетей Share Pluso
В последнее время стало модно устанавливать кнопки социальных сетей на сайты и блоги, и в этом нет ничего удивительного. Во-первых, кнопки позволяют увеличивать «лайки» и «сердечки», что положительно сказывается на продвижении статей в социалках. Во-вторых, существуют отдельные разновидности кнопок, позволяющих делиться ссылками на отдельные страницы сайта в социальных сетях – это привлекает дополнительных посетителей из Вконтакте, Фейсбука, Одноклассников, Твиттера и т.д. В-третьих, статьи, набравшие большое количество «лайков» и «сердечек», пользуются большим доверием у читателей сайта.
Поэтому очень важно знать, как установить кнопки социальных сетей на сайт, чтобы помочь развиваться веб-ресурсу. Будут рассмотрены самые популярные социальные сети
- Вконтакте
- Фейсбук
- Одноклассники
- Гугл «+1»
- Твиттер
- Мой Мир
Здесь будет рассмотрена установка стандартных кнопок, предлагаемых самими социальными сетями. Каждую кнопку в этом случае придется устанавливать отдельно от других, это занимает некоторое время, но и смотрится очень неплохо.
1.1. Вконтакте 1.1.1 Кнопка «сохранить»Кнопка достаточно гибкая, надпись на ней можно менять на любую желаемую (по умолчанию «сохранить»).
Сначала вам нужно перейти на страницу с , там же вы получите код скрипта, который нужно будет установить на свой сайт, чтобы кнопка отображалась.
Здесь можно выбирать один из 5 стилей : кнопка, кнопка без счетчика, ссылка, ссылка без иконки, иконка.
Поле «текст » позволяет изменять стандартную надпись «сохранить» на свою.
В качестве url-адреса можно выбирать адрес страницы с кнопкой или же адрес другой страницы (на ваш выбор). В первом случае кнопка будет делиться ссылкой на ту страницу, где расположена сама кнопка. Во втором случае кнопка будет делиться указанной вами ссылкой, независимо от того, где она сама находится.
Код для вставки состоит из двух частей: первая должна располагаться в любом месте между тегами и , вторая – в том месте, где должна отображаться кнопка. Об установке кнопки на сайт читайте в пункте .
1.1.2 Кнопка «мне нравится»Второй вариант кнопки – виджет «Мне нравится ». Его будет проще установить на сайт, т.к. в конце вы получите всего одну часть кода, которую нужно будет разместить в нужном месте сайта.
Для настройки кнопки перейдите по этой ссылке . Здесь также необходимо заполнить ряд параметров.
Название сайта
– здесь лучше указать краткое и настоящее название вашего сайта.
Адрес сайта – укажите адрес главной страницы вашего сайта.
Основной домен сайта – укажите главное зеркало сайта (его можно найти в в качестве параметра оператора «Host»), если затрудняетесь это сделать – то оставьте предлагаемое ВКОНТАКТЕ.
Варианты кнопки – это различные стили кнопки, они влияют на ее внешний вид.
Высота кнопки – геометрические размеры «Мне нравится».
Название кнопки – доступно два варианта (мне нравится, это интересно).
Код для вставки – тот код, который нужен для отображения кнопки социальной сети Вконтакте.
1.2 ФейсбукНастраивается кнопка на этой странице . Могут возникнуть трудности, т.к. комментарии к форме написаны на английском языке, но ниже вы можете прочитать краткое описание каждого поля.
URL
to
Like
– url-адрес страницы для кнопки (если поле не заполнено, то будет браться адрес страницы, на которой расположена кнопка).
Send Button – наличие галочки включает новую возможность – отправлять ссылку в Фейсбук (отобразится дополнительная кнопка – «отправить»). При включении будет одновременно отображаться две кнопки.
Layout Style – стиль кнопки, влияет на ее внешний вид (стандартным считается button_ count ).
Width – ширина кнопки в пикселях.
Show Faces – при включении будут показываться аватары людей, уже нажавших на данную кнопку.
Font – тип шрифта кнопки.
Color Scheme – фон пространства рядом с кнопкой (белый и черный).
Verb to display – название кнопки (нравится, я рекомендую).
Get Code – кнопка, формирующая код скрипта.
1.3 Одноклассники и Мой мирДанные социальные сеть приобрели широкую популярность в русскоязычном интернете, там обитает огромное число людей, поэтому не стоит пренебрегать установкой кнопки «Класс» от сервиса «Одноклассники» и «Нравится» от сайта «Мой мир».
Для настройки кнопок нужно перейти на . Можно добавлять кнопки по отдельности, настраивая каждую по-своему, а можно редактировать обе кнопки одновременно.
Размер по высоте – геометрический размер кнопок.
Вид – внешний вид рамки кнопок.
– выбор кнопок (нравится, класс)
Счетчик – включение и выключения счетчика нажатий на кнопки (справа, сверху – расположение счетчика).
Текст на кнопках – выбор одного из трех названий, доступных для кнопок.
Код для вставки – код скрипта, который нужно будет устанавливать на сайт.
1.4 Гугл «+ 1»Новая социальная сеть, которая за короткое время набрала огромную аудиторию. Трудно представить себе сайт без кнопки «+1», т.к. она не только позволяет добавлять ссылки в социальную сеть и увеличивать количество «плюсиков», но и может влиять на результаты сайта в ТОПе поисковой системы Google.
Все подробности об этом, а также установка и настройка кнопки находятся .
1.5 ТвиттерПопулярнейший сервис коротких сообщений оставлять без внимания нельзя. Установите себе кнопку от данной социальной сети и увидите, как быстро люди станут делиться ссылками на ваш сайт в Твиттере. Настроить кнопку можно на этой .
Сначала нужно выбрать нужную кнопку (нас интересует первый вариант – кнопка «отправить ссылку»).
После этого на странице появится форма с несколькими полями, которые нужно заполнить.
Отправить ссылку
– выбор страницы, на которой расположена кнопка, или любой другой.
Текст – выбор текста, который будет появляться рядом с кнопкой (НЕ НА САМОЙ КНОПКЕ).
Показывать счетчик – включить или выключить отсчет количества нажатий на кнопку.
С помощью – выбор способа добавления сообщения ссылки в Твиттер (практически ни на что не влияет).
Отметить – выбор метки, которая будет публиковаться в Твиттере (практически ни на что не влияет).
Большая кнопка – увеличение геометрического размера кнопки.
Отказаться от адаптации Твиттера – отказ от стилей Твиттера (лучше оставить поле без галочки).
Язык – выбор языка кнопки.
Справа будет сформирован код, который нужно добавить на сайт.
1.6 Я.руДля этого нужно заполнить несколько полей, которые сформируют нужный код скрипта.
Размер
– маленький или большой размер кнопки.
Стиль – выбор между кнопкой или иконкой.
Наличие счетчика – включение или выключение счетчика нажатий на кнопку.
Внешний вид кнопки – пример того, как будет выглядеть кнопка.
Заголовок – выбор заголовка для страницы (произвольный или заголовок текущей страницы).
Код для вставки – нужный код, который добавляется на сайт.
2. Готовые кнопки для сайтаНо если желания добавлять код каждой кнопки на свой сайт не имеется, то можно воспользоваться стандартными скриптами, которые формируют сразу группу кнопок социальных сетей. В этом случае достаточно просто добавить один код такого скрипта на свой сайт, и у вас сразу будут установлены кнопки самых популярных социальных сетей.
Для настройки блока и выбора нужных социальных сетей перейдите по этой ссылке . На скрине ниже видно, что можно выбирать кнопки нужных социальных сетей из предлагаемых, а также слегка редактировать внешний вид блока.
Набор сервисов
– выбор кнопок социальных сетей для сайта (те, что с галочкой – будут отображаться на сайте).
Код – нужный скрипт, который необходимо добавить на сайт.
2.2 Кнопки «PLUSO»В последнее время широкую популярность приобрел конструктор кнопок социальных сетей – PLUSO. Перейти на сайт можно по этой ссылке .
Конструктор достаточно гибкий, имеет множество настроек, благодаря чему вы сможете сформировать кнопки социальных сетей такими, какие бы отлично вписывались в дизайн сайта.
Сначала нужно выбрать стиль кнопок и счетчиков из нескольких предлагаемых (горизонтальные, вертикальные, цветные, бесцветные и т.д.).
Затем необходимо настроить ряд параметров, выбрав
- расположение блока (вертикальный, горизонтальный);
- цвет кнопок (яркие, темные);
- величину блока (крупный, маленький);
- счетчик (наличие или отсутствие);
- фон (бесцветный или цветной);
Код будет сформирован согласно указанным вами параметрам, после чего его нужно вставить на сайт.
S hare42Еще один сервис, позволяющий сконструировать кнопки для своего сайта – Share42.com/ru .
Этот генератор позволяет настраивать размер кнопок, определять нужные социальные сети из огромного числа доступных, а также редактировать внешний вид иконок.
Выберите размер кнопок и нужные социальные сети, а затем перейдите к настройке дополнительных опций.
Тип панели с иконками – отображение блока кнопок (очень интересен вариант «вертикальная плавающая»).
Ограничить видимое кол-во иконок – выбор числа отображаемых кнопок (другие будут скрыты за ссылкой).
Кодировка сайта – выбор кодировки вашего сайта.
Добавить иконку сайта Share42.com – возможно, следует убрать галочку.
Показывать счетчики – включение счетчика нажатий по кнопкам (только при работающем jQuery).
Установка данного скрипта довольно сложная, но она пошагово описывается на самом сайте Share42.
3. Как устанавливать кнопки на сайтЕсли код, который требуется разместить на сайте, состоит из двух частей (как в случае с кнопкой Вконтакте), то каждая из частей устанавливается отдельно. Если код не делится на две части, то данный шаг можно пропустить.
Первую часть кода нужно добавить между тегами и . Для этого зайдите в админ-панель WordPress и перейдите к редактору шаблона.
В редакторе шаблона нужно найти файл «Заголовок» (header.
php)
, если такого нет, тогда – «Основной шаблон» (index.php)
. Теперь необходимо найти тег или . Если в указанных файлах таких тегов нет (все темы разные, такое вполне может быть), тогда вам придется открывать для редактирования все файлы и искать в каждом из них тег . Для поиска можно использовать сочетание клавиш «Ctrl+F».
Как только вы найдете нужные теги, можете размещать первую часть кода сразу перед закрывающимся тегом , чтобы случайно не задеть коды других скриптов.
Вторая часть кода помещается там, где вы хотите видеть кнопки социальных сетей, подобранные для сайта. Если код состоит всего из одной части, то достаточно проделать только эту операцию.
Чаще всего кнопки добавляются перед статьей или в ее конце. Проще, конечно, второй вариант. Его мы и рассмотрим.
Вам нужно найти то место, где заканчивается статья (основная текстовая часть страницы). Для этого нужно редактировать файл «Одна запись» (single. php) .
Теперь нужно найти тот оператор, который отвечает за вывод основного содержимого статьи. В моем случае это «the_content», сразу после него и размещается код кнопок.
Аналогично можно размещать код вначале статьи, нужно только найти место между заголовком и текстом статьи.
Приветствую! Вот я иногда задумываюсь, зачем в конце каждого поста размещать кнопки социальных сетей? Какой в них смысл? Может на самом деле в них и нет никакой пользы, а их значение преувеличено?
Как то раз я уже писал про размещение кнопок на страницах блога. Но не упоминал о пользе данного действия, лишь подчеркнул, что сохраняя страницу в соцзакладках, шансы ускорить индексацию заметно увеличиваются.
Зачем нужны кнопки- Первое уже упомянуто — индексация поисковыми системами не заставляет себя ждать;
- Во-вторых, даже если только Вы будете сохранять ссылки в соцсетях, то любопытные обязательно найдутся. Посмотрят, скажут ага, здесь есть что-то интересненькое, перейдут по ссылке и возможно заинтересуются. Таким образом можно сыскать небольшой трафик, а если заглянувший еще и сам сохранит ссылку, но уже в своем профиле, то трафик может заметно увеличиться. В последствии заглянувший ради любопытства посетитель сможет перерасти в потенциального постоянного читателя, например, подписавшись на ленту RSS. Кто знает, может в будущем он станет достойным партнером или наоборот составит ;
- В-третьих, наверняка у Вас, как впрочем и у большинства, идет борьба за получение обратных ссылок. И желательно чтобы внешние сайты ссылались не только на главную страницу, как это часто бывает, но и на внутренние — поисковики такое любят. И кнопки социальных сетей предоставляют нам такую возможность!
Другое дело, что не все ссылки с таких сайтов индексируются. У Яндекса, например, если вернуться к социальным закладкам, стоят фильтры на из некоторых сервисов. Однако, совсем недавно он стал индексировать крупнейшую социальную сеть рунета «ВКонтакте» — кто знает, возможно в будущем…
Свои выводы я уже сделал и считаю, что кнопки соцсетей нужны на блоге, правда с одним НО: существенную пользу они могут приносить только на этапе становления блога. Раскрученные блоги вряд ли нуждаются в подобном. А Вы как считаете?
Вот список сервисов, которые предлагается выбрать на свое усмотрение, отметив галочкой:
В том же окне справа выводится сгенерированный код, в зависимости от предыдущего выбора, который потребуется вставить на страницах блога. Например, в конце каждого поста.
Яндекс сравнительно недавно начал предоставлять вебмастерам такую возможность в виде кнопок основных социальных сервисов, но их уже можно увидеть на довольно большом количестве блогов. Это еще раз говорит о популярности соцсетей.
