Как сделать кнопку поделиться на сайте в вордпресс
Обновлено: 06.07.2024
Для продвижения блога или сайта важно иметь соц. кнопки поделиться. Это поможет распространить ссылки на Ваш блог, привлечёт новых посетителей.
После публикации первых статей уже можно подключить их.
Зайдите в панель администрирования нужного блога, прокрутите вниз до ссылки Администратор WP, нажмите на неё и попадёте в админку с чёрной панелью.
Сбоку появятся доступные кнопки, к сожалению там нет самых популярных у нас ВКонтакте, Одноклассники и Мой Мир
Придётся создать их. Нажимаем ссылку Добавить новый сервис.
В новом окне надо ввести название, url- адрес сервиса и адрес иконки.
Иконки можно взять с сайта соц. сети или нарисовать , или где-нибудь скачать. Необходимый размер 16х16 пикселей. Формат ICO, PNG, JPEG.
Если Вы хотите свои иконки загрузите их в файлы и скопируйте ссылку.
Я напишу пример с оригинальными иконками с сайта соц сети.
После заполнения данных кнопки нажмите создать кнопку.
Новая кнопка появится в поле Доступные сервисы, чтобы она появилась на сайте перенесите её в поле Включённые сервисы.
В поле Посмотреть, вы увидите как кнопки будут выглядеть на страницах.
Выберите стиль иконки, как будет выглядеть кнопка с надписью, картинкой или всё.
Включите галочки Показать кнопки на , там где хотите, если только под статьями, то Записи.
Этот способ можно использовать и для установки кнопок поделиться на CMS WordPress, на своём хостинге, только надо установить плагин Jetpack.
Возможно, вы слышали, что социальные сети являются альтернативой поисковых систем в области генерации трафика для сайта.
Можно даже сказать, что трафик из соц. сетей значительно качественней и безопасней, чем поисковой. Но, чтобы его привлечь, нужно дать пользователям сайта удобные способы взаимодействия через социальные сети.
Размещение кнопок социальных сетей на своем проекте
Самый простой способ добавить кнопки соц. сетей на свой сайт под управлением WordPress – это установить специальный плагин и разместить соответствующий виджет. Универсальный плагин, способный выполнять как обычные функции (лайк, репост), так и дополнительные (голосование, замок на контент), к сожалению отсутствует. Но, эту проблему можно решить установкой нескольких.
Для них существуют различные плагины, встраивающие виджет соц. сети на сайт, одним из которых является Easy Social Share Buttons. Это легкий и быстрый плагин, позволяющий разместить кнопки более 40 социальных сетей, таких как Facebook, Twitter, Вконтакте, Google+, и другие.
Easy Social Share Buttons
Обладает огромным количеством полезных функций, среди которых:
Настройка Easy Social Share Buttons
В Easy Social Share Buttons достаточно много настроек, которые по началу могут запутать. Чтобы этого не произошло, разработчики предусмотрели мастер настройки Quick Setup, который поэтапно проходит все основные опции, позволяя создать виджет готовых кнопок на WordPress сайт.
После окончания всех этапов мастера настройки, ваш сайт на WordPress приобретет удобный и привлекательный способ для взаимодействия с пользователями в социальных сетях, который позволит им делиться контентом с друзьями, тем самым создавая условия для входа на сайт новых посетителей.
Кнопки встроенные в голосование
Добавив какое-нибудь провокационное соц. голосование на сайт, можно привлечь внимание большого количества посетителей. Это очень эффективный способ генерации трафика, поэтому не стоит его игнорировать.
Правда, с этим у WordPress все не так радужно, поскольку плагины реализующие данную возможность практически отсутствуют. Их всего несколько, наиболее функциональный — WP Social Votes. Этот плагин позволяет принимать участие в голосованиях через 5 соц. сетей, таких как Facebook, Вконтакте, Одноклассники, и другие.
В WP Social Votes можно вывести голосование в любой виджет, статью или страницу, через шоркткод [social_votes]. Он автоматически изменяет размер изображений, добавленных в виджет, а также позволяет сделать это вручную. Плагин практически не имеет настроек, но альтернативы для Российских соцсетей нет.
Размещение кнопки для блокировки контента
Есть разные плагины, с помощью которых можно добавить замок к содержимому на WordPress, но большинство из них работает только с Facebook и Twitter. Поддержка Российских социальных сетей (Вконтакте и Одноклассники) есть только в Sociallocker (Социальный замок).
Использование Sociallocker
Далее, понадобиться выбрать какие социальные сети вы хотите использовать, чтобы открывать замок, а также заполнить дополнительную информацию о них. После завершения настройки появится шорткод, которым можно добавить замок на любую статью, страницу, или виджет WordPress.
У Sociallocker есть бесплатная версия, созданная для тестирования. Она обладает всеми основными функциями и может использоваться неограниченное количество времени. Некоторыми описанными возможностями оснащена только платная версия.
Дополнение
В качестве дополнения, существует еще один эффективный способ привлечения соц. трафика — это кросспостинг, так называемая ретрансляция публикуемого на сайт контента в популярные сообщества. Кросспостинг позволяет получить ссылки с авторитетных рессурсов, а также запустить вирусное распространение материалов с вашего сайта.
Чтобы автоматизировать кросспостинг в рамках сайта под управлением WordPress, можно использовать плагин NextScripts: Social Networks Auto-Poster (сокращенно SNAP). Он поддерживает автопостинг в большинство популярных соцсетей, таких как:
- Facebook – с возможностью осуществлять автопостинг в ваш профиль, страницу, группу.
- Вконтакте – кросспостинг в профиль, паблик, группу.
- Twitter – автопостинг с прикреплением фотографий.
- WordPress – кросспостинг контента в другие блоги.
- Множество других крупных площадок.
Кросспостинг SNAP в Facebook
Facebook использует специальный протокол для проверки авторизации (OAuth 2.0), поэтому, чтобы настроить автоматический кросспостинг, понадобиться создать приложение, подключить его на сайт, разрешить ему доступ.
Создание приложения
Подключение и авторизация
Кросспостинг SNAP в Вконтакте
Вконтакте также использует протокол OAuth для входа, поэтому, тоже требует создания приложения, чтобы автопостинг работал.
Создание приложения
Подключение и авторизация
Подключение происходит точно также, как и предыдущее. В SNAP добавляется новый аккаунт Вконтакте, заполняется адрес страницы, на которую пойдет автопостинг, вставляется ID приложения.
Заключение
Применяя на своем ресурсе эти эффективные способы привлечения трафика из соц. сетей можно очень быстро раскрутить свой проект. Кроме того, это определенно поднимет авторитет сайта в глазах поисковых систем, что увеличит трафик и с них. Таким образом, соц. сети становится одной из самых важных вещей в увеличении посещаемости любого ресурса. Этот факт невозможно игнорировать, если хочется добиться каких-то больших успехов.
Приветствуем вас! Как вы уже наверняка знаете социальных сетях люди проводят большую часть своего времени. Простейший способ это — добавить кнопки социальных сетей в посты и страницы WordPress.
Они позволяют посетителям вашего сайта делиться вашим контентом в своих социальных сетях. Об этом мы уже писали в нашей предыдущей статье. Ну что не будем терять время и сразу приступим к делу. Итак.
Добавление кнопок социальных сетей в WordPress
Для этого урока мы будем использовать плагин Shared Counts. Используя этот плагин, вы можете легко добавлять кнопки социальных сетей в свои статьи, а также отображать их количество.
В отличие от других плагинов, Shared Counts использует уникальный метод кэширования, тем самым оказывает минимальное влияние на скорость и производительность вашего сайта.
Нажмите на белую область в поле, чтобы добавить дополнительные кнопки общего доступа, которые вам необходимы.
Как отобразить количество социальных акций в WordPress
Чтобы показать количество социальных акций, вы можете выбрать один из двух источников.
Теперь веб-сайт отправит ссылку для подтверждения на ваш адрес электронной почты. Вам нужно нажать на ссылку, чтобы подтвердить его.
Как только ваша электронная почта будет подтверждена, вам необходимо войти в свою учетную запись SharedCount и перейти к своей учетной записи в верхней правой части экрана. Там вы увидите свой адрес электронной почты и выпадающий значок рядом с ним.
Ниже вы увидите некоторые другие настройки, связанные с количеством социальных сетей. Вы можете просмотреть и изменить их.
Добавление кнопок социальных сетей на выбранные страницы
Обычно кнопки социальных сетей обычно не добавляются на страницы WordPress. Но, вы можете использовать шорткод Shared Counts: [[shared_counts]] .
Вы можете добавить его в любом месте на вашем веб-сайте для отображения кнопок обмена. Итак, в редакторе блоков WordPress есть блок шорткодов.
Просто добавьте блок в свою область контента, а затем вставьте шорткод Shared Counts.
Используя шорткод, вы можете добавлять кнопки социальных сетей в любое место на своем сайте.
Добавление плавающей панели социальных сетей в WordPress
Еще один популярный способ отображения кнопок социальных сетей – это добавление плавающей панели социальных сетей. Это социальное меню для совместного использования, которое отображается на экранах пользователей при прокрутке вниз.
В отличие от стандартных кнопок общего доступа, плавающая панель социальных сетей будет отображаться все время, пока пользователь читает вашу статью, делая их более заметными.
Для этого вам необходимо установить и активировать плагин Sassy Social Share .
Во-первых, вам нужно выбрать стиль иконок. Плагин поставляется с квадратными, закругленными и прямоугольными кнопками.
Вы можете выбрать стили как для плавающей социальной панели общего доступа, так и для стандартной панели общего доступа.
Мы рекомендуем использовать плавающие или статичные социальные кнопки. Использование обоих параметров будет излишним.
Теперь вы можете посетить свой веб-сайт, чтобы увидеть плавающие кнопки социальных сетей в действии. Вот как это выглядело на нашем демо-сайте.
Как видите ничего сложного здесь нет. Все делается легко и просто. Ну что у нас на этом все. Всем пока!
Сегодня же поговорим о кнопках от Твиттера, ВКонтакте и остальных крупнейших социалок. Причем, как я уже упоминал, в статье о social buttons Гугл плюс и Фейсбука, ссылка на которую дана чуть выше по тексту, кнопки можно установить двумя способами. Во-первых, получив код при помощи конструктора, который имеется в распоряжении всех популярных сервисов. Во-вторых, создав социальные кнопки самостоятельно. И тот, и другой метод имеет свои плюсы и минусы, поэтому рассмотрим оба.
Получение кода и установка кнопки от ВКонтакте и от сервиса микроблоггинга Твиттер
Я уже писал довольно детально о регистрации в Твитере (тут - как зарегистрироваться и начать общаться в Twitter). Эта социальная сеть весьма популярна в рунете, поэтому очень важно дать своим читателям, которые являются ее пользователями, отметить ваши публикации и поделиться ими с друзьями. Такие действия пользователей окажут позитивную роль в продвижении вашего сайта, поскольку сигналы из социальных сетей скрупулезно учитываются поисковыми системами.
А теперь непосредственно переходим к получению кнопки для расшаривания от Твитера. Для этого нужно оказаться на официальной странице конструктора и произвести соответствующие настройки:
Именно этот вариант подходит для стандартного блога Вордпресс, если вы желаете выводить кнопочки расшаривания после каждой публикуемой статьи, то есть для динамических страниц записей. Первая часть результирующего кода будет примерно такой:
Только не забудьте прописать для тега A, который определяет ссылку в HTML, атрибут rel=“nofollow” с тем, чтобы не допустить утечки веса страницы. И обязательно замените значение атрибута data-via, поставив свое имя пользователя в Твиттере, проще говоря, свой логин, который используете для авторизации в этой социалке.
Для оптимизации скорости загрузки страницы вашего сайта эту первую часть нужно вставить на то место, где бы вы хотели видеть социальную кнопку от Twitter. Если после каждой публикации, то открываете шаблон SINGLE.PHP (для большинства тем WordPress) и находите такую строку:
Вставляете первую часть после этого фрагмента PHP кода, который отвечает за вывод постов. Обращаю ваше внимание на то, что названия шаблонов, где присутствует данная функция, могут быть разными, однако в большинстве из них присутствует составляющая SINGLE. Поскольку обычно кнопки соцсетей располагают для удобства в одном месте в одну строку, то ниже я приведу скриншот шаблона SINGLE.PHP, где у меня находится блок кнопочек. Вторая часть (скрипт):
остается неизменной и вставляется для ускорения загрузки страницы обычно перед закрывающим тегом BODY в шаблон FOOTER.PHP. Опять же, чуть ниже увидите соответствующую картинку.
Теперь попробуем получить кнопку для добавления ваших материалов пользователями в социальную сеть ВКонтакте (тут - регистрация ВК и вход в Контакт и настройка профиля). С этой целью идем на страницу генератора кода и выполняем необходимые настройки:
Первую часть полученного кода (выделена красным) рекомендуется вставить между открывающим и закрывающим тегами HEAD. Для обычной темы WordPress следует открыть файл HEADER.PHP и (можно перед закрывающим тегом) вставить этот фрагмент:
Снова приведу пример для наглядности (замечу, что скрипт можно поместить и перед закрывающим BODY, как в других случаях, но для разнообразия надо рассмотреть и этот вариант):
Ну, а второй фрагмент опять же помещаете туда, где хотите видеть кнопку. Для динамических страниц блога Вордпресс это шаблон SINGLE. Повторюсь, что возможны исключения, об этом я подробно писал в материале о получении кнопочек от Гугл+ и Фейсбука, ссылка на этот пост в самом начале публикации. Кстати, как и обещал, начинаем разбирать действия, которые помогут понять до конца не только алгоритм вставки необходимых кодов, но и настройку кнопок для их адаптации к дизайну вашего сайта.
Определение свойств CSS для блока кнопок (на примере Google plus, Facebook, Twitter, VKontakte)
Итак, надеюсь, вы поняли, как и куда вставлять полученные коды для кнопок соцсетей. Для закрепления, как и обещал приведу пример, как размещены части кодов четырех кнопок самых популярных социальных сетей у меня на блоге. Для начала скриптовые части кодов кнопок в шаблоне FOOTER (для VKontakte, по рекомендации, если помните, мы поместили скрипт между тегами HEAD, обратите внимание на скриншот выше):
А вот участки, отвечающие собственно за месторасположение социальных кнопочек (SINGLE.PHP):
Каждую из кнопок я заключил в контейнер DIV и прописал соответствующие стили CSS, чтобы они выглядели красиво и соответствовали дизайну страниц сайта. С этой целью определил идентификаторы (ID) для каждого DIV, дав им названия и назначив свойства с определенными параметрами:
Официальные кнопки от сайтов Одноклассники и Surfingbird
Думаю, вы уже на автомате сориентируетесь, куда вставить первый отрывок (выделенный зеленым):
а куда скриптовый фрагмент:
Возможно, кто-то захочет установить Share Button от сервиса Surfingbird. В таком случае настроить получение кода можно на его официальной странице:
снова размещаем перед закрывающим BODY, а непосредственно кнопку (предварительно прописав nofollow):
В нужное место страницы.
Создание кнопок для социальных сетей самостоятельно (без скриптов и плагинов)
В заключение рассмотрим, как можно сделать кнопки расшаривания для своего сайта самому. Я уже говорил о том, что каждый метод производства соцкнопок обладает своими преимуществами и недостатками. Данный вариант не исключение.
К плюсам можно отнести отсутствие скрипта в коде (который все-таки оказывает определенную нагрузку на сервер и негативно влияет на скорость загрузки сайта), возможность легко прописать для каждой из кнопок атрибут rel nofollow, поскольку ссылка на ресурс указана в явном виде (хотя значение нофоллоу уже не так, как раньше, влияет на распределение веса страницы).
В общем, использование такой возможности во многих случаях небесполезно, особенно для молодых сайтов в свете необходимости завоевания ими авторитета. А в таких условиях мелочей быть не может, так что отсутствие скриптов, если этого можно избежать, может сыграть только на руку.
Перед тем, как начать, необходимо подготовить картинку, которую можно предварительно создать самому. Вот в этом открывается главное преимущество данного метода создания социальных кнопок. Картинку можно сделать какого угодно вида, цвета и формы, такой выбор просто невозможен при получении кодов от конструктора. Сконструировать изображения кнопочки можно, например, в онлайн Фотошопе Pixlr, сохранить его на компьютере, а затем загрузить его в папку IMG, которая находится по адресу:
Еще одно преимущество самостоятельного создания картинок для кнопочек состоит в том, что подгрузка каждый раз происходит не со стороннего ресурса, а прямо с сервера вашего хостинга, это тоже уменьшает скорость загрузки. Для наглядности предлагаю скриншот с расположением папки IMG в иерархии директорий сайта:
Только обязательно обратите внимание на то, какое название имеет папка с изображениями (для некоторых тем она называется IMAGES). Впрочем, для social buttons вы можете создать свою папку, только нужно будет прописать для нее правильный путь. Ниже даю коды для каждого из сервисов при создании своих соцкнопок на сайте WordPress.
Для социальной сети ВКонтакте:
Как я уже сказал, атрибут REl=“NOFOLLOW” предназначен для того, чтобы закрыть от индексации поисковыми системами ссылку, а атрибут TARGET=“_BLANK” я проставил, чтобы обеспечить открытие Контакта в другой вкладке, это очень удобно для пользователей, поскольку страница сайта остается открытой.
Однако, с помощью атрибута ONCLICK для тега A, в качестве значения которого используется функция WINDOW.OPEN() от JAVASCRIPT можно сделать так, что будет открываться не новая вкладка, а именно новое окно добавления анонса статьи, причем можно прописать для него фиксированные размеры с помощью атрибутов WIDTH (600) и HEIGHT (400):
Впрочем, некоторые параметры, определяющие элементы управления окном (в том числе его размеры HEIGHT и WIDTH), могут быть уже установлены в конфигурации того или иного браузера, поэтому указанные значения могут не исполняться. Открытие нового окна небольших размеров, на мой взгляд, более удобно при расшаривании. В любом случае, для каждого сервиса приведу два варианта собственных кнопок (стандартный и с открытием нового окна).
Твиттер:
Фейсбук:
Я.ру:
Livejourrnal:
Одноклассники:
Все эти кнопки будут обладать функционалом, обеспечивающим добавление материалов вашего сайта Вордпресс в соответствующие социальные сети. Для этого коды кнопок добавляем в файл SINGLE.PHP в места появления social buttons (например, до или после поста). Все коды можно заключить в контейнеры DIV и прописать для них соответствующие классы или идентификаторы в целях их адаптации к дизайну сайта.
Читайте также: