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


Куда вставить код? Окончательный ответ тут!

Здравствуйте, ребята!

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

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

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

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

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

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

Теперь объясню все подробно в текстовом формате.

Файлы, отвечающие за вывод каждого типа страниц

Если вы читали много статей на других блогах о реализации каких-то функций с помощью кодов (скриптов), то уверен на все 100%, что видели фразы наподобие:

  • Вставляете этот код в файл, отвечающий за вывод главной страницы;
  • Вставляете этот код в файл, отвечающий за вывод записей и другие.

Файлов, в которые может потребоваться вставлять коды, много. Но, что это за файлы? Все очень просто.

  1. Вывод главной страницы - index.php;
  2. Вывод записей - файл single.php;
  3. Вывод страниц - файл page.php;
  4. Вывод архивов и рубрик - archive.php;
  5. Вывод подвала - footer.php;
  6. Вывод страницы поиска - search.php;
  7. Вывод сайдбара - sidebar.php;
  8. Файл стилей - style.css;
  9. Файл вывода страницы 404 - 404.php.

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

Осталось лишь ответить на вопрос, как же определить нужное место в каждом из файлов?

к содержанию ↑

Определяем место вставки кода

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

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

Первое место, идентичное для всех шаблонов - область в файле Header.php. Это открывающий и закрывающий теги <head></head>.

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

Данные теги размещены в самом верху файла Header.php.

Содержимое, находящееся между ними, у всех будет отличаться, так как все зависит от шаблона.

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

Второе место, которое также идентично для всех шаблонов, находится в файле, отвечающем за вывод подвала  - footer.php.

Скрипты можно подключать не только, вставив их между тегами <head></head> в файле Header.php. Можно также их подгрузить через файл footer.php, тем самым ускорив загрузку страницы сайта.

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

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

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

Как видим, все скрипты я вывел именно в данной области, перед закрывающим тегом </body> (выделил синей рамкой). Кстати, вывел их я через загрузку из файлов, а не размещением самих скриптов в данной области. После этого я значительно ускорил работу блога. Как это сделать, будет отдельная статья. Ждите!

Надеюсь, что когда вам будут говорить вставить код в эти области, вы без проблем все сделаете.

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

  • Вывод похожих записей;
  • Вывод формы подписки;
  • Вывод социальных кнопок и так далее.

Все эти вещи вставляются после основной части контента, то есть после окончания статьи. У каждого разный код шаблона и, поэтому, универсального ответа на вопрос "Где у меня заканчивается код вывода статьи?" просто нет.

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

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

Покажу на примере браузера Google Chrome. В других браузерах данная функция также имеется, то может немного по другому называться.

  • Google Chrome - просмотр кода элемента;
  • Firefox - исследовать элемент;
  • Opera - проинспектировать элемент.

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

Переходим в просмотр кода элемента (Google Chrome). Жмем правой кнопкой мыши по пустой области страницы.

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

Вот, как выглядит эта панель.

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

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

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

Но тут одно замечание. Нам необходимо находить не просто строчки статьи, а именно блоки, в которых находится сам контент, так как в файлах шаблона статей нет. Там имеется только код, выводящий контент, и заключен он в блоки. Именно после закрывающего блочного тега </div> и нужно будет вставлять код.

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

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

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

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

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

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

Открываю его в редакторе Notepad и ищу в коде строчку, которая начинается точно также, как в панели просмотра кода элемента.

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

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

На страницах они так и отображаются.

Аналогично происходит вставка и в другие файлы шаблона (страницы, рубрики, архивы...).

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

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

Остался последний момент, который стоит освятить в данном пункте.

Имеется немало настроек, требующих вмешательства в файл шаблона functions.php. Но, как вставлять в него коды, также нужно понимать.

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

Но, как быть, если данного тега нет в файле? Вот, например, у меня его как раз таки и нету. Как быть в такой ситуации? Отсутствия закрывающего тега не означает, что файл некорректный. Блог ведь работает. Значит все ОК.

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

Красным цветом выделен открывающий тег, а синим- код, который был вставлен.

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

Вот и все. Если вдруг у вас такая же ситуация с отсутствием закрывающего тега в файле funsctions.php, то будете знать, как действовать.

