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

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

Сайт дня (как попасть): SEO копирайтинг — наше слово, ваша прибыль!

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

Наверняка вы заметили, что в последнее время многие социальные сервисы (Google Buzz, Вконтакте, Мой Мир и т.д.) ввели свои кнопки, чтобы пользователи могли делиться интересными материалами.

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

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

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

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

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

1. Чем больше скриптов на странице — тем медленнее она загружается. Бывают случаи, когда какой-либо скрипт подтормаживает, что еще больше затягивает скорость загрузки страницы.

Как известно, Google уже официально заявил, что теперь скорость загрузки сайта является важным фактором ранжирования сайта в результатах поиска. Простыми словами — при прочих равных условиях выше будут позиции того сайта, который быстрее загружается. Кстати, вы можете получить хорошие скидки на быстрый и качественный хостинг Fastvps.ru, которым я пользуюсь, подробнее здесь.

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

Одним из плюсов скриптов является то, что можно сделать отображение счетчика добавления материала в тот или иной сервис, но я думаю, в этом особой необходимости нет. Мне хватает кнопки в начале постов с количеством ретвитов. Чтобы поставить такую кнопку, почитайте пост 6 сервисов кнопок retweet.

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

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

В прошедшую субботу ко мне пришло Ее Величество Вдохновение. Причем пришло рано утром, на два часа раньше того времени, когда я обычно просыпаюсь — в 8 утра (при этом я лег спать в 3 ночи, так как увлекся работой по продвижению одного англоязычного сайта). Это вдохновение было именно для создания кнопок добавления в социальные сервисы.Звучит маниакально, но я проснулся с горящими глазами и страстным желанием сделать красивые и удобные кнопки . Через четыре часа работы все было готово. После генеральной приборки этот хаос стал выглядеть вот так:

Кстати! Приглашаю вас подписаться на мои каналы в Telegram:

Кнопки добавления в социальные сервисы мне пришлось обтачивать напильником в Фотошопе — они не совпадали по высоте, а некоторых и не было (пришлось рисовать кнопку Твиттера, Вконтакте и ЖЖ на основе их логотипов). Кнопку Google Buzz тоже пришлось переделать, так как четырехцветный овал находился справа от кнопки, что мне не подходило.

Я пришел к выводу, что высота кнопок должна быть 18 пикселей. Вы можете использовать мои кнопки либо нарисовать свои, загрузив их на свой хостинг. Если у вас блог WordPress, то загрузите картинки с кнопками в папку wp-content/themes/ваша_тема/images.

Теперь дело осталось за малым — сделать так, чтобы при нажатии на кнопку осуществлялось добавление вашего материала в тот или иной социальный сервис. Приведу готовые примеры кодов со своего блога. Для открытия php файлов используйте стандартный блокнот (или продвинутый блокнот, например, Notepad++).

Эти коды добавляются в файле single.php (в некоторых темах его нет, тогда используйте файл index.php) в папке с темой вашего блога wp-content/themes/ваша_тема/ после этого участка:

Кнопка добавления в Twitter:

Кнопка добавления в ВКонтакте:

Кнопка добавления в Facebook:

Кнопка добавления в Google Buzz:

Кнопка добавления в Мой Мир:

Кнопка добавления в Livejournal:

Данные коды кнопок лучше добавлять так:

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

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

Поэтому добавим кнопки на свои профили в социальных сервисах. Идем в Google, набираем запрос «social icons» и скачиваем понравившийся набор иконок социальных сервисов.

Так как понравившиеся мне наборы не содержали иконок ВКонтакте и ЖЖ, то я сделал их в Фотошопе на основе других иконок и логотипов этих сервисов. Когда будете искать нужные логотипы, то советую искать их в формате PNG — у этого формата отличная поддержка прозрачности, что избавит вас от чистки логотипа от фона. Для поиска логотипов в формате PNG наберите запрос вида «livejournal logo png» в Google Картинках.

Затем загружаем иконки в папку wp-content/themes/ваша_тема/images. Я выбрал иконки размером 32х32 пикселя.

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

По аналогии добавить такие кнопки можно и на другие движки, только нужно узнать, какой код выводит адрес страницы (как в WordPress — ).

Приглашаю вас присоединиться ко мне в социальных сервисах:

Желаю Вам хорошего и плодотворного дня!

Любителям графики пригодятся кисти Photoshop.

Десерт на сегодня — потрясающая собака из Майами, которая классно катается на скейтборде и занимается серфингом:

Подпишитесь на рассылку блога с полезными материалами по SEO

Источник

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

Приветствую друзья! Ранее я рассказал как установить социальные кнопки на сайт с помощью замечательного плагина Uptolike Share Buttons.

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

Но он не делает одной простой функции – не выводит кнопки в сайдбар с дальнейшей переадресацией на мой профиль в соцсетях.

А вы наверное заметили что практически на всех сайтах присутствует данный модуль в сайдбаре.

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

Зачем нужны кнопки социальных сетей на сайте?

