Социальное SEO для новичков | ВесьТоп создание и продвижение сайтов

Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

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

Социальное SEO для новичков

Социальное SEO для новичков

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

Социальное SEO для новичков

Социальные сети — это мощный бесплатный инструмент для продвижения контента вашего сайта, и их важность для SEO-оптимизации постоянно растет, потому что Google придает все большее значение социальным сигналам. Существует несколько значимых социальных сетей, каждая из которых предоставляет несколько различных способов обмена контентом, что иногда затрудняет выбор, какую кнопку использовать. Здесь мы попытаемся составить исчерпывающий список типов кнопок и показать разницу между двумя типами кнопок общего доступа (кнопки «Поделиться») и кнопок «Follow» (кнопки «Follow») в социальных сетях.

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

Кнопки «Follow» и «Поделиться» в социальных сетях

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

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

Эти ссылки и кнопки позволяют посетителям вашего сайта легко делиться содержимым вашего сайта в своих профилях в социальных сетях. То, чем они делятся, публикуется в их личном профиле в соответствующей сети со ссылкой на ваш сайт, и их увидят некоторые из их друзей или подписчиков в соответствующей социальной сети. Добавляя такие кнопки, если ваш контент интересен, его может быстро увидеть большое количество людей и привлечь новых посетителей на ваш сайт, которые никогда не слышали о вашем сайте. Размещение кнопок социальных сетей имеет смысл для любой страницы с достаточным содержанием — публикации, статической страницы, целевой страницы и т. Д. Каждая страница должна иметь уникальный URL. Один посетитель может использовать кнопки «Поделиться» повторно — для каждого нового поста. Примеры таких кнопок: «Кнопка« Мне нравится »в Facebook», «Ссылка для публикации в Facebook», «Кнопка« Твитнуть »,« Твитнуть по этой ссылке »,« Кнопка «Поделиться в LinkedIn» »,« Кнопка Google +1 »и« Ссылка для публикации в Google+ ».

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

С этими кнопками идея другая. Они служат для увеличения присутствия вашего бизнеса в различных социальных сетях и помогают получить больше подписчиков или поклонников из этих социальных сетей. Прежде всего, вам необходимо создать бизнес-профили в каждой из наиболее важных социальных сетей. Размещая кнопки отслеживания на своем бизнес-сайте, вы повышаете видимость своих социальных аккаунтов. Кнопка для подписки в социальной сети находится на уровне сайта и используется пользователем только один раз, после чего он начинает следить за профилем вашей компании в социальной сети. Каждый раз, когда вы публикуете сообщение в своем социальном профиле, ваши подписчики, которые недавно взаимодействовали с вашей учетной записью, будут видеть ваше сообщение в своем личном профиле на странице ленты новостей. Кнопки отслеживания можно разместить где угодно на сайте, но чаще всего их размещают только на главной странице, на странице контактов или внизу сайта (нижний колонтитул). Они не привязаны к конкретному контенту сайта. Примеры таких кнопок: «Кнопка подписки на Twitter», «Facebook Like Box», «Плагин профиля компании LinkedIn» и «Кнопка страницы Google+».

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

Социальные кнопки для Facebook

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

Кнопка «Мне нравится» в Facebook

Социальное SEO для новичков

Для чего нужна кнопка «Нравится» в Facebook и как она работает?

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

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

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

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

Создайте приложение Facebook.

Прежде всего, вам нужно войти в Facebook и создать новое приложение Facebook. Войдите в систему и перейдите на страницу https://developers.facebook.com/apps. В правом верхнем углу находится кнопка [Create New App] для создания нового приложения. Все, что вам нужно сделать, это ввести имя приложения в поле App Name: (например, домен сайта) и нажать кнопку [Продолжить]. Вы увидите данные нового приложения, наиболее важным здесь является номер приложения после идентификатора приложения.

Режим песочницы должен быть отключен, когда все проверено на работу!

Как установить кнопку «Нравится» на Facebook?

По этому адресу https://developers.facebook.com/docs/reference/plugins/like/ вы можете поэкспериментировать с настройками кнопок и получить код, который будет включен на ваш сайт там, где он должен появиться. В раскрывающемся списке после «Этот сценарий использует идентификатор приложения вашего приложения:» выберите имя нового приложения Facebook, созданного на предыдущем шаге. Это самый простой способ установить кнопку вручную. Однако мы рассмотрим что-то более сложное — включая этот код с JavaScript, чтобы сохранить проверку HTML-кода и увеличить скорость загрузки содержимого страницы.

Социальное SEO для новичков

В зависимости от типа кнопки и способа ее установки существует множество вариантов кода. Мы решили установить код с XFBML и типом кнопки button_count, который представляет собой узкую кнопку «Нравится» со счетчиком кликов, которая идеально подходит для размещения в панели с кнопками социальных сетей под публикацией. Для нового сайта на HTML5 используйте версию HTML5 аналогичным образом, этот код больше подходит для старых сайтов с HTML4, но будет работать и на новых сайтах.

Создайте отдельный файл /js/ganbox_social.js со следующим содержанием:

Код 1:

/ * ganbox.com кнопка «Нравится» на Facebook * / function ganboxFBLike () {
var layout = ‘button_count’; / * тип кнопки: button_count, standard, box_count. См. Https://developers.facebook.com/docs/reference/plugins/like/ * / var loc = ‘bg_BG’; / * может быть us_US и заголовок будет иметь вид * / var fwidth = ‘640’; / * ширина поля кнопок Facebook * / var aID = ‘360734674032298’; / * Идентификатор приложения Facebook * / var ss = false; / * отображать ли кнопку Отправить * / var sf = false; / * показывать ли аватарки на лайках страницы * /
window.fbAsyncInit = function () {FB.init ({appId: aID, status: true, cookie: true, xfbml: true}); };
var e = document.createElement (‘сценарий’); e.src = document.location.protocol + ‘//connect.facebook.net/’+loc+’/all.js’; e.async = true; document.getElementById (‘корень-fb’). appendChild (e);
var f = document.createElement (‘fb: like’); f.setAttribute (‘href’, document.URL); f.setAttribute (‘класс’, ‘ganboxFBLike’); f.setAttribute (‘show_faces’, SF); f.setAttribute (‘отправить’, сс); f.setAttribute (‘макет’, макет); f.setAttribute (‘ширина’, fwidth); f.setAttribute (‘шрифт’, ‘тахома’); f.async = true; document.getElementById (‘корень-fb’). appendChild (f); }

Здесь самое важное — изменить строку var aID = ‘360734674032298’; изменив этот номер на свой идентификатор приложения, вы получите номер приложения Facebook, созданного вами выше. Позже мы добавим в этот файл больше функций.

Включите новый файл js на страницу, на которой должны отображаться кнопки, а в заголовке перед закрывающим тегом / head добавьте строку:

lt; скрипт src ="/js/ganbox_social.js" type ="текст / javascript"gt; lt; / scriptgt;

Затем остается только там, где вы хотите, чтобы кнопка появлялась (например, в конце каждого сообщения), чтобы включить код.

Код 2:

lt; тип скрипта ="текст / javascript"gt; // lt;!&# 91; CDATA&# 91; ganboxFBLike (); // &# 93;&# 93; gt; lt; / scriptgt;

Facebook рекомендует заменить исходный HTML-тег на

Это необходимо для правильной работы некоторых старых версий Internet Explorer (конечно, этот браузер вызовет проблемы, кто еще?). Возможно, ваш тег html уже имеет некоторые атрибуты, тогда просто добавьте этот атрибут в конце. Вот пример:

Изменяя переменные в начале JavaScript, функция ganboxFBLike () может легко изменить внешний вид кнопки.

На кнопку добавлен CSS-класс ganboxFBLike для позиционирования через файл css. Например, когда эта кнопка находится на панели с другими кнопками, часто необходимо выровнять верхнюю часть панели, используя следующие правила стиля: .ganboxFBLike {display: inline; вертикальное выравнивание: сверху; }

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

Facebook Поделиться ссылкой

Этот тип обмена по-прежнему работает, но уже давно не поддерживается Facebook. Это связано с тем, что его основная функция была взята на себя кнопкой «Нравится» — позволить посетителю оставить комментарий о ссылке на текущую страницу, которой он делится. Однако мы думаем, что это все еще может быть очень полезно, поэтому вот пример создания ссылки для общего доступа в Facebook.

Как создать ссылку для публикации в Facebook?

Просто сделайте ссылку, которая указывает на http://www.facebook.com/share.php?u=https://ganbox.com

заменив ganbox.com на URL-адрес страницы, которой мы делимся.

Если адрес очень длинный и содержит кириллицу, сначала нужно указать urlencode. Другой лучший вариант — заранее сократить адрес с помощью bit.ly или другой службы сокращения URL.

Например, URL-адрес этого сообщения — https://ganbox.com/blog/social-seo-sharing-buttons, когда вы просматриваете urlencode, адрес становится слишком длинным и его необходимо сократить. Соответствующий сокращенный адрес: http://bit.ly/ZUyf8m.

Таким образом, ссылка для обмена становится: http://www.facebook.com/share.php?u=bit.ly/ZUyf8m

Можете ли вы попробовать ссылку и действительно поделиться этой сатией на Facebook здесь ?????? Это был пример создания ссылки вручную, что неудобно для системы CMS и лучше делать это программно.

Автоматически создавать ссылку для обмена в Facebook с помощью PHP

Сначала вам необходимо зарегистрироваться на http://bit.ly и получить логин и ключ API. Вы также можете войти в свою учетную запись Facebook. Затем перейдите на https://bitly.com/a/settings/advanced, там вы увидите логин и ключ API.

Создайте файл php /inc/ganbox_social.php со следующим кодом.

Код 3:

/ * ganbox.com: сократить URL на bit.ly * / function make_bitly_url ($ url, $ login, $ appkey, $ format = ‘json’, $ version = ‘2.0.1’) {// API-адрес bit.ly $ bitly = ‘http://api.bit.ly/shorten?version=’.$version.’& longUrl = ‘. urlencode ($ url).’& login = ‘. $ login.’& apiKey = ‘. $ appkey.’& format = ‘. $ format;
// подключаемся к bit.ly (здесь лучше использовать cURL) $ response = file_get_contents ($ bitly);
// обрабатываем результат в зависимости от протокола if (strtolower ($ format) == ‘json’) {$ json = @json_decode ($ response, true); вернуть $ json [‘результаты’] [$ url] [‘shortUrl’]; } else // xml {$ xml = simplexml_load_string ($ response); вернуть ‘http://bit.ly/’.$xml-> результаты-> nodeKeyVal-> хеш; }} / * ganbox.com: функция, которая возвращает полный текущий URL * / function full_url () {$ s = empty ($ _ SERVER ["HTTPS"])? »: ($ _SERVER ["HTTPS"] == "он")? "s" : ""; $ sp = strtolower ($ _ SERVER ["SERVER_PROTOCOL"]); $ protocol = substr ($ sp, 0, strpos ($ sp, "/")). $ s; $ port = ($ _SERVER ["ПОРТ СЕРВЕРА"] == "80")? "" : (":". $ _ SERVER ["ПОРТ СЕРВЕРА"]); вернуть протокол $. ": //" . $ _SERVER [‘SERVER_NAME’]. $ порт. $ _SERVER [‘REQUEST_URI’]; }

Затем на странице публикации вам нужно включить файл с include_once (‘/ inc / ganbox_social.php’); и где-то под текстом сообщения для вызова функции:

$ short_url = make_bitly_url (full_url (), ‘bitlylogin’, ‘R_36acc310c5c443e4f5192e016ff23980’, ‘json’); echo ‘lt; a href ="’. $ short_url.’"gt; Поделиться в Facebooklt; / agt; ‘;

Конечно, вам нужно изменить bitlylogin, используя ваш логин из bit.ly и этот пример ключа API R_36acc310c5c443e4f5192e016ff23980 с вашим ключом bit.ly.

Facebook Like Box

Для чего нужен Facebook Like Box?

Социальное SEO для новичков

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

Как установить Facebook Like Box?

Конечно, обязательно иметь фан-страницу компании Facebook. Если у вас его еще нет, прочтите статью Создание фан-страницы в Facebook.

На https://developers.facebook.com/docs/reference/plugins/like-box/ вы можете поэкспериментировать с внешним видом коробки. Его установка очень похожа на кнопку «Мне нравится» в Facebook, поэтому мы будем использовать тот же файл JavsScript /js/ganbox_social.js.

Код 4:

/ * ganbox.com: функция для асинхронного создания Facebook Like Box * / function ganboxLikeBox () {var loc = ‘bg_BG’; / * язык, (может быть us_US) * / var pageID = ‘129621312785’; / * уникальный идентификатор страницы Facebook * / var pageURL = ‘http://www.facebook.com/ganboxcom’; var bwidth = ‘278’; / * ширина рамки * / var bheight = ‘325’; / * высота коробки * / var sf = true; / * показывать ли лица фанатов * / var stream = false; / * отображать ли сообщения со страницы FB * / var header = true; / * заголовка * /
var e = document.createElement (‘сценарий’); e.src = document.location.protocol + ‘//connect.facebook.net/’+loc+’/all.js#xfbml=1’; e.async = true; document.getElementById (‘Likebox’). appendChild (е);
var f = document.createElement (‘fb: like-box’); f.setAttribute (‘href’, имя страницы); f.setAttribute (‘ширина’, bwidth); f.setAttribute (‘высота’, bheight); f.setAttribute (‘show_faces’, SF); f.setAttribute (‘цвет_границы’, »); f.setAttribute (‘поток’, поток); f.setAttribute (‘заголовок’, заголовок); f.setAttribute (‘цветовая схема’, ‘свет’); f.async = true; document.getElementById (‘мне нравится’). appendChild (f); }

Линии

var pageID = ‘129621312785’;

var pageURL = ‘http://www.facebook.com/ganboxcom’;

измените идентификатор и URL-адрес вашей бизнес-страницы Facebook. Затем аналогичным образом кнопка Like включила файл JavaScript.

в разделе head перед закрывающим тегом / head, добавив строку:

lt; скрипт src ="/js/ganbox_social.js" type ="текст / javascript"gt; lt; / scriptgt;

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

lt; тип скрипта ="текст / javascript"gt; // lt;!&# 91; CDATA&# 91; ganboxLikeBox () // &# 93;&# 93; gt; lt; / scriptgt;

Добавьте атрибут xmlns: fb = «http://ogp.me/ns/fb#» к открывающему тегу HTML, если вы еще этого не сделали.

Изменяя переменные в начале функции, вы можете легко изменить размер и внешний вид окна.

Это были важные социальные плагины для Facebook. Для получения дополнительной информации см. Https://developers.facebook.com/docs/plugins/.

Мы в Ganbox можем установить любой из этих социальных плагинов. Свяжитесь с нами со страницы «Контакты».

Ожидайте часть 2 этого поста.

Не забудьте поделиться этой статьей с помощью кнопок слева для публикации в социальных сетях ??????

Читайте так же:
Not found

Нам доверяют

Интернет магазин