к содержанию ↑

Определение стилей оформления в шаблоне

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

Когда находим нужный элемент и кликаем на него, в правой области панели просмотра кода отображаются стили оформления для выбранного блока (элемента). Покажу стили для того же блока статьи, рассмотренного выше.

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

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

Поэтому, открываем файл стилей style.css и ищем строчку 890 в моем случае.

Тут можете их и отредактировать. Сохраняете файл и закачиваете на хостинг.

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

Настоятельно рекомендую вам также выполнять подобное редактирование любых файлов у себя на компьютере. Для этого вам нужно сначала скачать файлы к себе на компьютер со своего хостинга, использовав ftp клиент. Об этом я писал в данной статье. А затем просто открывать файлы любым удобным для вас редактором, который сможет открыть их. Я использую для этих целей Notepad.

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

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

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

С уважением, Константин Хмелев.

kostyakhmelev.ru

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

социальные кнопки в joomla

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

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

Конструкторов подобных кнопок великое множество.И здесь есть один момент! 

Учитывать нажатия на кнопки соц.сетей, Яндекс может только если на сайте установлен их блок "Поделиться".Ссылка на конструктор блока >>

Это подтверждает наличие в Я.Метрике отчётов по кнопке "Поделиться".

 

отчёт метрики кнопка поделиться

 

Если установлены другие соц.кнопки, то Яндекс ничего не может гарантировать. Скорее всего он не зафиксирует переходы, а значит не учтёт поведенческие факторы.

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

Будем ставить этот блок напрямую в шаблон, без использования всяких плагинов и модулей.

 

Шаг 1. Выясняем есть ли в установленном шаблоне переопределение макета для материалов.

Немного поясню: в Joomla существуют макеты для каждого компонента и модуля. Это типа маленьких шаблонов.И эти макеты можно переопределить и сделать их по своему. Что мы и сделаем)

В установленном шаблоне должна быть папка html - в ней хранятся все переопределения макетов.Внутри этой папки должна быть папка com_content - здесь хранятся переопределения макетов для материалов. Они сгруппированы по принадлежности.

  • article - шаблоны для полного текста материала
  • categories - шаблоны страницы со списокм категорий
  • category - шаблоны страницы категории (в виде списка и в виде блога)
  • featured - шаблоны страницы избранных материалов

переопределение макета в Joomla

Как видно из скриншота шаблонов в папке может быть несколько.Напрмиер в папке article (шаблоны для полного текста статьи), есть 2 шаблона:

  • default.php - основной шаблон
  • default_links.php - шаблон для отображения дополнительных ссылок статьи.

нам нужен файл default.php

Полный путь до него:

ваш_сайт/templates/ваш_шаблон/html/com_content/article/default.php

 

Если папки html/com_content нет в вашем шаблоне.

Такое может быть. Значит идём в адимнку Joomla -> Менеджер шаблонов.

Вы увидите список шаблонов, кликаем по вашему шаблону (в 2-ой колонке - шаблоны), который стоит по умолчанию.

переопределение макета в Joomla 3

Далее идём на вкладку "Создать переопределение".

В колонке "Компоненты", находим com_content, разворачиваем и кликаем по article

 

переопределение com_content в joomla

 

 

И видим что создалось переопределение.

Теперь можно открыть файл default.php, который лежит в папке /html/com_content/article

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

 

Шаг 2. Вставляем код, полученный из конструктора кнопок.

Теперь нужно скопировать предложенный код для блока поделиться - https://tech.yandex.ru/share/ 

код социальных кнопок

Скопировали? Ок.

Как вы могли заметить в файле default.php содержится html код вперемешку с php. Если вы читаете эту статью, то наверное, разбираетесь в html.Если нет, то вот бесплатный курс >>

Примерно на 111 строке видим блок div с itemprop = articleBodyВ этом блоке, через $this->item->text, выводится текст статьи.

Код кнопок можно вставить перед этим блоком или после него.Смотря где вы хотите выводить социальные кнопки.

Я создал ещё один блок div с классом my_share_buttons и поместил в него код из конструктора.Дополнительный блок я создал чтобы им можно было управлять через CSS стили.

Получилось так:

вставка кода соцкнопок в Joomla

 

А в статье выглядит так:

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

Дополнительно для блока .my_share_buttons можно добавить отступы, фон и другие стили.

 

Шаг 3. Проверяем работу сайта и кнопок.

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

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

 

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

 

Также посмотрите как вставить социальные кнопки в карточку товара JoomShopping.

На этом всё. Спасибо за внимание.

С уважением, Олег Касьянов

Сохраните эту информацию к себе, чтобы не потерять:

И подписывайтесь на наш онлайн-журнал.С уважением, Олег Касьянов.

joomlatown.net

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

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

Добрый день, дорогие друзья!

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

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

Статистика по использованию социальной сети ВК

По официальным данным TNS web index, только в ВК сегодня зарегистрировано 49.8 миллионов пользователей от 12 до 64 лет:

контакт

Аудитория ВК

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

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

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

Есть замечательный сайт Pluso — кнопки для добавления  контента в социальные сети. Сайт интуитивно понятный, не требует дополнительной регистрации.

кнопки

Внешний вид сайта Pluso

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

Затем формируем внешний вид кнопок: большие или маленькие, цвет, фон, форму, расположение, счётчик.

вид кнопок

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

При этом формируется Html — код,

Html - код

Html — код

который нужно скопировать в буфер и сохранить, например в Блокноте.

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

Нам встретится новый термин —  виджет.

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

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

Далее, нам нужно вставить Html — кодкн3  кнопок социальных сетей   на блог.

Самый простой способ — это вставить кнопки социальных сетей в Сайдбар вашего блога.

Для этого выполняем следующие шаги.

В админпанели выбираем  → Внешний вид → Настроить → Виджеты → Текст. Перемещаем этот виджет в Сайдбар → Пишем заголовок, а в поле Текст вставляем наш Html — код.

Как вставить кнопки соц. сетей

И в результате получаем, например такой вид, как на моём блоге

кнопки для соц.сетей

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

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

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

Копируем код кнопок социальных сетей, затем переходим в Консоли → Внешний вид → Редактор → Одна запись (single.php) → вставляем код социальных кнопок.

Одна запись

Код одной записи

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

 Главное, перед тем как редактировать код одной записи, его предварительно нужно сохранить, например в Блокноте. Это сделать нужно обязательно, так как, если что —  то пойдёт не так, код всегда  можно будет восстановить.

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

код одной записи

В результате получилось вот так

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

Как у меня на блоге

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

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

Если статья была полезна пишите в комментариях.

Если что — то непонятно, задавайте вопросы.

С уважением к Вашим успехам, Ирина

.

Это Вы ещё не читали!

sorokinairina.ru

Как вставить кнопки социальных сетей «Поделиться»? / Вопросы и ответы / Помощь / Сайт-Менеджер

Социальные кнопки «Поделиться» на сайте нужны для быстрой передачи интересной информации другим пользователям через социальные сети:

  • ВКонтакте
  • Одноклассники
  • Тwitter
  • Facebook
  • Google+
  • Я.ру
  • МойМир
  • Мой круг и множество других.

Все плюсы этих кнопок перечислять нет смысла, так как итак понятно, чем больше пользователей знает о вашем сайте (товарах, услугах), тем лучше.

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

Яндекс

Получить код кнопок можно на сайте Яндекса.

1. Выберите нужные сервисы, отметив их галочками:

Выбор сервисов в Яндексе

2. Выберите внешний вид кнопок (именно в таком виде будут отображаться кнопки на сайте):

Внешний вид блока

3. Система автоматически сформирует код, который скопируйте и вставьте на свои страницы сайта через режим html в то место, где будут отображаться кнопки:

Код кнопок

Pluso

Этот сервис предлагает более яркие кнопки и больше различных опций по настройке. Сервис располагается по адресу pluso.ru.

1. Выберите стиль кнопок:

Кнопки Pluso

2. Выберите дополнительные настройки:

Дополнительные опции

3. Выберите нужные сервисы путем перетаскивания из правой колонки в левую:

Выбор сервисов в Pluso

4. Посмотрите, как это будет выглядеть на сайте:

Предпросмотр кнопок