1. Повышают посещаемость и популярность блога;
2. Служат для улучшения поведенческого фактора;
3. Делают ресурс более дружелюбным и привлекательным;
4. Служат “сарафанным радио” – о вашем блоге узнают друзья, далее друзья друзей и их знакомые;
5. Повышают привлекательность для поисковых систем.

Устанавливаем кнопки социальных сетей

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

1. Находим иконки социальных кнопок

Весь набор иконок можно найти на просторах интернета, например в поиске картинок Яндекса. Я в свою очередь предлагаю вам скачать уже готовые наборы совершенно бесплатно, но за это прошу маленькое одолжение, поделиться статьей в одной из социальных сетей [sociallocker ]ссылка на скачивание[/sociallocker] В этом наборе вы найдете иконки хорошего качества в разных разрешениях, которые подойдут для любого блога и заметно украсят его.

2. Загружаем картинки на сайт

Загрузить файлы с изображениями можно с помощью FTP используя Total Commander, как им пользоваться можно прочитать здесь. Либо использовать штатные средства WordPress, для этого переходим в админ панель нашего сайта, выбираем меню Медиафайлы – добавить новый – и загружаем наши изображения на хостинг.

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

3. Составляем HTML — код для виджета Текст

Для написания кода я рекомендую использовать Notepad++, но можно воспользоваться встроенным редактором WordPress. Для примера предоставляю вам свой код, для одной копки RSS который нужно исправить с учетом ваших данных – надо исправить учетные данные и путь к картинкам.

Вместо желтого цвета надо вписать вашу ссылку на RSS ленту, вместо зеленого прописать ваш путь к картинке, который мы ранее выяснили как узнать. Размер кнопок устанавливается с помощью тегов width и height, в моем случае размер 48×48 пикс.

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

4. Прописываем HTML – код в виджет нашего блога

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

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

Теперь вы знаете как можно добавить блок социальных кнопок на сайдбар, и у вас есть замечательный набор графических иконок. А как у вас реализована данная функция на своем блоге? Расскажите в комментариях.

Жду Ваших комментариев. Подписывайтесь на обновления блога. Буду благодарен, если Вы поделитесь этим постом в социальных сетях!

Источник

Плагины и сервисы кнопок социальных сетей для wordpress! Выбирай не хочу!

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

Что такое кнопки соц. сетей и для чего они нужны на сайте?

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

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

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

Ну, что же. Давайте установим к себе на блог кнопки соц. сетей при помощи плагина Social Share Buttons. Кроме него я также отмечу и другие варианты, но их описание будет менее подробное, так как я советую выбрать именно данный метод.

Плагин Social Share Buttons.

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

Очень удобно еще и то, что плагин может добавить на ваш блог такие кнопки, как Mail.ru, «мне понравилось» от Facebook, Mail.ru. Короче установить плагин нужно обязательно. А как? Да очень просто.

1. Скачиваем его на официальном сайте ;

2. Закидываем плагин (не zip архив) в папку плагины на хостинге, либо соединившись с FTP-сервером с помощью проги TotalCommander;

3. Открываем админку блога и активируем Social Share Buttons;

Выполняется все достаточно просто, так как интерфейс на русском языке, если у вас все на англоязычном, тогда нажмите ПЕРЕВЕСТИ в адресной строке браузера (на Мозиле именно так). Открываем Share Buttons. Это новый раздел в административной панели WordPress.

Зашли мы туда и что делать дальше? Сейчас по порядку!

Есть три подраздела:

• Основные настройки
• Доля настройки
• Настроить, как .

1. Можете добавить логотип вашего сайта, если его нет, то пропустите;

2. Заглавие перед кнопками соц. сетей, пропишите любое, вроде этого: поделить в соц. сетях;

3. Все остальные мелочи оставляем по умолчанию и сохраняем настройки;

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

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

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

Здесь вы регулируете нижние кнопки mail, facebook, vkontakte, которые находятся под основными иконками. Можно отметить галочкой показывать текст, отобразить счетчик.

Все сохранили и к настройкам можно не возвращаться. Надеюсь, что вы сможете установить кнопки социальных сетей при помощи плагина Share Buttons. Если что-то не получается задавайте вопросы в комментариях.

Теперь перейдем к другим способам установки кнопок.

Сервис Pluso

Установить кнопки соц. сетей при помощи Pluso очень легко и при этом можно не использовать плагин.

Прописываем в поисковике Pluso. Переходим на сайт и выбираем стиль. После чего копируем код и вставляем в файл singl.php после вывода строки

Жмем сохранить. Установка завершена. Думаю, что очень удобно. Получить кнопки можно здесь = >>

Кнопки от API

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

Виджеты находятся в разделе внешний вид в админ панели вордпресс.

[urlspan]Вот здесь можно их получить[/urlspan]

Social Skew Bar

Плагин выводит иконки в самом верху страницы вашего блога. Три соц. сети, точнее три кнопки: Facebook, Twitter, Google +1. Установка плагина стандартная, как и с Social Share Buttons.

Скачать плагин можно здесь .

Digg Digg

Плавающая панель кнопок социальных сетей. Они отображаются слева на фоне вашего сайта. Схожими функциями обладают плагины: Sharebar, GetSocial. Скачать плагин можно тут ==>>

