Скрипт для WordPress “Добавить в закладки”

19 ноября 2007 г.

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

На этом блоге средства социализации постов были поочередно реализованы 3-мя разными способами: сначала я вставлял коды ссылок на социалки вручную, редактируя шаблон WP, затем поставил плагин, делающий то же самое, и, наконец, остановился на 3-м способе, когда эти ссылки выводятся полностью с помощью технологии JavaScript.

Хочу отметить, что первые 2 варианта совсем не нравились мне. Все потому, что в результате под каждым постом блога я получал ужасающий кусок хтмл-кода (с инлайновым ява-скриптом) внушающего размера. Чтобы увидеть ЭТО, посмотрите в исходный код, например, такой страницы. Поисковики наверняка пугаются, видя сие безобразие.

Помимо размера кода не прельщало и то, что в результате появлялось множество лишних исходящих ссылок. Сами понимаете, что абсолютно “левый” тег <noindex>, равно как и атрибут rel=”nofollow” - не панацея.

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

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

Полагая, что данное решение придется по душе не только мне, расскажу, как данный скрипт адаптировать под популярный движок WordPress, на котором работает большинство stand-alone блогов (автор скрипта дал на это добро).

Процесс установки довольно прост, рассмотрим его последовательно:

  1. Необходимо в файл functions.php Вашей WP-темы добавить нижеследующий код (если такого файла еще нет, то создать его):
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <?php

    function social() {

      $u = urlencode(get_permalink());
      $t = get_the_title();

    $social=<<<EOF
    function so(u,t) {
       for (i=0; i< s.length; i=i+2) document.write(
          '<a target="blank" href="http://'+s[i]+'/'+s[i+1].replace('{u}',u).replace('{t}',t)+'">'+
          '<img src="/wp-content/themes/default/social/'+s[i]+'.ico" border="0" width="16" height="16" alt="Добавить в '+s[i]+'"></a>'
          );
    }
    var s=new Array(
       "del.icio.us","post?url={u}&title={t}",
       "news2.ru","add_story.php?url={u}",
       "google.com","bookmarks/mark?op=edit&bkmk={u}&title={t}",
       "bobrdobr.ru","add.html?url={u}&title={t}",
       "memori.ru","link/?sm=1&u_data[url]={u}&u_data[name]={t}",
       "moemesto.ru","post.php?url={u}&title={t}",
       "mister-wong.ru","add_url/?bm_url={u}&bm_description={t}",
       "rumarkz.ru","bookmarks/?action=add&popup=1&address={u}&title={t}&description={t}",
       "rucity.com","bookmarks.php?action=add&address={u}&title={t}&description=",
       "linkstore.ru","servlet/LinkStore?a=add&url={u}&title={t}",
       "myscoop.ru","add/?title={t}&URL={u}",
       "vaau.ru","submit/?action=step2&url={u}",
       "newsland.ru","News/Add/type/news/"
    );

    EOF
    ;

       $social=<<<EOF

    <p class="social">
    <script>
    $social so (
          '$u',
          encodeURIComponent('$t')
       );
    </script>
    </p>

    EOF
    ;

    echo $social;

    }

    ?>
  2. Сохранить иконки социалок в какую-либо папку.
  3. В вышеуказанном коде заменить путь /wp-content/themes/default/social/ на путь к Вашей папке с иконками.
  4. Добавить в свою WordPress-тему в то место, где желаете выводить ссылки на социалки, такой код: <?php social(); ?>
  5. Готово. То, что получается в результате, Вы можете увидеть, посмотрев код данной страницы.

Для удобства Вы можете скачать готовый архив, содержащий и файл functions.php, и иконки социалок.

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

* * *

Услуга, предлагаемая заводом-производителем «Росблок» на сайте rosblok.ru - доставка пенобетонных блоков разных марок (теплоизоляционный, конструкционный, конструкционно-теплоизоляционный), а также сопутствующих товаров.

Теги: , , , автор: Dimox | рубрика WordPress

