Використовуємо соцмережі

663
  • Можливості UpToLike у створенні кнопок для сайту
  • Налаштування зовнішнього вигляду і установка коду на сайт
  • Опитування UpToLike і аналіз соцактивности на сайті
  • Здрастуйте, шановні читачі блогу . Вчора писав статтю про WebArtex і звернув увагу на кнопки соціальних мереж, які в них використовуються.

    Перейшов по посиланню на сайт розробників і буквально через п’ять хвилин поставив і собі такі ж. Сервіс називається UpToLike. Судячи з того, скільки сайтів (за даними на їх головній сторінці) вже поставили їх кнопочки, можливо, що ви вже знаєте про це. Але тим не менш.

    Використовуємо соцмережі

    Вразила простота і одночасно функціональність конструктора. Ну, а вже більш простий установки придумати складно. Раніше я користувався кнопками «Поділитися» від самого Яндекса. При встановленому лічильнику Метрика можна було відслідковувати статистику кліків по цьому блоку. У UpToLike статистика теж ведеться і для її перегляду нічого додаткового не потрібно встановлювати.

    Можливості UpToLike у створенні кнопок для сайту

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

    У налаштуваннях можна буде поставити галочку (та вказати дані ваших акаунтів в соціальних мережах), і після кожного розшарювання користувачеві буде запропоновано вступити в вашу групу. Знову ж функція, по-моєму, унікальна і може бути дуже корисна.

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

    Крім цього, у вихідному коді видно тільки код скрипта, а не кнопки і, що важливо, не посилання ведуть на сторонні ресурси. Для багатьох це може бути значущим. Однак я не знаю, чи зуміють пошуковики докопатися до цих посилань, але у всякому разі вони не повинні їх враховувати при розрахунку Пейдж Ранка (зовнішні лінки провокують його витік з вашого сайту).

    Сервіс безкоштовний і таким планує залишатися і далі. Це хороша новина, так само як і та, що крім кнопок соцмереж у них вже є конструктор голосувань, а в майбутньому планується і ще багато чого доробити і додати. Виникає питання, а звідки стільки ентузіазму? Де планується шукати вигоду, щоб оплачувати роботу розробників і отримувати прибуток з проекту?

    Виявляється, що спосіб монетизації досить складний. Даний сервіс належить тієї ж корпорації, що і Сеопульт, під егідою якого у найближчому майбутньому буде запущений соціальний сервіс (просування, напевно), в якому планується використовуватися дані, зібрані UpToLike. Ось саме з цієї причини я і побачив ці кнопки WebArtex, бо вони з Сеопультом однієї крові.

    Але мені, якщо чесно, по барабану, хто і що буде брати з статистики, зібраної на моєму блозі. Яндекс бере зі свого Метрики і бару, Гугл з Аналитикса і коду Адсенс. Ну, буде ще один великий гравець брати дані. Як ніби лічильники Ливинтернета, Рамблер Топ 100 і інших представників чинять інакше. Безкоштовно для нас не означає, що це не може бути прибутковим для власників.

    Гаразд, давайте переходити до справи. На головній сторінці UpToLike вам пропонують реєструватися. Можете відразу це зробити, бо потім логін і пароль знадобляться для входу в статистику використання встановленого на вашому сайті блоку кнопок. Якщо поки лінь це робити, то може відразу починати конструлить (я саме так і зробив).

    Використовуємо соцмережіВикористовуємо соцмережі

    Є дві основні вкладки — соціальні кнопки і опитування. Нам потрібна в даний момент відкрита за замовчуванням. Зліва розташовані інструменти конструктора, а праворуч — макет веб-сторінки з наочним прикладом того блоку кнопочок, які вам вдалося створити.

    Все змінюється одночасно зі зміною налаштувань і не потрібно постійно вставляти код на ваш сайт, щоб подивитися на результат. Юзабіліті на висоті — все зрозуміло і без чиїхось пояснень. Але я ж так не можу, мені потрібно все описати, розповісти і уточнити. Тому наберіться трохи терпіння.

    Отже, основні налаштування кнопок соцмереж в UpToLike:

  • Призначення кнопочок — для досягнення SEO ефекту слід вибирати варіант за замовчуванням «Кулі». Але якщо вам потрібні лайки чи фоловерів, тобто можливість створити і такий блок, обравши інший варіант з цього списку.
  • Розташування — ви вільні вибрати звичайний горизонтальний блок, вертикальний, плаваючий ліворуч або праворуч, а так само зафіксований внизу і вгорі області перегляду.
    Використовуємо соцмережіВикористовуємо соцмережі
  • Показувати лічильник — чудова штука. Що особливо радує, витягуються і всі ті розшарювання, що вже були зроблені для даної сторінки до установки UpToLike. Можна відображати кількість розшарювання для кожної соціальної мережі окремо, а можна для всіх скопом. З естетичних міркувань я вибрав другий варіант.
  • Додаткові можливості:
  • Цитування — дуже незвичайна штука. Користувач, виділивши цікавий йому фрагмент на вашій сторінці, зможе його розшарити в соціальній мережі шляхом натискання на інформацію, що з’явилася поруч кнопочку.
    Використовуємо соцмережіВикористовуємо соцмережі
  • Following — якщо активуєте цю можливість, то доведеться заповнити дані по ваших акаунтів в соцмережах з’явиться трохи нижче вікні:

    Використовуємо соцмережіВикористовуємо соцмережі

    Вийде, що користувач, після розшарювання вашої статті в свою соцмережу допомогою UpToLike, отримає ще й запрошення стати вашим фоловером. Ну, типу, раз ти такий лагідний…

    Використовуємо соцмережіВикористовуємо соцмережі

  • Вкладка «Вибір соціальних мереж» дозволить вам відзначити ті сервіси, які будуть відображатися в створюваному блоці у вигляді окремих кнопочок, а все інше буде ховатися під останньою кнопкою з трикрапкою. Крім традиційних Твіттера, Контакт, Фейсбук, Google+ та Пинтереста з Пинми є можливість додати і ряд інших сервісів, які мережами не є.

    Наприклад, соцзакладки, блоги на безкоштовних блогохостингах, надіслати посилання по електронній пошті, друку сторінки (до речі, зважився-таки купити картридж для принтера hp, бо до цього користувався снпч, яка мене замучила своєї глючностью), а так само додати в закладки браузера. Якщо порівнювати цей набір з описаним мною раніше Share42, то тут не вистачає кнопки плавної прокрутки сторінки вгору, яка там була.

    Налаштування зовнішнього вигляду і установка коду на сайт

    Ну, а далі в UpToLike йде найцікавіше — налаштування стилів кнопок. Ось цей блок їм особливо вдався. Начебто все так просто, але одночасно стільки можливостей і варіантів оформлення він надає, що навіть втомлюєшся їх все перепробувати.

    Використовуємо соцмережіВикористовуємо соцмережі

    Ви можете вибрати один з трьох варіантів форми (кругляш, квадрати або щось проміжне), три типи розміру, а також величезна кількість стилів, аж до власної розмальовки кнопочок. Мені сподобалися великі квадрати класичного дизайну з загальним лічильником, які ви можете бачити внизу цієї сторінки.

    Використовуємо соцмережіВикористовуємо соцмережі

    Загалом-то все, вам залишиться тільки отримати код створених кнопочок соціальних сервісів за допомогою великої зеленої кнопки, розташованої над прикладом розміщення. Він надає їх для себе джава скрипт, який потрібно буде вставити саме в те місце шаблону вашого сайту, де ви цей блок і хочете бачити.

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

    Однак, мені ще здається, що краще місце для розміщення горизонтального блоку — відразу під статтею. Прочитали, переглянули або просто прокрутили статтю — можна виносити рішення про те, робити або не ділитися матеріалом. Хоча, можливо, я не прав. Треба буде поекспериментувати.

    Плаваючий блок, наскільки я розумію, не налаштовується як в Share42 (не можна змінити відступи від краю і від верху), але зате і морочитися не потрібно. Тепер трохи детальніше.

    В WordPress існує таке поняття, як шаблони теми оформлення, пристрій і ієрархію яких ви можете оцінити, погортавши статтю за наведеним посиланням. Очевидно, що для вставки блоку з кнопочками від UpToLike під текстом, який потрібно буде катувати шаблон SINGLE:

    Використовуємо соцмережіВикористовуємо соцмережі

    Живе він в папці з використовуваної вами темою оформлення:

    wp-content/themes/название_

    Знаходите в цьому файлі згадка функції the_content:

    І вставляєте код соціальних кнопок відразу після неї. Якщо взятий UpToLike блок з кнопками плаваючий або приклеєний до верхнього або нижнього краю області перегляду, то, по ідеї, місце вставки не так важливо. Але якщо запхати його у HEADER, FOOTER або SIDEBAR, то він вийде наскрізним, що буде, напевно, зайвим, бо мало хто захоче розшарювати сторінки категорій або тегів. Хоча, може бути і має сенс.

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

    Власне, створив новий набір соціальних кнопочок в UpToLike і розмістив його код в шаблони WordPress під назвою ARCHIVE (рубрики, категорії, мітки, тимчасові архіви) і INDEX (в моєму випадку це тільки головна сторінка).

    Використовуємо соцмережіВикористовуємо соцмережі

    Спробував зробити його не надто помітним (дратівливим), бо це може погіршити поведінкові характеристики. Як і передбачалося, по висоті він зайняв середнє положення в області перегляду і трохи відсунувся від її лівого краю. Загалом нормальок, а так подивимося. Поки писав переніс їх направо, але не суть.

    Що стосується Joomla. Для вставки наскрізного плаваючого або прилиплого блоку можна відкрити файл INDEX.PHP з папки з використовуваним (активним у даний момент) шаблоном:/templates/название_папки_с_используемым_шаблоном/index.php

    У самому низу вмісту файлу INDEX.PHP знайдіть закриваючий тег /body і вставте відразу перед ним ваш код. Вийде приблизно так:

    тут повинен бути вставлений фрагмент

    Збережіть зроблені в INDEX.PHP зміни (файлзила і нотепад++ вам в допомогу).

    Для вставки в Joomla вертикального або горизонтального блоку з соціальними кнопками створеними в UpToLike можна скористатися стандартним модулем довільного Html коду. Зазвичай у шаблоні є позиції відразу після тексту статті. В крайньому випадку вставите вміст модуля в текст описаним за посиланням способом.

    Опитування UpToLike і аналіз соціальної активності на сайті

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

    Використовуємо соцмережіВикористовуємо соцмережі

    Натиснувши на кнопку «Детальна статистика» можна буде подивитися окрему статистику по расшариваниям, по лайкам і за кількістю залучених з соціальних мереж користувачів. Також можна буде наглядно побачити на діаграмі розподіл кліків по соцмережам і зрозуміти, на яких сторінках ваших сайтів користувачі виявляють найбільшу активність.

    Використовуємо соцмережіВикористовуємо соцмережі

    Я правда не зрозумів, відображається статистика по різних блоках коду (наприклад, у мене зараз в статтях відображаються горизонтальні, а на головній і в рубрика — плаваючі) або всі підсумовується. Якщо вам потрібно буде створити новий блок соціальних кнопочок, то скористайтеся посиланням «Налаштування коду» на головній сторінці (якщо ви вже залогинились).

    Також на другій вкладці можна відкрити конструктор для створення опитувань, але я поки ця справа ще не випробував.

    Використовуємо соцмережіВикористовуємо соцмережі

    Результати опитувань будуть доступні на головній сторінці для авторизованого користувача на відповідній вкладці.

    Так, і ще пару слів з приводу коду. У мене вічна проблема з расшариванием в Твіттер, бо мої тайтли занадто довгі і користувачам доводиться вручну їх вкорочувати, щоб цей сервіс мікроблогінгу дозволив публікацію повідомлення. Це дуже незручно і знижує загальну кількість розшарювання.

    Як боротися з цією напастю в WordPress при використанні стандартної кнопки Твітера я вже писав. Спосіб цей універсальний для Вордпресс і про нього я писав у статті про файл functions.php. Так ось, звернувшись до розробників UpToLike зі своєю проблемою, я таки отримав її рішення і саме тому цей блок все ще живе на моєму блозі.

    Рішення правда обрізає тайтли, віддаються на всі соціальні мережі, але головне, що тепер розшарювання в Твіттер виробляються без сучка і задирки. Суть методу полягала в тому, щоб у формований на UpToLike код після рядка:

    var cmp = c + Math.floor(Math.random() * 10000);

    Додати ось такий фрагмент:

    window[«__uptolike_widgets_settings_»+cmp] = {
    «title»: «»
    };
    var

    Цифра 110 задає кількість символів, після якого тайтл буде обрізатися і в місці обриву буде стояти наведене в коді три крапки. Правда трохи нижче в коді йшла рядок window, яка не давала працювати з цим методом, тому її довелося видалити і в результаті код виглядає приблизно так:

    //uptolike share begin
    (function(d,c){
    var up=d.createElement(‘script’),
    s=d.getElementsByTagName(‘script’)[0],
    r=Math.floor(Math.random() * 1000000);
    var cmp = c + Math.floor(Math.random() * 10000);
    window[«__uptolike_widgets_settings_»+cmp] = {
    «title»: «»
    };
    var url = window.location.href;
    d.write(»
    «);
    up.type = ‘text/javascript’; up.async = true;
    up.src = «//w.uptolike.com/widgets/v1/widgets.js?b=fb.tw.vk.gp.ok.my.mr.em.ps.pn&id=42196&o=1&m=1&sf=3&ss=1&sst=1&c1=ededed&c1a=0.0&c3=ff9300&mc=1&c2=0b0000&c4=ffffff&c4a=1.0&mcs=0&sel=1&fol=0&c=» + cmp + «&url=»+encodeURIComponent(url);
    s.parentNode.insertBefore(up, s);
    })(document,»__uptlk»);
    //uptolike share end

    Ну, ось і все, що хотів сказати. Можливо, що коли ви будете читати цю публікацію даного блоку з кнопочками вже не буде на моєму блозі, але поки він мені подобається. А ви що думаєте про UpToLike?

    Удачі вам! До зустрічей на сторінках блогу