5. Скопируйте код и вставьте себе на сайт в режиме html в то место, где будут отображаться кнопки:

Код кнопок

Другие сервисы по соц.кнопкам работают аналогично: получаете код и вставляете его себе на сайт.

sm.su

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

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

Добавление кнопок социальных сетей на сайт путем вставки html-кода

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

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

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

Например, как это выглядит в Яндексе.

Html-код социальных кнопок Yandex

Вот ссылка на данный сервис Яндекса.

Вот как выглядят кнопки популярного сервиса Pluso.

Кнопки сервиса Pluso

 

Ссылка на сервис Pluso.

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

Вставляем кнопки соц сетей для сайта WordPress

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

Итак, заходим в редактор внешнего вида. Ищем файл php, который отвечает за вывод полного текста статьи. У меня он называться «content-single.php».

Файл content-single_php шаблона

В этом файле ищем php-функцию, которая называется «the_content». Она выводит весь текст записи. Чтобы вставить социальные кнопки на сайт, нужно добавить html-код кнопок сразу за блоком div, в котором находится эта функция, как показано на рисунке ниже.

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

Установка кнопок социальных сетей на вордпресс с помощью плагина UpToLike

В WordPress есть очень удобный плагин для добавления кнопок социальных сетей. Он называется UpToLike. Удобен он тем, что Вы выбираете дизайн, оформление, место расположения кнопок, сохраняете изменения и все, кнопки сразу же отображаются на Вашем сайте. Также если надо изменить внешний вид кнопок, Вы можете быстро это сделать на своем сайте через административную панель, а не заходить на сервис, где брали до этого кнопки, генерировать новый html-код и заново его вставлять на сайт.

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

Установка нового плагина в WordPress

В открывшемся окне в поле для поиска вводим «uptolike» и нажимаем Enter. В результатах поиска находим данный плагин и нажимаем кнопку «Установить» и далее «Активировать».

Плагин UpToLike

Все, теперь плагин установлен и работает, осталось его только настроить.

В главном меню WordPress появился значок «UpToLike», нажимаем на него. В закладке  «Конструктор» мы можем настроить внешний вид кнопок, место расположения и др. После всех настроек сохраняем изменения и пользуемся плодами своих трудов.

Настройки виджета UpToLike

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

С уважением, Евгений Кузьменко.

ekuzmenko.ru

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

Приветствую вас, уважаемы посетители!

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

Если у вас ещё нет социальных кнопок на сайте, то обязательно дочитайте статью до конца!

Навигация по статье:

Для чего нужны кнопки социальных сетей?

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

Социальные сети играют немаловажную роль в поисковом продвижении:

  • Во-первых, соцсети очень активно индексируются поисковыми системами и если ссылки на ваш сайт будут в социальных сетях, то они быстрее проиндексируются.
  • Во-вторых, сегодня поисковые системы уделяют большое значение поведенчискому фактору, то есть тому как ведёт себя посетитель у вас на сайте (сколько времени он там провёл, на какие кнопки нажал, сколько страниц просмотрел, куда перешёл с вашего сайта и т.д.) поэтому когда поисковый робот видит что люди делятся вашей статьеёй в соцсетях то он делает для себя вывод что данная статья является полезной. И ваш сайт становится более значимым в глазах поискового робота.
  • В-третьих, когда человек нажимает на кнопку «поделиться» то ссылка на ваш сайт сразу появляется на его странице в соцсети и её видет все его друзья и могут перейти по ней.

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

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

Как научиться продвигать сайты?

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

Бывает два вида кнопок которые можно установить на свой веб-сайт и которые имеют принципиальные различия:

  • Поделиться (share buttons).С их помощью пользователи могут сообщить своим друзьям о вашем блоге либо о какой-то отдельной статье, разместив запись у себя на странице соцсети, что позволяет привлечь новых посетителей, что по своей сути, является, бесплатной рекламой вашего интернет-проекта.
  • Подписаться (follow buttons). Они позволяют пользователям перейти к нам в группу или на страницу в одной из социальных сетей, где они могут, при желании, подписаться на новости нашего проекта. Это дает возможность информировать своих пользователей, через соц. сети, о появлении нового контента.

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