Комментарии (47): »

  1. Одно плохо, с выключенным JS не увидишь ничего ((

    @
  2. Да, но и Бог с ним. Оригинальные коды тоже содержат в себе JS, поэтому и они не сработают так, как надо, с выключенным JS.

  3. 2Dimox то что у тебя стоит социалки сделанно таким же образом ?

  4. Ну тогда и правда, бог с ним с JS.

    @
  5. Красивое решение.
    Спасибо!

    @
  6. Берия Лаврентий Павлович, да, я же написал об этом в посте.

    Comfi, пожалуйста.

  7. сегодня в Lifehacker увидел что-то подобное http://odnaknopka.ru/get/

  8. Yuriy, я тоже вчера об этом узнал с того же сайта.

  9. “Добавление в скрипт новых ссылок на социальные сервисы, думаю, труда не составит, все делается по аналогии” - к сожалению, не все дядьки с сервисов закладок разглашают синтаксис урла для своих добавлялок. Или я такой криворукий-кривоглазый, что не смог найти на их сайтах такого описания.

    @
  10. Бомж квадратный , как правило код для добавления ссылки в свою систему данные сервисы публикуют где-то на страницах помощи. На всех социалках, что я бывал, такой код присутствует. Если же у них этого нет, то большой им минус за это. Возможно, ты не нашел, потому что плохо искал :).

  11. К сожалению, у меня не получилось. Я с Вордпрессом пока на длинной ноге, но все сделал по инструкции. Залил в default иконки, в functions.php вставил код, вставил код для вывода блока:

    Но не заработало все равно.

  12. Презренный манимейкер, по идее, должно было работать. Могу помочь разобраться, если что, пиши через контакты вверху страницы.

    Кстати, в качестве альтернативы можешь попробовать поставить “Одну кнопку” - http://odnaknopka.ru/get/. Там есть плагин для ВП, достаточно его только активировать.

  13. А у меня почему то с http://odnaknopka.ru/get/ выдается в IE что в ява скрипте не хватает скобки ) И это каким то образом влияет на RSS записей (чушь выдало с куском кода явы этой одной кнопки), зато в single.php всё ок вроде было без ошибок…
    Хотел добавить ваш php скрипт, но он почему то не подсвечивается корректно в Dreamweaver, я в php не силен, но заметил что не подсвечивается в конце закрытие скрипта ?> , значит внутри скрипта что то не закрыто… И ещё вопрос, куда именно (перед какими элементами) этот скрипт лучше вставить в functions.php ?

  14. значит внутри скрипта что то не закрыто

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

    куда именно (перед какими элементами) этот скрипт лучше вставить в functions.php ?

    Совершенно без разницы, в какое место. Главное - не во внутрь функций, которые там уже имеются.

  15. Может быть и не нашел. Например, берем 100zakladok.ru На их сайте я нашел только html-код вставки кнопки. А вот как их кнопку запихнуть в массив твоего кода - вот в чем вопрос :) Или нужно просто смотреть как они формируют запрос и по аналогии вписать в код? Эх… не силен я в этом… :(

    @
  16. Лови, вот что получилось у меня, надеюсь, знаешь куда это вставить :)

    1
    "100zakladok.ru","/save/?bmurl={u}&bmtitle={t}",

    И еще, если эту запись добавляешь последней в массиве, то запятую в конце не надо.

  17. может кому пригодится:

    По одному ему понятным причинам сервер отказывался воспринимать иконки в формате .ico
    С помощью утилиты IcoFX импортировал иконки в формат .gif
    В файле functions.php поменял в 12 строчке: .ico на .gif
    ..вроде все работает
    :)

    @
  18. Хорошо, когда всё в одном месте (я про то, что не надо под каждую социалку своё мутить :) )

    Dimox, а как ты комментируешь, в стиле форумов, например как в 14 каменте?
    Это плагин такой?

  19. Dimox, а как ты комментируешь, в стиле форумов, например как в 14 каменте?
    Это плагин такой?

    Если имеете в виду цитаты на зеленом фоне, то это всего лишь html-тег <blockquote>

  20. Мда, всё гениальное - просто ))

  21. Здравствуйте,
    установила плагин. Надеюсь в будущем будет выглядеть хорошо. Но пока, к сожалению, картинки отображаются так же, как и у вас на странице, сплошные квадраты.
    Путь к папке с картинками я прописала правильно, тем не менее они не отображаются.
    В чем там может быть дело?
    Кстати, подскажите, начинающему блогеру: почему путь к папке нужно прописывать полностью, а не так, как прописывают в HTML?
    И раз я уже попала в компанию людей знающих, то наберусь наглости спросить:
    Подскажите, пожалуйста, как русифицировать тему? У неня на странице выводятся надписи на английском, а когда я попыталась добавить в файл index.php надпись: “добавить в социальные закладки”, получились сплошные квадраты.
    По-видимому, кодировка не та.
    Буду благодарна за любую подсказку.
    Людмила

  22. Людмила, у меня нет никаких квадратов, это что-то с вашей стороны неправильно работает.

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

    Не знаю. Если прописано верно, то работать должно.

    Кстати, подскажите, начинающему блогеру: почему путь к папке нужно прописывать полностью, а не так, как прописывают в HTML?

    Не совсем понимаю, о чем вы. Приведите пример.

    Подскажите, пожалуйста, как русифицировать тему?

    Возможны 2 способа:

    1) С помощью словаря самостоятельно перевести все английские слова и фразы в файлах темы.
    2) Скопировать из какой-то русскоязычной темы соответствующие слова и фразы и заменить их в вашей теме.

    получились сплошные квадраты.

    Необходимо сохранять файлы темы в той кодировке, в которой работает Ваш сайт.

  23. “Не совсем понимаю, о чем вы. Приведите пример.”

    Пример: папка social и файл functions.php находятся в папке с темой, ее название: oldschool-10.
    Файл functions.php ссылается на папку social, в которой находятся картинки.
    Почему путь к папке прописывается не img src=”social/имя графич. файла,
    а img src=”/wp-content/themes/oldschool-10/social/?
    И если путь к картинкам я указала неправильно, то как в данном случае будет правильно?

    “Необходимо сохранять файлы темы в той кодировке, в которой работает Ваш сайт.”

    Как мне узнать, в какой кодировке работает мой сайт (он у меня не спрашивал, в какой кодировке ему работать) и как мне сохранить файлы темы в той же кодировке?
    Заранее благодарна за подсказку.
    Людмила

  24. Почему путь к папке прописывается не img src=”social/имя графич. файла,
    а img src=”/wp-content/themes/oldschool-10/social/?

    Потому что в этом скрипте не используется переменная из движка ВП, которая подставляет путь до темы.

    И если путь к картинкам я указала неправильно, то как в данном случае будет правильно?

    Если картинки у вас лежат в папке /wp-content/themes/oldschool-10/social/ и при этом не отображаются, тогда не знаю… Видимо, еще какие-то причины.

    Как мне узнать, в какой кодировке работает мой сайт

    В исходном коде страниц сайта есть такая строка в самом верху:

    1
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    здесь после charset= указана кодировка.

    и как мне сохранить файлы темы в той же кодировке?

    Нужно воспользоваться каким-либо текстовым редактором, который умеет сохранять файлы в разных кодировках. Например, PSPad или Notepad++.

  25. Сейчас без JS почти никто в Нет не ходит… Скрипт очень разумно придуман - респект!

  26. Интересное решение, надо будет попробовать…В любом случае спасибо).

  27. [quote post=”109″]И еще, если эту запись добавляешь последней в массиве, то запятую в конце не надо.[/quote]
    Ошибки всё равно по идее не должно быть

    @
  28. Подскажите пожалуйста куда добавить
    Уже все места перепробовал, подскажите пожалуйста.

    @
  29. Саня возмите “Одну кнопку” - http://odnaknopka.ru/get/. И напрямую вставьте в шаблон своего блога.

  30. Мне как-то более приятен вариант с “одной кнопкой!. Но хотя кому как, кто и поизвращаться любит :))

  31. SEO, а вот я не сторонник сервисов, которые требуют загружать код с их сайта, как это сделано у “Одной кнопки” (в общем-то сюда можно отнести и любую систему контекстной рекламы). Стоит их серверу стать недоступным (от этого никто не застрахован), как страницы блога станут грузиться с ощутимой задержкой, что не придется по душе посетителям блога.

  32. [quote comment=”3218″]SEO, а вот я не сторонник сервисов, которые требуют загружать код с их сайта, как это сделано у “Одной кнопки” [/quote]
    Dimox, аналогично. Собственно полностью разделяю мысли в посте (эмм, это не спам комментов).
    Предлагаю посмотреть мой вариант скрипта на javascript, подключается чрезвычайно просто на любые сайты-блоги-cms:
    http://web-mastery.info/scripts/javascript-83.html
    Положительный момент - минимум кода на странице(код сервисов реально разворачивается на клиентской машине), простое добавление/удаление и, главное, скрипт лежит на своем хосте.

    @
  33. sabotage, да, это тоже хорошее решение.

  34. Прошу прощения за ламерский вопрос, но вот такая штука получается.
    У меня в теме посты выводятся, как я понимаю, вот таким кодом:

    if (have_posts()) : while (have_posts()) : the_post();

    Если тупо вставить вызов функции после the_post(); то почему-то блок иконок выводится перед собственно постом, а не после, как вроде бы должно быть. Совершенно не понимаю, почему такое =(
    Как исправить? Заранее спасибо. И в любом случае огромное спасибо за сам код.

    @
  35. 15g, все дело в том, что текст самого поста выводит код the_content() (или the_excerpt()). Вставляйте функцию закладок после него, и все будет гуд ;)

  36. Упс. Спасибо.
    Надо было не разбираться в коде, оказывается, а курить вопрдпрессовский кодекс =))

    @
  37. Кодекс вообще штука рулезная, жаль на английском, мне например сложно немного, чуть отвлекся - потерял нить :(

  38. я так понял, что у тебя счас немного измененный скрипт стоит?
    можешь его выложить?

    @
  39. Dux, возможно, однажды выложу его.

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

    К сожалению, так не получается. У вас в коде выводится всего одна короткая строчка (<script type=”text/javascript”>social()</script>)
    А у меня весь скрипт целиком.
    (<script>
    function so(u,t) { … и до конца)
    Не подскажете, как действительно достичь такого же результата, как у вас?

    @
  41. Сергей, пост написан почти года назад. Скрипт за это время изменился. Может быть однажды напишу о новом.

  42. Да, спасибо. Скрипт от Ласто работает практически везде, не только на WordPress. Кстати недавно написал пост о том, как его встоить в любой динамический сайт. Надеюсь будет полезно…

  43. Добрый день.
    Воспользовался материалом данного поста, установил иконки для регистрации в социалках. Сейчас обследовал Ваш блог , и не нашел ничего подобного, в связи с чем возник вопрос: насколько наличие этих кнопок оправдывает себя, есть ли какой нибудь пусть самый минимальный эффект от этого сейчас? или тема уже себя исчерпала и смысла городить огород уже нет?

  44. Сейчас обследовал Ваш блог , и не нашел ничего подобного

    Потому что теперь используется усовершенствованный скрипт.

    насколько наличие этих кнопок оправдывает себя, есть ли какой нибудь пусть самый минимальный эффект от этого сейчас? или тема уже себя исчерпала и смысла городить огород уже нет?

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

  45. Помучался я с выводом иконок. Оказалось дело было в .htaccess. Проверил скрипт “летает” по сравнению с “тормозящей” “одной кнопкой”. Спасибо :)

  46. Спасибо за скрипт, как раз хочу реализовать меню закладок на своем сайте!

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге dimox.name:

  1. Первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

Подписаться, не комментируя

Предыдущие из рубрики