Привет читателям блога. Как Вы уже могли заметить я решил поменять старый дизайн моего блога, и поставить другой. На мой взгляд, этот шаблон более функционален и приятен глазу. Хотелось бы узнать Ваше мнение по смене дизайна, если не трудно, напишите его в комментариях.
Ну да ладно, это статья на самом деле не о шаблонах. Сегодня я бы хотел Вам рассказать о том, как установить кнопки социальных сетей на свой сайт (Facebook, Вконтакте и твиттер). Знаю, знаю, в интернете сейчас море статей про установку социальных кнопок, но… Когда я искал информацию по установке этих трех кнопок, я не нашел ни одной толковой статьи про их установку и настройку, возможно плохо искал… В общем чтобы установить и настроить отображение социальных кнопок мне пришлось потратить уйму времени, и после этого я решил передать Вам результат моих действий в виде этой статьи. Получилось у меня или нет – решать Вам! Давайте приступим!
Для начала, давайте определимся, для чего собственно нужны эти социальные кнопки, и стоит ли тратить на них свое время.
Как Сделать Кнопку «Подписаться» в Вк на Телефоне Вместо Кнопки «Добавить В Друзья» ВКонтакте 2023
Прежде всего, они удобны пользователю. Дело в том, что в нынешние времена в нашей жизни крепко укрепились социальные сети. Например, социальную сеть Вконтакте, ежедневно посещает более 30 миллионов человек в день! Так вот, люди любят делиться интересной информацией.
Когда посетитель зайдет на Ваш блог, прочтет какую либо статью, и она ему понравится, он увидит знакомую ему социальную кнопку и решит поделиться Вашей записью у себя на странице. Запись тут же отобразится на его странице, и в новостной ленте, а это значит, что статью увидят все друзья этого человека. Возможно, и его друзьям понравится Ваша статья, и они также будут делиться ей, продвигая, таким образом, Вас и ваш блог.
Также социальные кнопки создают удобство для Вас, с помощью их очень удобно анонсировать свои статьи в социальные сети. В общем соц. кнопки, определенно полезны и устанавливать их на блог нужно!
А теперь приступим к самой установке, и начнем, пожалуй, с социальной сети Вконтакте…
Кнопка мне нравится Вконтакте
Перед установкой вы обязательно должны быть зарегистрированы в данной сети, без этого Вы не получите API_ID – Ваш персональный код, с помощью которого будет выводиться кнопка на Вашем блоге. После регистрации Вы можете использовать все виджеты Вконтакте (комментарии, группы и т.д.).
Чтобы установить кнопку мне нравится Вконтакте, перейдите по этой ссылке и увидите вот такое окно:
Здесь Вам нужно подключить Ваш сайт к соц. сети Вконтакте. Ставим пункт ”Подключить новый сайт”, затем вводим желаемое название сайта и пишем адрес самого сайта. Поле “Основной домен сайта” заполняется автоматически. Жмем “Сохранить”. Следующим шагом настроим вид самой кнопки:
Как и зачем сделать кнопку «Подписаться» в ВК на личной странице
Можно настроить вид Вашей кнопки, высоту и название кнопки, по Вашему желанию.
Теперь можно перейти к вставке созданной кнопки на наш сайт. После всех настроек Вы увидите следующий код, который необходимо вставить на Ваш сайт:
Первую часть кода (выделена красной рамкой) нужно вставить в файл header. php перед тегом «/head».
Вторую часть кода (выделена черной рамкой) вставляем в нужное место в файл single.php
Получаем кнопку мне нравиться Вконтакте на наш блог. Как видим, все проще чем кажется на самом деле. Следующая кнопка которую мы установим, будет кнопка мне нравится от Facebook.
Кнопка мне нравится от Facebook
По аналогии с кнопкой Вконтакте, идем на страницу генерации кнопок от Facebook и создаем новую кнопку.
На страницы генерации кнопки нам нужно заполнить следующие поля:
URL to Like можно вставить ссылку вашего сайта. Но, советую этого не делать. Это поле значит то, что все отметки будут вести на указанную страницу, а если кнопка установлена ко всем статьям, то нужно чтобы отметки велись к определенной статье, поэтому поле не заполняем.
Поле “Send Button” означает что Вы, можете отправить Вашему другу Вашу запись. Это интересное нововведение появилось совсем недавно.
Поле Layot style отвечает за стиль кнопки. Здесь уже настраиваете по Вашему желанию.
Show Faces – показывать лица?
Verb to display текст кнопки “мне нравится” или “рекомендовать”. Like – мне нравится, recommend – рекомендовать.
Color Scheme позволяет выбрать цветовую гамму кнопки (light – светлая, dark — темная).
Font позволяет выбрать шрифт кнопки.
После создания кнопки, нажимаем “Get code”, чтобы получить код вставки кнопки на Ваш сайт. Откроется вот такое окно:
Первую часть кода (выделена красным) вставляете в файл header.php после тега «body». Вторую часть (выделена черным) опять же вставляете в нужное место в файл single.php
Вот таким способом, мы получаем кнопку like от Facebook. Идем дальше. Следующая кнопка Twitter
Кнопка твитнуть
Кнопка твитнуть устанавливается не сложнее чем две предыдущие.
Перед генерацией кнопки необходимо быть зарегистрированным и зайти на Twitter под своим логином. Переходим на страницу генерации кнопок и видим следующее:
Здесь вообще все просто и сложностей при создании кнопки возникнуть не должно. Первым что нам нужно сделать, это выбрать, как будет выглядеть будущая кнопка.
Поле со ссылкой заполнять не нужно по аналогии с Facebook. В качестве текста будем использовать название страницы. Далее необходимо настроить упоминания, прописываем туда логин Вашего аккаунта твиттер. Справа можно увидеть результат полученной кнопки и ее код для ставки на сайт. Копируем этот код в файл single.php Все, кнопка твитнуть добавлена на сайт!
Теперь начинается самое интересное. После того, как мы добавили эти кнопки, они расположены столбик, а не в линию. Естественно выглядит это не совсем красиво, и я захотел это изменить. Перелопатил половину интернета, потратил много времени на ковыряние в коде, но, результат есть, Вы можете посмотреть его в конце этой статьи. Итак, что же я сделал для того, чтобы выстроить социальные кнопки в одну строку?
Как установить кнопки социальных сетей в одну строку?
Мы имеем три кода, которые выводят кнопку определенной социальной сети. Первый код (у меня это кнопка от Вконтакте) я обернул тегом div style=»float:left;» Т.е. в данном случае кнопка будет находиться слева. Следующую кнопку я обернул тегом div style=»float:left; width : 25%» Как видим, появился новый параметр ;width : 25% — расстояние между кнопками, его настраиваем как Вам нужно. Последнюю кнопку я обернул в тег div style=»float:right; width : 25%» здесь все тоже самое, только вместо параметра left, выставлен параметр right, т.е. кнопка находится справа. Вот какой код у меня получился целиком:
div style=»float:left;»> div style=»color: #0000ff;»>»vk_like»>/div> script type=»text/javascript»> VK.Widgets.
Like(«vk_like», {type: «button»}); /script>br> /div> div style=»float:left; width : 25%»> div class=»fb-like» data-send=»true» data-layout=»button_count» data-width=»450″ data-show-faces=»true»>/div> /div> div style=»float:right; width : 25%»> a href=»https://twitter.com/share» class=»twitter-share-button» data-via=»life_webmaster» data-lang=»ru»>Твитнуть/a> /div>
В результате у меня получились такие кнопки, которые вы видите у меня на блоге. А а на этом, пожалуй, статью о том, как установить кнопки социальных сетей можно заканчивать. Надеюсь на то, что статья Вам понравится, и вы ее оцените. Пишите в комментариях отзывы, и подписывайтесь на обновления блога, чтобы не пропустить выход новых статей.
Источник: life-webmaster.ru
Как установить кнопки вконтакте
Нашел самое простое решение с проблемой добавления специализированных кнопок для скачивания музыки и видео ВКонтакте. Добавление этих кнопок, на мой взгляд, самое лучшее решение со скачиванием музыки и видео ВКонтакте.
Для скачивания видео ВКонтакте у Вас впоследствии появится такие кнопки:
Также при нажатии на продолжительность трека вы сможете увидеть размер и битрейт композиции.
Для того чтобы добавить кнопки скачивания видео и музыки для браузера “Opera” необходимо перейти по этой ссылке и нажать кнопку “Install”.
После чего в появившемся окне “Установка расширений” нажать “Установить”.
Для того чтобы добавить кнопки скачивания видео и музыки для браузера “Mozilla Firefox” необходимо перейти по этой ссылке и нажать кнопку “Добавить расширение”.
После того как оно загрузится, появится окно, в котором необходимо нажать “Установить сейчас”.
Затем “Mozilla Firefox” предупредит вам о том, что дополнение будет установлено после перезагрузки браузера.
Для того чтобы добавить кнопки скачивания видео и музыки для браузера “Google Chrome” необходимо в Интернет-магазин Google Chrome и найти актуальное расширения для скачивания музыки/видео с соцсети. Выбираем и устанавливаем.
Для того чтобы добавить кнопки скачивания видео и музыки для браузера “Яндекс Браузера” необходимо зайти каталог расширений для браузера Opera. Воспользовавшись поиском найти рабочее, актуальное расширение. Далее его нужно установить, возможно потребуется перезапустить браузер.
В социальной сети Вконтакте множество разнообразных скрытых функций и способов , за которых невозможно уследить, поэтому следим в интернете и на нашем сайте.
Рекомендуем к просмотру:
- Как пользоваться фильтром поиска на сайте компании “Этажи”?
- Как организовать конференцию в Zoom?
- Как пользоваться Zoom на компьютере?
- Проверка скорости интернета: что нужно знать
- Как изменять голос в Дискорд?
- Как сменить обложку профиля в Одноклассниках?
- Как удалить посты в Инстаграме с компьютера?
- Устранение ошибки при запуске Office 2010 на XP
- Как обновить Internet Explorer 8 до 11 версии для Windows 7?
- Как заархивировать запись в ВК?
- Как развернуть экран на компьютере?
Источник: h-y-c.ru
Кнопка Вконтакте. Как установить кнопку на движке WordPress
Кнопка Вконтакте. Как установить кнопку на сайт «Мне нравится» на WordPress.
Чем полезна кнопка? Очень много людей зарегистрировано и общаются в Вконтакте. Благодаря этой кнопки , пользователи зашедшие на ваш сайт, смогут поделиться понравившейся статьей с друзьями и закрепить в закладках, что конечно хорошо для индексации и рекламы сайта.
Сегодня пару часов отдал тому, что бы установить кнопку «Мне нравится» от соц.сети Вконтакте. Информации, как это сделать в интернете хватает, но уж очень многие пишут, объясняют так, словно все пользователи продвинутые либо их объяснений вполне достаточно.
Ну пускай не совсем я умный, но лучше с мельчайшими подробностями объяснить, как и что. Что бы любой новичек, только создавший свой сайт смог с первого раза и без проблем вставить кнопку вконтакте . Сразу замечу, что буду рассказывать именно о кнопке для движка WordPress.
Эту кнопку и другие подобные можно установить с помощью плагина Share Buttons, так проще. Но плагины притормаживают работу и скорость сайта, что не очень хорошо. И если по началу лучше использовать именно плагин, то в будущем желательно переходить на обычное редактирование документа, как в данном случае. Если пользуетесь другим движком, вам нужно искать информацию на других сайтах.
И так, как установить кнопку мне нравится ? Первое, что сразу нужно сделать, это зайти на сеть Вконтакте , что бы сервис определил вас под вашим профилем, если конечно вы уже там зарегистрированы. Если ещё не успели зарегистрироваться, то сделайте
это прямо сейчас здесь.
Регистрация понятная, так что объяснять не буду.
После того. как под своим профилем зашли на сервис, идем на эту страницу создания приложения. Откроется окно (смотрите на первой картинке). Теперь заполняем поля,- « Название «- можете вписать любое, это не так важно. Далее, в разделе « Тип » выбираем (или будет уже выбрано),- « веб сайт «. В нижнем разделе « Описание » можете ничего не указывать и нажимаем внизу « Перейти к загрузке приложения «, смотрите ниже, кнопка в темных тонах.
Выскочит окошко (смотреть вторую картинку), вписываете в нем « код «, который вы получите на ваш мобильный. Если вы не указывали при
регистрации номер вашего телефона, то обязательно сделайте это. Смотрите в настройках профиля. И так, вставили полученный код, нажали « отправить «. Через пару секунд всплывет вот такое окошко (смотрите третью картинку).
Заполняем поля в ней. В самом верху, где название, которые вы уже оказали и описание, ничего можете не делать. Обращаем внимание только на « Защищенный ключ «, скопировав вы можете вставить к примеру в полезный плагин кнопок для сайта Share Buttons, если он у вас есть. А также немного внимания на « ID приложения «, запоминать и копировать это не надо, просто я к тому, что именно этот номер и будет определяющим для вашей кнопки, именно для вашего сайта. На картинке эти поля выделены желтым.
Теперь самое главное о том, как вставить кнопку на сайт.
Внизу окна видим Open API ( выделено красным ), в поле « Адрес сайта» вставляем ваш адрес. Обратите внимание, как выглядит адрес: https://nachnivsesnachalo.ru — не правильно, https://nachnivsesnachalo.ru/- правильно. Все отличие в значке «/» в конце названия. В поле «Базовый домен» вставляем ваш домен, как пример,- nachnivsesnachalo.ru, без http://. Сохраняем настройки. Пример на картинке 4
Настройка и вставка кнопки на сайт
Все необходимые данные зарегистрированы, теперь заходим на страницу «подключения виджета к Вашему сайту» . В панели Сайт/приложение, уже будет указан адрес вашего сайта, либо нажмите стрелку на против (справа) и выберите в ручную. Далее выбираем из предложенного дизайн кнопки. Это по своему вкусу. Я выбрал первый вариант «Кнопка с текстовым счетчиком». « Высота кнопки» — я не трогал , и название по вашему желанию « Мне нравится » либо « Это интересно «. Ниже видим сам код кнопки, код состоит из двух частей, и вставляться будет тоже в двух местах. Сразу замечу. делайте резервную копию нетронутого документа, в которые будем вставлять код, на всякий случай.
Первая часть кода,- (не копируйте у меня- это пример)
VK.init();
И так, сначала сразу скажу, первую часть кода будем вставлять между вот этих тегов.. ( открывающий) ( закрывающий). Один из этих тегов будет в верху, второй, только со значком «/» внизу документа. Между ними будут другие символы. но не обращаем на это внимания, сейчас главное правильно вставить нашу первую часть кода.
Все внимание на нижний тег , не спеша просматриваем документ и внизу находим этот символ (тег будет отдельно в строке). Я подчеркнул его красным на картинке 7. Зеленым- вставленную часть кода.
Скопированную часть кода вставляем выше этого тега . Проще это сделать так, поднимаемся чуть выше < /head>, нажимаем «ентер» и получаем « пробел «. Теперь вставляем часть кода. «Пробел» для того, что бы вам потом было легче найти эту «часть кода», если вы захотите удалить, либо внести какие то изменения.
Далее, идем назад на страницу данного вам кода. Спускаемся ниже (смотрим картинку 8). Вновь пропускаем (не копируем) а только саму часть кода. Выглядит так:
Вторая часть кода:
VK.Widgets.Like(«vk_like», );
Заходим опять в « панель инструментов «. Находим «Дизайн», далее нажимаем «Редактор» (как я уже писал) и в открывшемся окне ( в правой
колонке) находим- Одиночная запись (single.php). Откроется документ. В котором, вам нужно будет найти тег- так он выглядит в документе. Смотрите на картинку 9, обведен красным. Скопированную вторую часть кода ( обведен зеленым) вставляем после этого тега, лучше через «пробел», как я описал выше, что бы потом можно было его легче найти и отличить.
Почему именно в этом месте? Можно конечно поэксперементировать и вставить в другие места. Но лучше если ваша кнопочка будет внизу вашей статьи, а не где нибудь сверху. Все, кнопка установлена ,- позже расскажу как установить кнопки от Facebook и Mail.ru. Для начала сам вставлю..
Удачи!
Статьи могут быть вам полезны:
- Как проверить сайт на вирусы
- Какой лучший файлообменник или файлообменник GetFiles опасно.
Источник: nachnivsesnachalo.ru