Сегодня мы рассмотрим способы добавления панели соц. сетей для сайта на WordPress с русскими социальными сетями.

Это можно сделать двумя наиболее распространенными способами:

  • Первый способ — с помощью онлайн-сервисов, таких как: Share42, AddThis, ShareThis, Pluso.

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

  • Второй способ — использовать специальные плагины. Их, конечно же, большое множество. Вот одни из наиболее распространенных: Fixed Social buttons, Simple Social Buttons, Social Share Buttons for WordPress, UpToLike, Socialize It!

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

Добавление соц. панели с помощью Share42

Настройка панели выполняется всего за несколько шагов:

  1. 1.Для установки панели нам необходимо перейти на сайт Share42.
  2. 2.Выбираем нужные нам социальные сети, а так же указываем размер иконок:
  3. добавление кнопок социальных сетей
  4. 3.Далее, настраиваем свою панель:
    1. 1)Выбираем тип нашей панели (вертикальная или горизонтальная).
    2. 2)Выбираем кодировку UTF-8.
    3. 3)Соглашаемся или нет на размещение иконки Share42
    4. 4)В случае если у вас сайт сделан на WordPress, ставим галочку в пункте «К вашему сайту подключен JQuery»
  5. Настройка панели share42

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

  6. 4.Нажимаем кнопку «Скачать готовый скрипт», после чего, следуя инструкциям, устанавливаем скрипт себе на страницу:
    1. 1)Разархивируем архив.
    2. 2)При помощи FTP-клиента загружаем папку Share42 в корневой каталог вашего сайта на хостинге.
    3. 3)Указываем путь к папке.
    4. 4)Ставим галочку напротив CMS на базе которой сделан сайт. В нашем случае WordPress.
    5. 5)Вставляем в шаблон страницы сгенерированный код.
    6. 3

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

дополнительные параметры панели share42

Куда вставлять код?

  • Если вы хотите чтобы эти кнопку выводились под текстом статей, то данный код вам нужно будет вставить в шаблон single.php где то в самом конце.
  • Если нужно вывести эти кнопки на всех страницах сайта, то кроме single.php нужно вставить код и в шаблон page.php
  • Внимание! Возможно при добавлении в эти файлы кнопки соцсетей могут высветиться не в том месте, где вам нужно или не высветиться вообще. Здесь всё зависит от особенностей вашей темы и её структуры. В таком случае нужно будет поэкспериментировать с добавлением кода в другие части шаблона single.php и page.php.

  • Для вывода социальных кнопок в подвале сайта или как плавающую вертикальную панель – вставляем предложенный код в файл footer.php вашей темы.
  • Для того чтобы открыть эти файлы подключаемся к сайту по ftp и заходим в папку:

    wp-content – thems – папка с названием вашей темы.

  • Для того чтобы выровнять эти кнопки по центру страницы нужно в файл style.css вашей темы прописать:

    .share42init{ text-align:center; margin-top:20px; } </Files>

    .share42init{

    text-align:center;

    margin-top:20px;

    }

    </Files>

Все готово! Что получиться, вы можете увидеть в конце статьи :-)

Установка плагина Social Share Buttons for WordPress

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

  1. 1.Для начала необходимо в административной панели сайта WP выбрать пункт Плагины => Добавить новый. Далее, при помощи поиска найти, установить, и активировать плагин Social Share Buttons for WordPress.
  2. 2.В боковом меню админпанели появиться пункт «Share Buttons», при нажатии по нему нам доступно три пункта меню:
    1. 1)Главные настройки
    2. 2)Share настройки
    3. 3)Like настройки
  3. 3.Выбрав «Главные настройки» обязательно настраиваем:
    1. 1)Текст, который будет отображаться перед нашей панелькой
    2. 2)Позицию кнопок соц. сетей. Где выбираем положение панели по вертикали и горизонтали, а так же есть возможность исключить типы страниц, где не нужно размещать панель.
    3. настройка плагина ocial Share Buttons
  4. 4.Переходим в «Share настройки». Здесь делаем следующее:
    1. 1)В разделе «Включение/Отключение социальных кнопок» снимаем галочки с ненужных нам иконок.
    2. 2)Выбираем стиль оформления иконок.
    3. 3)В разделе «Сортировка кнопок», путем перетаскивания, располагаем кнопки в нужной нам последовательности.
    4. 4)Задаем отступы сверху и снизу панели.
    5. настройка ocial Share Buttons
  5. 5.Выбираем «Like настройки», включаем и настраиваем нужные нам счетчики «лайков»
  6. настройка кнопок лайков

    Обратите внимание! Для того, чтобы работали кнопки «лайков» Facebook и Вконтакте вам необходимо указать свой API ID. Для этого вам необходимо перейти по ссылкам приведенным над полями вода API ID. После прохождения регистрации вам будут выданы уникальные номера.

    настройка счетчиков лайков