Кнопки Share42.com

Многие используют кнопки соц. сетей от Share42.com. Почему именно они.

1. Не требуют установки плагина;

2. Имеют привлекательный вид;

3. Их можно установить, в вертикальном положении и горизонтальном после статьи;

Итак!

1. Заходим на [urlspan]share42[/urlspan];
2. Выбираем размер кнопок;
3. Отмечаем кнопки, которые будут отображаться на вашем блоге;

4. Проверили ряд небольших настроек по галочкам и пошли далее.

5. Убедились, что все в порядке и вперед;

6. Скрипт помещаем на хостинг в папку любую и проверяем доступ shareshare42.js;

7. Вставляем код себе в шаблон. Можете все сделать также, как и с Social Share Buttons.

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

AddThis.com

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

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

Также для определенных движков есть расширения. Например, WordPress. Для этой площадки сервис предоставляет плагин и инструкцию по его настройке.

Получить кнопки можно тут ==>>

Ну вот и все. Подходит к концу пост, который описывал специальные сервисы, плагины, позволяющие установить на своем блоге кнопки социальных сетей. Разумеется, существует еще немало других способов, но чтобы все их перечислить понадобится о-о-очень много времени. Поэтому я закругляюсь. В заключение интересное видео:

Источник

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

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

Самым легким способом будет установка таких плагинов, как WP Social Buttons или Sociable.

Можно воспользоваться сервисом Share42.com там очень понятный интерфейс и инструкция, проблем с установкой не будет.

Или ж е попробуйте Odnaknopka.ru. Там все понятно и ясно, поэтому с установкой проблем возникнуть не должно.

Как добавить кнопку Retweet?

Есть замечательный плагин, который называется Tweetmeme.Нужно его установить и активировать. Вот как он выглядит:

Как добавить кнопку Like от Facebook?

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

А чтобы установить кнопку от Facebook для начала заходим сюда, редактируем данные:

После настройки параметров жмем кнопку «Get Code», сервис даст нам два вида кода — выбираем первый. И вставляем его следуя инструкции на этом фото:

Выглядеть это будет примерно так:

Как добавить на сайт группу вконтакте?

Для того чтобы добавить группу, переходим сюда.

На странице получения кода для виджета Вконтакте в первом поле «Группа» с помощью выпадающего меню выбираем свою группу. Далее отмечаем кнопку «Показывать участников».

После настройки всех полей, получаем два кода. Их необходимо добавить в тег страницы Вашего сайта :

Нужно установить виджет на сайт: Код, который выделен красным цветом, устанавливаем в файле «headr.php» для «WordPress».

Второй код, который выделен зеленым можно поместить где вам удобно. Если хотите поместить виджет группы Вконтакте в боковой части вашего блога, то код помещайте в sidebar. php. Для расположения виджета после статей, код помещайте в single. php (или index. php).

Если у вас уже есть кнопка «поделиться» от Вконтакте, то скорее всего первый код вам не нужно будет вставлять, потому что он уже установлен на сайте.

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

Simple Counters

Данный плагин добавляет в левой или правой боковой колонке количество ваших читателей в Twitter и количество ваших RSS подписчиков. Вот так выглядит данный плагин simple counters:

И на последок расскажу вам о самом легком установке кнопок.

Совсем недавно Яндекс разработал свой сервис по установке кнопок социальных сетей.

Ознакомиться с сервисом от Яндекс можно здесь.

Подходит для тех ,кто не очень разбирается в технических нюансах, так как код вставляется в консоли сайта как текст.

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

Затем, переходим в консоль своего сайта .В левой колонке нажимаем «Внешний вид»,затем «Виджеты» , нажимаем на «HTML-код»,или можно «Текст»(получается одинаково хорошо, только когда переносите код как текст в редакторе обязательно вставляйте в текстовом режиме, а не в визуальном. После на «запись После содержимого», открывается окошко с редактором с права, туда вставляем полученный код (название написать по своему усмотрению -Например так: «Понравилась статья? Поделитесь с друзьями»), если не хотите никаких надписей-заголовок оставляем пустым. Жмем кнопку сохранить. Так у вас появятся кнопки под каждой статьей.

Если вы хотите расположить кнопки с боку на сайте-выбирайте «область с лева» или «область с права» — у кого где колонки расположены, дальше вставляем код и не забываем сохранить изменения.

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

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

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

Работает архиватор WinRar практически на всех операционных системах: Windows, Mac OC, Linux, Android, Windows Mobile и под менее известными FreeBSD и MS-DOS (на тот .

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

И так, вы создали свой сайт и настала пора определиться в выборе тематики и наполнении его интересным контентом, который привлек бы на сайт .

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

Источник

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

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

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

Встроенный виджет

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

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

Этот скрипт устанавливается в Шаблон сайта, советую предварительно прочитать статью “Редактирование шаблонов“

• Открываете “Панель управления” своего сайта. Переходите “дизайн” – “Управление дизайном (шаблоны)” – Модуль Каталог статей – Страница материала и комментариев к нему.
• Между тегами вставляете следующий код:

Источник