Как выкроить асимметричный сваг с провисом. Выкройки ламбрекенов своими руками: хитрости кройки и шитья в домашних условиях. Основные виды и материалы

Социальные кнопки или «лайки» стали неотъемлемом элементом множества сайтов. Теперь сложно представить публикацию в конце которой не обитали бы кнопки «Мне нравится», «Класс» и «Твитнуть». Они одинаково полезны, как вебмастеру в процессе продвижения, так и посетителю желающему оценить прочитанное или сохранить на своей странице ссылку.

Наличие «лайков» это не только появление трафика на сайт с социальных сетей, но и повышение юзабилити веб-проекта, а также интереса у поисковых роботов. Поэтому ряд основных соц. кнопок обязан быть и у Вас!
Одной из такого ряда – кнопка «Нравится» от Facebook. Установка «лайка» занимает пару минут, и подходит для размещения на всех CMS, в том числе популярной WordPress.

Как разместить кнопку от Facebook?

Действия по вставке кода кнопки на сайт очень схожи с ранее рассмотренным . Поэтому сперва авторизуемся в сети Facebook, и перейдём на страницу «Разработчикам»:
https://developers.facebook.com/docs/plugins/like-button

В начале нам предлагается настроить отображение будущей кнопки, чем мы и займёмся:

Скопированный код следует разместить в теме WordPress, также как и другие «лайки». Первую часть помещаем в файл «Header.php» между тегами …, а вторую в то место, где следует выводить саму кнопку (обычно, это файл «single.php» или «content-single.php» сразу после вывода основного контента). Не забываем сохранять изменения, а после проверять на страницах сайта!

Для того чтобы . В ней подробно описан один из способов с применением стилей CSS…

Проблема адаптивных шаблонов

Здравствуйте, дорогие читатели блога. Сегодня мы будем учиться вставлять на наш сайт кнопки со счётчиками от популярных социальных сетей таких как Google+, Facebook, вКонтакте и Twitter.

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

Ну а теперь поехали.

Кнопка на сайт Google+

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

Так как мы делаем по примеру мы выбрали стандартную кнопку от Google+ с счётчиком. В аннотации выбрали bubble, и язык, соответственно русский. Таким образом у нас получился вот такой код, который далее мы будем вставлять на свой сайт:

Кнопка для сайта «Мне нравится» от вКонтакте.

Переходим вот сюда . Теперь для начала нужно подключить новый сайт. Таким образом создаётся отдельный id номер именно для Вашего сайта. Для того чтобы подключить сайт Вам всего нужно заполнить три поля — это «Название сайта», «Адрес сайта» и «Основной домен сайта».

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

Как видите, что высота кнопки равна 22 пикселя. А название кнопки — мне нравится. Все эти значения Вы можете изменить под себя.

И теперь самое главное — это код для вставки кнопки на сайт. Для каждого сайта он будет не много изменяться из-за id номера о котором я говорил выше.

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

Код в шапке сайта между и :

VK.init({apiId: Ваш id номер, onlyWidgets: true});

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

VK.Widgets.Like("vk_like", {type: "button"},);

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

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

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

Send Button (XFBML Only) — если делать по примеру как на сайт, то нужно убрать галочку напротив Send Button. Данная галочка убирает или добавляет дополнительное поле в кнопке «Отправить».

Width — здесь выставляется ширина кнопки.

Show Faces — тут мы можем выбрать отображать или не отображать аватарки пользователей.

Verb to display — здесь мы можем выбрать текст в кнопке «Мне нравится» или «Я рекомендую».

Color Scheme — Тут можно выбрать оформление кнопки для светлых или же тёмных сайтов.

Font — выбираем шрифт надписей в кнопке.

После того как мы выбрали настройки находим кнопку «Get Code» и нажимаем на неё. Далее высветится окно с кодом, его тоже нужно вставлять в два этапа:

Вставляем код сразу после тега

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Код для отображения кнопки

Вставляем этот код туда где должна отображаться кнопка от facebook:

Кнопка на сайт от Twitter

Заходим . И вот открылось вот это окно;-)

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

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

Твитнуть

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

Выравнивание кнопок как на сайт.

Для начала я придумал простой класс для стилей CSS — «sochknop». А вот как выглядят сами стили CSS с этим классом:

#sochknop { opacity: 0.7; margin-bottom:20px; margin-left:55px; margin-top:45px; -moz-transition: opacity 0.3s 0.05s ease; -o-transition: opacity 0.3s 0.05s ease; -webkit-transition: opacity 0.3s 0.05s ease; } #sochknop:hover { margin-top:45px; opacity: 1; } #sochknop span { -o-margin-top:40px; padding:0px 0px; line-height:10px; float:left; }

Как видите, что для переменной sochknop я добавил : и . Это добавляет плавную прозрачность для кнопок. Если Вам этот не нравится просто удалите строчку opacity:

Теперь давайте посмотрим как это будет выглядеть в HTML.

Пример кода без кодов кнопок (чтобы было понятнее)

Кнопка от Гугл+ Кнопка от вКонтакте Кнопка от Твиттера Кнопка от Фейсбука

Пример кода с кодами кнопок:

window.___gcfg = {lang: "ru"}; (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script"); s.parentNode.insertBefore(po, s); })(); VK.Widgets.Like("vk_like", {type: "button"}); Твитнуть !function(d,s,id){var js,fjs=d.getElementsByTagName(s);if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

Друзья расположение кнопок Вы можете менять как Вам удобно.

В социальной сети Facebook кнопка «Мне нравится» (Like Button) позволяет пользователю делиться контентом понравившихся ему сайтов и блогов со своими друзьями на Facebook. Когда пользователь нажимает кнопку «Мне нравится» на сайте, понравившийся ему материал появляется в Ленте новостей у друзей этого пользователя с обратной ссылкой на этот сайт. Также ссылка отображается в блоке «Мне нравится» на персональной странице пользователя Facebook.

Добавить кнопку «Мне нравится» от Facebook на свой сайт или блог можно с помощью специального кода , получить который можно на сайте Facebook Developers. Для этого нужно заполнить специальную форму:

Процесс получения кода состоит из следующих шагов:

• поле URL to Like — адрес понравившейся страницы — следует оставить пустым чтобы адресу понравившейся страницы был присвоен адрес страницы, на которой находится кнопка
• поле Layout Style позволяет выбрать стиль оформления кнопки (со счетчиком голосов или без)
• поле Show Faces в значении True позволяет отображать аватары пользователей, которым понравился данный сайт или блог
• в поле Width следует указать ширину плагина в пикселях
• поле Verb to display отображает название кнопки «Like» или «Recommend» (в русскоязычном варианте «Нравится» или «Рекомендовать»)
• в поле Font следует выбрать шрифт начертания текста
• в поле Color Scheme следует выбрать одну из двух предлагаемых схем оформления кнопки: светлую или темную

После заполнения всех полей следует нажать кнопку «Get code» («Получить код»). Теперь чтобы добавить кнопку «Мне нравится» от Facebook на Ваш сайт или блог, Вам следует скопировать из открывшегося окна программный код.

В верхней части окна представлен iframe -код, в нижней — XFBML . Второй вариант более универсален.

Если поле адреса страницы (URL) осталось незаполненным, то после установки кода кнопки «Мне нравится» в html-код страницы пользователям, нажавшим эту кнопку будет «нравиться» именно эта конкретная страница.

Если выбран iframe-код для вставки его в сайт или блог на движке WordPress, то необходимо несколько изменить данный код. Для этого следует найти такой участок кода:

http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike

и заменить его следующим:

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

Если Вы хотите изменить язык кнопки (по-умолчанию сообщение на кнопке выводятся на английском языке), то Вам необходимо заменить часть URL в коде кнопки — задать локализацию. Так для включения русского языка следует заменить en_US на ru-RU в строке