У нас должно получиться как то так:

кнопки социальных сетей ocial Share Buttons

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

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

Как сделать интернет-магазин?

Кстати, не забудьте испытать кнопки социальных стей в действии и нажать на несколько из них! Блок с этими кнопками вы сможете найти прямо под этой статьёй :)

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

С уважением Юлия Гусарь

impuls-web.ru

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

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

Что же дают эти кнопки?

Размещение share-кнопок увеличивает посещаемость сайта на 5-20%. Это работает следующим образом:

— По статистике каждый 65 посетитель делится страницей в социальной сети.

— В среднем люди делают 2-3 лайка понравившейся страницы, публикуя ее в разные сети.

— По размещенной в социальной сети ссылке приходят 6 новых посетителей.

— Среднее количество просмотренных страниц — более 2-х за сессию.

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

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

Такой способ идеально подойдет для тех, кто вообще не разбирается в HTML разметке и CSS стилях. Хороший плагин, который мне понравился, расположен вот по этой ссылке WP Socializer. На этой странице есть два коротеньких видеообзора, демонстрирующие возможности данного плагина, поэтому Вы легко определитесь, нужен ли Вам этот плагин.

А теперь я расскажу Вам о моём выборе, на котором я остановился – это скрипт PLUSO. Итак, что же это за скрипт и что он может?

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

По мимо стандартных наборов, всем известных сервисов (Facebook, Twitter, LiveJournal, ВКонтакте, Одноклассники и др.), PLUSO предлагает целый ряд дополнительных сервисов и действий. Например, одним кликом, вы можете распечатать понравившуюся статью, добавить страницу в закладки или отправить ее на e-mail.

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

Давайте рассмотрим пример установки социальных кнопок PLUSO на моём блоге, работающем на WordPress.

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

Шаг 1.

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

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

Регистрация

Шаг 2.

Теперь при помощи конструктора выбираем дизайн кнопок, наиболее подходящий под стиль Вашего сайта. Как только Вы выберите нужные кнопки и сервисы и настроите их дизайн, нажимайте кнопку КОПИРОВАТЬ. Теперь код Ваших социальных кнопок в буфере обмена и можно приступать к вставки его на Ваш сайт.

стиль кнопок

Дизайн

Шаг 3.

Заходим в администраторскую панель Вашего сайта.

Админка

Шаг 4.

Выбираете Внешний вид – Редактор.

Редактор

Шаг 5.

Мы с вами рассматриваем пример размещения социальных кнопок под статьёй. Значит теперь нужно выбрать из списка доступных страниц для редактирования – страницу «Одна запись» single.php.

Код

Шаг 6.

Предлагаю разместить кнопки сразу после окончания материала. Для этого вставляем html код (который находится у нас в буфере обмена) в файл single.php ниже строки, которая начинается с <?php the_content и заканчивается тегом </div>. Будьте очень внимательны.

СОВЕТ! перед тем, как приступить к вставке кода, скопируйте код Вашей страницы в Word или блокнот. Таким образом, если Вы нарушите разметку Вашей страницы, Вы без труда сможете вернуть все обратно.

Вставка кода

Шаг 7.

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

Центруем

Вот и готово! Пример Вы видите ниже. Пробуйте и применяйте на своих сайтах. А ещё Вы можете посмотреть подробную инструкцию на сервис социальных кнопок Яндекс.Поделиться. Или создать блок социальных кнопок без сервисов и плагинов, только на html и css.

С уважением, Максим Зайцев

Адаптивная, SEO подготовленная WordPress тема

1zaicev.ru