Доработка блока «Поделиться» от Яндекса

Иногда хочется иметь возможность использовать сервисы в духе AddThis и ShareThis не на отдельных страничках, например http://domain.name/a и http://domain.name/b, а на одной странице, которая имеет множество различных разделов, имеющих разные адреса, отличающиеся друг от друга хэшом, например, http://domain.name/a#01 и http://domain.name/a#02.

В этом месте возникает проблема – при изменении хэша необходимо обновлять текст ссылки, который хранится в объекте share-сервиса.

Блок «Поделиться» от Яндекса имеет...

Блок «Поделиться» от Яндекса имеет специальный метод для этого: updateShareLink(link_url, page_title, serviceSpecific). Однако у метода отсутствует аргумент «description» – текст, который появляется в сообщении, в жж-ном посте и т.д.

Проблема заключается в том, что при вызове метода этот атрибут слетает, поэтому нам придётся добавить в updateShareLink() ещё один аргумент: desc, даже если мы не хотим обновлять описание ссылки каждый раз при его вызове метода.

Так что добавим в updateShareLink() ещё один аргумент: desc. Для этого найдём соответствующий фрагмент кода плагина (взято из предыдущей версии, но различия всё равно минимальны):

updateShareLink: function (e, d, b) {
    if (!this._loaded) {
        return this;
    }
    var h, i, a, g, c = "",
        j = "";
    if (arguments.length == 1 && typeof arguments[0] == "object") {
        var f = arguments[0];
        e = f.link || af.location.toString();
        d = f.title || aX.title;
        c = f.description || "";
        j = f.image || "";
        b = f.serviceSpecific || {}
    } else {
        e = e || af.location.toString();
        d = d || aX.title;
        b = b || {}
    }
    a = ae(this._block, "b-share__link");
    for (h = 0, i = a.length; h < i; h++) {
        g = a[h].getAttribute("data-service");
        a[h].href = aV(g, ax(g, "link", e, b), ax(g, "title", d, b),
                ax(g, "description", c, b), ax(g, "image", j, b))
    }
    if (this._popup) {
        a = ae(this._popup, "b-share-popup__item");
        for (h = 0, i = a.length; h < i; h++) {
            g = a[h].getAttribute("data-service");
            if (g) {
                a[h].href = aV(g, ax(g, "link", e, b), ax(g, "title", d, b),
                        ax(g, "description", c, b), ax(g, "image", j, b))
            }
        }
        a = ae(this._popup, "b-share-popup__input__input");
        for (var h = a.length - 1; h >= 0; h--) {
            if (a[h] && a[h].tagName.toLowerCase() !== "textarea") {
                a[h].value = e
            }
        }
    }
    return this;
}

Внесём следующие изменения:

updateShareLink: function (e, d, b, desc_) {
    if (!this._loaded) {
        return this;
    }
    var h, i, a, g, desc = "", // g - это имя сервиса
        j = "";
    if (arguments.length == 1 && typeof arguments[0] == "object") {
        var f = arguments[0];
        e = f.link || af.location.toString();
        d = f.title || aX.title;
        // строчка: c = f.description || ""; здесь не нужна
        j = f.image || "";
        b = f.serviceSpecific || {}
    } else {
        e = e || af.location.toString();
        d = d || aX.title;
        desc = desc_ == null ? "" : desc_; // а такую добавляем сюда
        b = b || {}
    }
    a = ae(this._block, "b-share__link");
    for (h = 0, i = a.length; h < i; h++) {
        g = a[h].getAttribute("data-service");
        a[h].href = aV(g, ax(g, "link", e, b), ax(g, "title", d, b),
                ax(g, "description", desc, b), ax(g, "image", j, b));
    }
    if (this._popup) {
        a = ae(this._popup, "b-share-popup__item");
        for (h = 0, i = a.length; h < i; h++) {
            g = a[h].getAttribute("data-service");
            a[h].href = aV(g, ax(g, "link", e, b), ax(g, "title", d, b),
                    ax(g, "description", desc, b), ax(g, "image", j, b))
        }
        a = ae(this._popup, "b-share-popup__input__input")[0];
        if (a) {
            a.value = e
        }
    }
    return this;
}

Кроме того стоит заметить, что некоторые значки в блоке «Поделиться» от Яндекса не такие стильные, как у AddThis, ShareThis и ряда других. Это исправляется легко – находим строчку: url(//yandex.st/share/static/b-share-icon.png) в коде скрипта. Меняем значки, если считаем нужным и сохраняем изображение у себя, заменяя в скрипте путь на свой, например url(/common/icons/yashare/b-share-icon_mod.png).

Однако хочется ещё немного приукрасить кнопочки. Лично я добавил в конец скрипта следующее:

var YSStyle = {
    fadeDuration: 300
};

$("span.b-share-icon").live("mouseover", function() {
    jQuery(this).stop().animate({opacity: "0.8"}, YSStyle.fadeDuration);
    jQuery("#share_title").stop().animate({opacity: "1"}, YSStyle.fadeDuration);
}).live("mouseout", function() {
    jQuery(this).stop().animate({opacity: "1"}, YSStyle.fadeDuration);
    jQuery("#share_title").stop().animate({opacity: "0.8"}, YSStyle.fadeDuration);
});

Теперь изначально иконки яркие, а при наведении плавно бледнеют. Как это выглядит можно увидеть на странице с какой-нибудь фоткой, например этой.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>