Додаємо на сайт лайки Вконтакте, Facebook і кнопку Твитнуть

Віджет "Мені подобається" - Лайки ВКонтакте для сайту
Like Button для Facebook
Створюємо Tweet Button або кнопку Твитнуть
Можливі варіанти зовнішнього вигляду Tweet Button
результати

Взагалі, для для Лайко існує велика кількість плагінів, наприклад відмінний плагін Pluso (Він більше для share ніж для like, але плагін відмінний), але якщо все ж потрібно встановити стандартні лайки, тоді накидав невелику інструкцію (в першу чергу для себе;)).

Віджет "Мені подобається" - Лайки ВКонтакте для сайту

Для створення лайків Вконтакте заходимо на цю сторінку http://vk.com/dev/Like, далі налаштовуємо зовнішній вигляд самої кнопки, вводимо Назва, Адреса, Основний домен і Тематику, або ж вибираємо потрібний сайт зі списку. Вибираємо варіант кнопки, при виборі внизу буде показаний приклад майбутньої кнопки, вибираємо висоту кнопки і її назва.

Натискаємо зберегти і отримуємо код для розміщення на сайті такого виду:

Потім код, який виглядає приблизно так:

<! - Put this script tag to the <head> of your page -> <script type = "text / javascript" src = "// vk.com/js/api/openapi.js?115"></ script> <script type = "text / javascript"> VK.init ({apiId: 4505264, onlyWidgets: true}); </ Script>

вставляємо в код свого сайту перед закривається тегом </ head>, для сайтів на CMS WordPress цей код потрібно додати в файл header.php.

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

Другу частину коду, яка виглядає приблизно так:

<! - Put this div tag to the place, where the Like block will be -> <div id = "vk_like"> </ div> <script type = "text / javascript"> VK.Widgets.Like ( " vk_like ", {type:" button "}); </ Script>

вставляємо в код свого сайту в те місце, в якому кнопка "Мені подобається" повинна виводитися, для сайтів на CMS WordPress цей код найчастіше додається в файл single.php.

Like Button для Facebook

Сама кнопка налаштовується на цій сторінці .

Налаштувань мінімум.
URL to Like - Адреса сторінки.
Width - Ширина кнопки, можна залишити порожній.
Layout - Шаблон для кнопки, може бути standard - кнопка з текстом, box-count - кнопка і лічильник зверху, button-count - кнопка і лічильник справа (Наш Варіант!), І button - просто кнопка. Вибираємо button-count.
Show Friends 'Faces - чекбокс (не записуємо), якщо відзначити, то під кнопкою будуть виводитися фото друзів, які вже лайкали запис.
Include Share Button - чекбокс (не записуємо), якщо відзначений, то біля кнопки "Подобається" буде виводитися кнопка "Поділитися".
Під час налаштування внизу буде виводитися приклад кнопки.

Натискаємо "Get Code" - і в спливаючому вікні отримуємо код для розміщення на сайті:

Перша частина коду, яка виглядає приблизно так:

<Div id = "fb-root"> </ div> <script> (function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id) ) return; js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=492073974146494&version=v2.0"; fjs. parentNode.insertBefore (js, fjs);} (document, 'script', 'facebook-jssdk')); </ script>

Розміщуємо в код свого сайту після відкривається тега <body>.

Важливо! Якщо ви до цього вже розміщували на сайті віджет коментарів Facebook або інші віджети Facebook, тоді цей код у вас вже розміщений на сайті і двічі його ставити не потрібно.

Другу частину коду, яка має приблизно такий вигляд:

копіюємо на свій сайт в те місце, в якому кнопка Like буде виводитися.

Важливий момент! При копіюванні коду в файли будь-якої CMS - потрібно замінити параметр data-href в другому блоці (адреса сайту):

на код для постійних посилань свого сайту, для CMS WordPress це <? php the_permalink (); ?>, І отримаємо такий код для другого блоку, який потрібно вставити в місце виведення кнопки Like:

<Div class = "fb-like" data-href = "<? Php the_permalink ();?>" Data-layout = "standard" data-action = "like" data-show-faces = "true" data-share = "true"> </ div>

Для DLE код для кнопки Like Facebook виглядає так:

Для Drupal код для кнопки Like Facebook такий:

<Div class = "fb-like" data-href = "<? Php print url (drupal_get_path_alias ( 'node /'. Arg (1)), array ( 'absolute' => TRUE));?>" Data-layout = "standard" data-action = "like" data-show-faces = "true" data-share = "true"> </ div>

Створюємо Tweet Button або кнопку Твитнуть

Кнопка "Твитнуть" налаштовується на цій сторінці .

Власне на цій сторінці https://dev.twitter.com/docs/tweet-button представлена вся документація по налаштуванні кнопки "Твитнуть". Нижче наведу код для декількох можливих видів кнопки.

Код для розміщення необхідно додати безпосередньо в місце виведення самої кнопки.

Можливі варіанти зовнішнього вигляду Tweet Button

Стандартна кнопка:

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en"> Tweet </a> <script>! function (d, s, id) { var js, fjs = d.getElementsByTagName (s) [0]; if (! d.getElementById (id)) {js = d.createElement (s); js.id = id; js.src = "https: // platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document, "script", "twitter-wjs"); </ script>

Вертикальна кнопка з лічильником:

<a href="https://twitter.com/share" class="twitter-share-button" data-related="jasoncosta" data-lang="en" data-count="vertical"> Tweet </ a > <script>! function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (! d.getElementById (id)) {js = d.createElement (s); js .id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs);}} (document, "script", "twitter-wjs" ); </ script>

Велика кнопка без лічильника:

<A href = "https://twitter.com/share" class = "twitter-share-button" data-related = "jasoncosta" data-lang = "en" data-size = "large" data-count = " none "> Tweet </a> <script>! function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (! d.getElementById (id)) {js = d .createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs);}} (document, "script "," twitter-wjs "); </ script>

результати

PS
Для того, щоб кнопки розташовувалися в ряд, необхідно прописати стилі для кнопок. Нижче наведено приклад розміщення кнопок на сайті http://mariakuhtina.com/

Код HTML для кнопок - все кнопки взяті в div з класом .likes

<Div class = "likes"> <div id = "vk_like"> </ div> <script type = "text / javascript"> VK.Widgets.Like ( "vk_like", {type: "button"}); </ Script> <div class = "fb-like" data-href = "http://mariakuhtina.com/" data-layout = "button_count" data-height = "22" data-action = "like" data- show-faces = "false" data-share = "false"> </ div> <a href = "https://twitter.com/share" class = "twitter-share-button" data-size = "medium" data-lang = "ru"> Твитнуть </a> <script>! function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (! d.getElementById (id) ) {js = d.createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs);}} (document, "script", "twitter-wjs"); </ script> </ div>

Стилі для кнопок: