Интернет история моего успеха Голосов: 1 Адрес блога: http://solov-off.livejournal.com/ Добавлен: 2009-05-04 18:50:50 блограйдером Tavria Принадлежит блограйдеру Tavria

Кнопки социальных сетей на блогах Blogger (blogspot)

2012-07-28 22:13:31 (читать в оригинале)

Запись опубликована По секрету всему свету. Please leave any comments there.

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

Речь идет об установке кнопок типа «Нравится» или «Поделиться» от различных социальных сетей.

На своем старом блоге я писал пост «Социальные сети – прихоть или необходимость?» где приводил аргументы, почему для продвижения бизнеса сейчас уже просто нельзя игнорировать такой огромный сегмент потенциальных клиентов, как социальные сети. А также напомню пост уже на этом блоге «Интернет-бизнес сегодня»

И если раньше блоггеры уделяли много внимания тому, чтобы прогнать блог по социальным закладкам, каталогам и трастовым сайтам, то сейчас нужно все больше и больше внимания уделять взаимодействию с потенциальными клиентами, читателями и бизнес-партнерами через социальные сети. Ну в самом деле, если у вас есть Сайт Для Людей (СДЛ), то вам же нужно чтобы в первую очередь его читали люди (а не поисковые роботы. Это тоже важно, но… на втором месте)  А где больше людей — на сайтах соц.закладок или каталогов? Или в соц.сетях? Ответ очевиден. Вот почему надо синдицировать ваше интернет-представительство (блог, сайт) с социальными сетями.

Какие соц.сети имеют наибольшее влияние?

• Facebook
• Twitter
• Вконтакте
• Мой Мир
• Одноклассники

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

Каждый из этих сайтов предлагает установить свои кнопки на блог. Но вот в чем закавыка… Если блог находится на домене 2-го уровня на платформе WordPress, то тут нет никаких сложностей — поставил один из множества подходящих плагинов, и вопрос решен.

А вот если у вас блог находится на платформе Blogger (Он же Blogspot от Google), то тут не все так просто.

Задача усложняется тем, что надо не просто найти, скопировать и установить нужные коды этих кнопок, а еще и сделать так, чтобы эти кнопки выглядели стильно и красиво (были расположены в один ряд горизонтально, имели одинаковый размер по высоте, не наползали друг на друга и т.д). Да еще и надо найти нужное место, куда их вставить — вот в чем вопросы!.

Если просто вставить коды кнопок, даже в нужное место, то они будут располагаться вертикально, одна кнопка под другой. Такая уж особенность. А мне хотелось, чтобы они были расположены горизонтально, в одной строке.

И я нашел, как это сделать!

Интернет не без добрых (и умных!) людей. Большое спасибо персонально Екатерине Тарасовой и Надежде Юдиной, чьими подсказками я пользовался.

Теперь у меня на другом блоге (которому я на днях дал второе дыхание) эти кнопки выглядят вот так

Итак, что мы делаем?

Для начала открываем панель управления блогом на blogspot, слева из меню выбираем раздел «Шаблон» и затем —  »Изменить XTML»  Откроется окно с сообщением и там нажимайте на кнопку «Приступить». И затем надо нажать на галочку «Расширить шаблоны виджета» (Это надо сделать обязательно, иначе не сможете правильно отредактировать шаблон)

В куче этих разных символов и закорючек нам понадобятся три места. В эти три разные места мы будем вставлять разные части разных кодов. Будьте внимательны и сосредоточенны предельно! Если что-то сделать некорректно и поторопиться сохранить изменения, то можно сделать неработоспособным весь блог. Поэтому, ПЕРЕД тем как сохранить изменения, нажмите на кнопку «Просмотр». Если все открывается нормально, то изменения можно сохранять. Если же открывается страница, на которой написано какое-то предупреждение, то либо откорректируйте вставленный вами код (если понимаете, как), либо отменяйте сделанные вами изменения!)

Сейчас я приведу вам список возможных сервисов, с которых можно получить коды кнопок для вставки.

Вы уж сами выбирайте, какие вам более по душе и по нраву. Понятно, что все и не нужны, выберите самые нужные для вас:

1.   Кнопка +1 от Гугла

2.   Кнопка «Мне нравится» от Фейсбука

3.   Кнопка «Мне нравится» от Вконтакте

4.   Кнопка «Твитнуть» от Твиттера

5.   Кнопки «Нравится» и «Класс» от Мой Мир и Одноклассники. (С недавних пор эти сайты имеют одного хозяина, поэтому и страница, где получают эти коды кнопок — одна на два сервиса)

6. Кнопка для публикации ссылок в Я.ру

7. Кнопка «Поделиться» от Мой Круг Яндекса

8. Кнопка «Share» от LinkedIn

Я остановился на первых пяти сервисах (но шесть кнопок получается).

Принцип такой.

Надо в любом текстовом редакторе (типа Блокнот или NotePad или WordPad) создать специальный контейнер для XTML-кодов кнопок. Потом вставить этот код в блог. И еще вставить специальный код, чтобы кнопки располагались горизонтально.

Затем переходим на сайты для получения кодов кнопок и вставляем полученные коды в выделенное красным место.

У меня итоговый код контейнера выглядит так:

Выделенный мной логин Tavria в коде кнопки Твиттера замените на Ваш!

После этого переходим в админку блога, включаем поиск на странице клавишами Ctrl+F и в появившемся окошке поиска вставляем:

<data:post.body/>

Сразу после этой строчки нам и надо вставить ту конструкцию, которую мы сотворили (из программы Блокнот)

Но если коды этих кнопок  вставить просто в таком виде, то они будут отображаться вертикально, друг под другом. Нам же надо, чтобы они отображались горизонтально, в одну строчку.
Поэтому мы в поиске находим вот такую строчку в коде:

и перед ним добавляем следующее:

 

Надо сказать, что у меня код ]]></b:skin> обнаружился в двух местах и мне пришлось методом научного тыка определять, в какое из двух мест вставлять. После первого места кнопки не работали, а когда вставил после второго, то все заработало, как надо.

Значения ширины, например, width: 90px; подбирал экспериментальным путем для каждой кнопки. Если этого не делать, то кнопки могут либо налезать друг на друга, либо будет большое расстояние между ними, либо вообще могут перестать отображаться (как например, у меня было с кнопкой от Одноклассников). Если же у вас отображается все корректно и так, то все ОК.

Да, и еще важный момент.

Когда будете получать код кнопки от Фейсбука, то обратите внимание, что он состоит из 2-х частей:

Так вот, вторую часть кода мы вставили в созданный нами контейнер. Но для того чтобы эта кнопка корректно работала, нам надо первую часть кода вставить сразу послу открывающего тега <body> (Тоже можно воспользоваться поиском через Ctrl+F и найти место, где это вставить.)

Похожая ситуация и со вставкой кода кнопки от Вконтакте.

Только там во-первых, первую часть кода надо вставлять после тега <head>, а, во-вторых, предварительно надо авторизоваться на сайте, и самое главное — создать специальное приложение, к которому будет осуществляться привязка вашего блога. Затем вы получите ID вашего созданного приложения и к нему уже будет привязана и кнопка «Нравится».

Чтобы создать такое приложение, пройдите по ссылке.

Не стану подробно описывать, как создавать такие приложения, т.к. тема поста другая.

Ну вот вроде и все! Должно получиться!

 

Желаю успехов и остаюсь на связи,

Руслан Соловьев

Нравится Если понравился блог, можете подписаться на RSS, чтобы всегда быть в курсе новостей блога