Додаємо на сайт лайки Вконтакте, 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.
Важливо! Якщо ви до цього додавали на сайт коментарі Вконтакте або якісь інші віджети Вконтакте, то цей код у Вас вже буде розміщений на сайті, двічі його додавати не потрібно.
вставляємо в код свого сайту в те місце, в якому кнопка "Мені подобається" повинна виводитися, для сайтів на 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, тоді цей код у вас вже розміщений на сайті і двічі його ставити не потрібно.
Другу частину коду, яка має приблизно такий вигляд:
<Div class = "fb-like" data-href = "https://denis-creative.com/" data-layout = "standard" data-action = "like" data-show-faces = "true" data- share = "true"> </ div>копіюємо на свій сайт в те місце, в якому кнопка Like буде виводитися.
Важливий момент! При копіюванні коду в файли будь-якої CMS - потрібно замінити параметр data-href в другому блоці (адреса сайту):
<Div class = "fb-like" data-href = "https://denis-creative.com/" data-layout = "standard" data-action = "like" data-show-faces = "true" data- share = "true"> </ div>на код для постійних посилань свого сайту, для 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 виглядає так:
<Div class = "fb-like" data-href = "{full-link}" data-layout = "standard" data-action = "like" data-show-faces = "true" data-share = "true" > </ div>Для 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>Стилі для кнопок:
#vk_like, .fb-like, .twitter-share-button {display: inline-block; vertical-align: top; } #Vk_like, .twitter-share-button {padding: 6px 0 0; } .Fb-like {margin-right: 30px; }Js?Php the_permalink (); ?
Php the_permalink ();?
Php print url (drupal_get_path_alias ( 'node /'. Arg (1)), array ( 'absolute' => TRUE));?