Как установить красивые кнопки соц.сетей на сайт
В рубрике : WordPress уроки от нерадивый бухгалтер
Янв.15,2013
После того, как я установила новые вращающиеся кнопки соц. сетей, которые Вы можете лицезреть у меня, многие спрашивают, как я это сделала. И вот настало время поделиться этой информацией. Все элементарно.
Необходимо скопировать специальный код, в то место, где наши кнопочки будут жить и радовать глаз читателей. В моем случае я вставляла код в шапку (header.php). Если Вы хотите установить их в боковую колонку, выберите sidebar.php.
А вот и сам код (элементы <pre> — вставлять не нужно) .
</pre>
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="ССЫЛКА НА ВАШ RRS ПРОФИЛЬ" rel="nofollow" target="_blank"><img border="0" src="http://uma-sovsem.net/3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon" /></a> <!--End Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href=" ССЫЛКА НА ВАШ ПРОФИЛЬ в фейсбук" " target="_blank"><img border="0" src="http://uma-sovsem.net/4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon" /></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="ССЫЛКА НА ВАШ ПРОФИЛЬ в твиттер" " target="_blank"><img border="0" src="http://uma-sovsem.net/3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon" /></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href=" ССЫЛКА НА ВАШ ПРОФИЛЬ в гугл+" " target="_blank"><img style="margin-right:1px;" src="http://uma-sovsem.net/2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png" /></a> <!--End Google+ Icon--> </div><br/> </center>
<pre>
Как Вам кнопочки? Мне очень нравятся.
Если заменить в коде часть «title=Follow Our Updates On Twitter» на title=»Следите за мной в Twittere», то всплывающая подсказка при наведении на кнопку Твиттера будет не на английском, а на русском языке. Аналогично можно сделать и для остальных кнопок, хотя в принципе по их внешнему виду и так все понятно.
Между прочим красивые кнопки соц.сетей помогут не только продвинуть Вас и Ваш блог, но даже помогут улучшить поведенческие факторы, в частности увеличивается время, проведенное читателями на блоге (это я по собственному опыту говорю). Иногда смотрю в вебизор (это сервис, предоставляемый Яндекс Метрикой, позволяющий шпионить за посетителями) и вижу, как посетители ни сидят и крутят эти кнопочки. =)
Потыкайте по кнопочкам
Вы можете оставить комментарий, или трекбэк с Вашего сайта.
Пошел ставить к себе на сайт!
Спасибо, Бух!
Круто! Давно мечтала узнать, как ты их сделала 🙂 Но вот теперь я в полном замешательстве — поставлю к себе, а наши общие читатели скажут, что сперла у тебя)))
Ну я ведь статью для того и написала, чтобы их стырили) А если все будут боятся, я так и буду с ними одна сидеть?))
Ну может тогда и стырю))
Если заменить участок кода …title=»Follow Our Updates On Twitter»… на …title=»Следите за нашими обновлениями на Twitter»… , то всплывающая подсказка возле кнопки Твиттера будет не на англ., а на русском языке. Аналогично можно сделать и для остальных кнопок.
оу, спасибы!))
Какие умницы у нас блогини — утерают нос мужикам )))
Бух, иа не виноват — сама напросилась: упер 😛
Да, совершено верное и полезное дополнение, спасибо!)
Бух, спасибо за замечательную идейку! Правда, негоже у тебя тырить кнопочки, пойду поищу что-то на подобии))
Эти кнопочки для меня слишком красивые.)
А я люблю флэш-облако крутить. Я от него впадаю в транс.)))
Какая вы мадам скромная, однако!
Пойду тоже в транс впаду от вашего облака!
Да. Открываю новую медитативную технику (правда я ее еще не придумала), называется «Кучевые торсионные потоки»
Техника заключается в том, чтобы как можно дольше крутить облако, желательно переходя на разные страницы каждые 10 минут.)))
Клонирование этой идеи приветствуется.
Есть много способов работы над собой — если захотеть их увидеть.. Хотите резко поменять свою судьбу? — Нацарапайте свое желание гвоздем на капоте Бентли ))))
Думаю. что в этом направлении я не хочу менять судьбу). А вы уже пробовали, царапали? И как?.)
ну да.. свой правда, нет такого ни у кого в округе ))) так что без изменений 😉
Ну, ты Ал, крутой! Гвоздем по Бентли… У тебя их много наверное! Да не гвоздей. а Бентли…
Дай мне одну. Я тоже нацарапаю мечту свою » Хочу в Рио де Жанейро!». Ничо если я на твоем Бентли и уеду туда?
Да, если нацарапать гвоздём (да если ещё на чужой машине) — точно поменяешь свою Судьбу….
А вообще то вам сюда ОМ ТАРЕ ТУТТАРЕ ТУРЕ СВАХА! 😉
Классный сайт. Я там картинку украла, где девка сидит возле лилий. Вставлю себе в какой-нибудь пост эзотерический.
Еще есть)
мантры отсюда в пост не надо 😉
Бух ссылки апосля можешь грохнуть 😛
тексты не тырю, только картинки.
Но стих прочитала. зачем же его тырить. Свое надо сочинять.
я про сами аудио мантры ))
Аудио я могу чисто слухануть, но не тырить. Стырить их с контакта можно, но я их там тоже только слушаю.
Вот, наконец, дождались давно обещанную статью.:)
А я уже стырила и установила у себя!
Классные такие кнопки, вертлявые )))Спасибо!!!
Кстати, очень органично вписались) Зашла поигралась с ними)
А у меня кнопочки шли приятным дополнением к теме. Но я свои поставила. В любом случае, код — это полезная штука!
Зашла посмотрела, у Вас прикольные кнопочки наверху, правда я бы их немного поярче сделала)
Бух, мы же вроде на «ты» перешли. 😉 Всё равно они у меня надолго не задержались, люблю часто обновлять дизайн. 🙂
У меня на автомате, блин, я буду исправляться, дай мне время =))
Мне кажется обновления дизайна — не очень хорошо для блога. И говорят ПС это плохо воспринимают…Да и посетители запоминают по дизайну блоги. Наверное, когда ты найдешь свой вариант, ты остановишься)
ОК, а то я себя старушенцией ощущаю. 🙂
Я имею в виду фон и кнопочки, обычно это сезонные обновления, и если что-то прям интересное встречаю. А от всяких раздражителей, типа птичек летающих и поющих по поводу и без, еще на предыдущем блоге отказалась, а то посетители пугались. 🙂
Я тоже не люблю всяких летающих, прыгающих зверушек на блоге — отвлекают здорово!
Кнопочки класснючие. Я давно на них внимание свое обратила! Но не буду, наверное, я их к себе забирать — не впишутся в дизайн.
Но они у тебя нереально забавные!
вот блин, хотел тоже про это написать, но когда я начал вставлять в запись,они не стали крутится, вставляю в код pre, код выходит за рамки страницы и страница едет налево, форма комментов направо, начал CSS просматривать, менять так и не удалось найти причины.. 🙁
Эм, если я правильно поняла в чем проблема, чтобы код был в такой рамочке, так скажем, надо плагин использовать.
Пошел искать другую фишку 🙂
Как прошли поиски фишки? Твой робот действительно грубоват))
фишек пока нет, за то он пошее получит по полной))
Что там у тебя за дела были с роботом? Уже перевоспитал?
А то я собираюсь к тебе на рюмочку чая, и вот теперь опасения появились — робот-то того, сам в атаку не бежит сразу?
Я такие установила давно, но в сайдбар в форме виджета, и в редактор лазить не пришлось. Но это на любителя, конечно. Я просто очень обновлений шаблона своего опасаюсь, ведь все изменения в редакторе прахом пойдут…
Поставил кнопки на сайт. Фейсбук что-то не открывает всю страницу. Непонятно почему так.
Я зашла по ссылке на ФС, открылась Ваша страница, но т.к. меня там нет, я даже не пойму вся она или нет, проблема решилась?
На основном браузере у меня сразу заходит на мою страницу, а на других браузерах на ту страницу, где я есть, но там еще какие-то кнопки для какой-то регистрации. А сразу, чтобы зайти на основную страницу в Facebook, так не получается.
Это наверное, потому что на основной страничке у Вас данные сохранены и вы сразу можете войти в свой профиль, а на других браузерах предлагают войти в ФС, нет?
Да так. А как сделать по другому не знаю. На других сайтах сразу отображается страница профиля, а не так как у меня.
Перефразирую Чехова: В блоге всё должно быть прекрасно: и текст, и оформление, и социальные кнопки. ))
Отлично смотрится 🙂 У меня к счастью все это дело уже встроено в шаблон, а то я не люблю лазить в коде 🙂
Не буду я как все! Счас все нарядимся в одинаковые кнопочки…
Буду безкнопочной!
вось ты какая…………..
А кнопки ведь можно и иные поставить — принцип действия лишь сохранится
Я не люблю быть в одинаковых одеждах. Советские времена ушли… «Большевички» нам не надыть!
так я ж про то — проблем то, одень их на свой вкус — а крутятся то как 😉 софсем как живые))))
ну ты не права — «Большевички» бывают даже очень ничево ))))
Они живые. В них полтергейст живет.)
хочу себе сделать из них бусы. кстати, прикольная мысля. Если б я умела и не ленилась рисовать,я бы сделала как бусы.
Нынче у Adobe аттракцион невиданной щедрости — Photoshop CS2 можно скачать бесплатно с ключом (itech-master.ru/photoshop-cs-mozhno-skachat-besplatno/). Этой программы более чем достаточно для любого рисования
Я тоже так думала, когда прочитала, что если всем надо, значит, мне необязательно,а то неинтересно.
А чё, интересно вполне 🙂 На новый проект поставлю их 🙂
Я потом пойду к тебе покручу их.
Правда? Ты это сделаешь?)
и я приду)))
М.. А я что-то не понял. Это с картинки надо код переписать, чтобы такие кнопки получить?
Зачем же так мучиться? Код просто скопировать надо) Он представлен после слов: «А вот и сам код»
А, теперь вижу. Спасибо!
Кнопочки классные. Вот только бы еще для «Вконтакте» такую завести
Как раз выполняю заказ, создаю блог, вот туда и поставлю их. Бух, ты же не против? 🙂
Я «за», рада, что пост многим пригодился!) Ты тоже блоги на заказ делаешь, молодцы Вы)
Первый мой блог на заказ, делаю по новогодней скидке очень дешево 🙂 За кнопки спасибо!
Классные кнопочки! А почему кнопка Facebook отправляет на страницу Вконтакте?
Я люблю путать людей!) И у меня все не как у них) У людей тобиж) Но Вы можете настроить все как надо! =)
Кнопочки и правда, симпатяшные.
Но я не поняла ,Бух, ты ими что ли не пользуешься? Под статьёй у тебя простые стоят.
кнопочки классные, надо будет и себе как-нибудь такие сделать
Я тут после смены шаблона думала такие кнопки вставить, но когда дочитала до места, что надо ссылки вставлять, сразу поняла, что мне лень.
Может, пора мне начать бить себя в лоб? Вдруг поможет.
А я эти красивые кнопочки где-то у другом месте «стырил».
У жи не помню где. и у кого 🙁
Но помню точно, что поблагодарил за предоставленное удовольствие 😉
Что-то у меня сегодня с пунктуацией не всё в порядке. Исправляю, а то могут не о том подумать :
«А я эти красивые кнопочки где-то в другом месте «стырил».
Уж и не помню где, и у кого «
Наконец то я намучался, поставил все такие же кнопочки себе на блог (упрямый блин), только картинки поменял 🙂 Сижу теперь кручу верчу как дурачек, заходите посмотрите 🙂 Вместе покрутим.
Хотела зайти, покрутить кнопочки, а блог не доступен ((
Отличное решение. Жаль только, что в IE не работает 🙁
Интересная фича, пойду-ка и я такие кнопочки себе на сайте попробую забабахать
Спасибо. забрал ))
Спасибо, очень красиво, у себя реализовал.
Мне очень понравилось, благодарю вас, однозначно в закладки.