Як створити свій блог

275
  • Навіщо потрібна панель Share42, її гідності
  • Налаштування Share42 і установка скрипта на сайт
  • Позиціонування плаваючою панелі з кнопками
  • Здрастуйте, шановні читачі блогу . Хочу сьогодні поговорити про плаваючу панель від Share42 для їх розшарювання в найбільш популярних соціальних мережах (Твіттері, Фейсбуці, Вконтакте і Google+).

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

    Як створити свій блог

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

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

    Навіщо потрібна панель Share42, її гідності

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

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

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

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

    Спочатку я пробігся по всіх плагінів для WordPress, які виводять щось схоже:

    Як створити свій блогЯк створити свій блог

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

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

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

    Потім вже я натрапив на сервіс Шаре42 і, побачивши на ньому ті ж самі кнопки соціальних мереж, був трохи здивований — Dimox використовує штампування. Це ніби як майстерний швець буде ходити у ширвжитку. Однак, знаходячись в мережі, натрапив на цю статтю Димокса, де він пише про запуск безкоштовного сервісу щодо самостійного підбору, налаштування та отримання готового коду скрипта соціальних кнопок.

    Набридли йому прохання про допомогу у створенні кнопочок для сайту, ось він і відкрив окремий проект, який, на мій погляд, зараз є кращим з усіх пропозицій на ринку. Давайте я просто перерахую ті плюси Share42, які кинулися в очі:

  • Сервіс дозволяє додавати кнопки популярних (або мають хоч якесь значення) саме в рунеті соціальних мереж і закладок, що саме по собі має велике значення, так і до того ж ви можете вибрати один з трьох можливих розмірів цих кнопок:

    Як створити свій блогЯк створити свій блог

  • За вашим бажанням можете розташовувати блок отриманих кнопок як горизонтально (зазвичай в кінці публікації), так і вертикально у вигляді плаваючої панелі, яка буде не надто настирливо переслідувати користувача під час читання або перегортання ваших матеріалів.
  • Dimox не тільки талановитий верстальник і дизайнер, але і сеошники. Тому вам не потрібно буде перейматися тим, що разом з кнопками соціальних мереж ви додаєте свій сайт N-ное кількість відкритих для індексації пошуковими системами зовнішніх посилань. Всі посилання на соціальні сервіси будуть закриті через rel=nofollow і, як я розумію, вставлені допомогою ДжаваСкрипта (через onclick), що, можливо, ще поки не по зубах пошуковикам.
  • Всі картинки вибраних вами соціалок і закладок об’єднані в один файл формату PNG, який буде з себе представляти так званий sprites. Це дозволить зменшити кількість запитів вашого браузера до сервера до одного, незалежно від числа обраних вами соцсервисов і, отже, швидкість завантаження сайту не зменшиться.
  • Жодних подгрузок зображень і скриптів з інших сайтів, які можуть працювати не дуже швидко, не буде — скрипт і спрайт з іконками сервісів буде розміщуватися на вашому власному ресурсі.
  • За замовчуванням іконки соціальних мереж і закладок на панелі будуть засвічені, щоб не різати око читачам. А при наведенні курсору миші на панель вона дуже приємно розквітає.
  • Ну і варто сказати про універсальність скрипта Share42. Звичайно ж, я сам не перевіряв це твердження, але якщо так говорить Dimox, то гріх буде сумніватися. На WordPress працює все чудово і без будь-яких проблем.
  • Тепер про мінуси:

  • Потрібно мати хоча б базове уявлення про Html і CSS. Не думаю, що ви відразу ж кинетеся читати мої публікації, але все ж сподіваюся на ваше намір зробити це в майбутньому (адже я старався, писав, а поява цих статей викликала тільки бурхливий відтік передплатників — сумно).
  • Також потрібно буде представляти хоча б приблизно, як влаштована використовувана вами CMS. В Joomla, наприклад, не обов’язково копирсатися в коді — можна використовувати модуль з довільним Html кодом (правда, для цього скрипта не пробував).

    Але ось в WordPress краще спочатку прочитати статтю про пристрій тем (шаблонів) WordPress, бо там окремі файли відповідають за формування окремих частин веб сторінок.

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

    Налаштування Share42 і установка скрипта на сайт

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

    Потім, перетягуючи їх мишею, можете визначити порядок їх слідування. Все дуже просто і інтуїтивно зрозуміло.

    При бажанні можна додати ще й кнопочки з нижньої області «Інше» — додавання в обране браузера користувача, друк статті, відправка посилання на неї по E-mail або підписка на вказаний вами трохи нижче адресу RSS стрічки. На мій погляд, ще не вистачає кнопок для Пинми або Pinterest, бо ці фото-соціалки зараз дуже серйозно набирають популярність.

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

    Як створити свій блогЯк створити свій блог

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

    Розпакуйте архів і киньте папку share42 (внутрішню, тобто ту, в якій безпосередньо буде лежати файл PNG з зображеннями вибраних вами іконок і файл скрипта) по FTP в будь-яке місце на вашому сайті (можна для цього скачати ФТП клієнт або ж використовувати популярну програму для Windows — Total Commander).

    P. S. Нещодавно у мене вкрали паролі з Файлзилы, бо там, як і в Тотал Коммандере, вони не шифруються при зберіганні. В результаті після перевірки сайтів на віруси з’ясувалося, що всі вони заражені і заблоковані в пошукових системах.

    Щоб не допускати подібних помилок використовуйте програму для зберігання паролів Keepass, яка шифрує свою базу. Це не реклама, а реально корисний рада, що мені в свій час ніхто не дав.

    Я кинув цю папку в папку з плагінами WordPress, тому на четвертому кроці майстра мені довелося вказати саме цей шлях:

    Як створити свій блогЯк створити свій блог

    А також я змушений був поставити галочку навпроти WordPress, тому що саме цей движок використовує мій блог. Все, з налаштуваннями Share покінчено, залишилося тільки вставити запропонований на п’ятому і шостому кроці майстра, Html і CSS код. Власне, тут зазвичай і виникають серйозні проблеми у непідготовлених користувачів.

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

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

    В WordPress він зазвичай називається Style.css, живе в папці з використовуваної вами темою оформлення (/wp-content/themes/назва теми). В Joomla файл стилів потрібно шукати в папці з використовуваним вами зараз шаблоном (/templates/назва шаблону)

    Просто відкриваєте файл на редагування, наприклад, в Html і CSS редактор notepad ++ і додаєте в самий кінець скопійовані вами фрагменти саме стильового коду (Html код будемо вставляти в інше місце). Зберігаєте зміни і не забуваєте, зайшовши в Файлзилу, ці зміни застосувати, погодившись із спливаючим пропозицією.

    Ну, а тепер прийшла пора розібратися з трьома рядками Html коду скрипта Share42. Автор радить вставити їх перед або після статей. В WordPress зробити це не просто, а дуже просто. Відкриваєте на редагування файл single.php з папки з вашою темою оформлення (пам’ятаєте, вона живе за адресою /wp-content/themes/назва теми WordPress).

    Можна вставити код відразу після статей. Для цього знайдіть рядок з функцією the_content і вставте запропонований фрагмент відразу після неї, наприклад, так:

    share42(‘https:///wp-content/plugins/share42/’,298,20)

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

    Позиціонування плаваючою панелі Share42

    Я використовував вертикальну плаваючу панель Share42, тому в Html коді мають місце бути дві цифирьки в кінці третьої строчки — в моєму випадку це 298 (за замовчуванням було 150) і 20. Що вони означають? Перша задає початковий відступ в пікселях від верхнього краю панельки до верхнього краю веб сторінки (сірий пунктир на розташованому нижче скріншоті).

    Як створити свій блогЯк створити свій блог

    Логічно буде підібрати цю цифирьку так, щоб панелька була б вирівняна з якого-небудь орієнтиру. Наприклад, у мене це початок статті області.

    Друга цифирьки задає відступ від верхньої межі плаваючою панелі, взятої з Share42.com до верхньої межі області перегляду в той момент, коли користувач почне прокручувати сторінку. Робити цей відступ занадто великим я б не став, бо вгорі панелька не так муляє очі, як це було б в середині області перегляду.

    Як створити свій блогЯк створити свій блог

    Є ще одна цифирьки, яка може вплинути на становище щодо області з вашою статтею. Але знайти її ви вже зможете в тому CSS код, який ви скопіювали в свій файл стилів. За замовчуванням ця цифирьки дорівнює — 70 px (задає зовнішній відступ margin ліворуч) і сенс цієї величини показаний на попередньому знімку вікна червоним пунктиром. Я залишив значення за замовчуванням, але ви можете експериментувати.

    #share42 {position: fixed;z-index: 1000; margin-left: -70px;}

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

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

    Так, якщо ви захочете додати до панелі кнопку Google+1, то не застосуєте скористатися порадами автора на цей рахунок. Все, я закінчив.

    Не забудьте зайти на сайт сервісу і на вкладці «Подякувати автора» пожертвувати малу копієчку, бо конструктор і сама панелька вийшли просто чудові. Удачі і по зеленому.

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