Итак, вы создали свой собственный сайт и теперь хотите добавить на него кнопки социальных сетей. Как трудно это может быть?! Что ж... довольно сложно, если вы заботитесь о внешнем виде своего сайта. Я скажу вам, почему.

Очевидное решение — использовать официальные плагины. Facebook, Google и Twitter — все они имеют свои собственные плагины Javascript, которые вы можете добавить на свой сайт. Идея во всех них очень похожа — включите немного Javascript, добавьте заполнитель в свой HTML, и все готово! Кажется довольно простым. Что это на самом деле делает?

Использование официального плагина заставляет вашего пользователя загружать внешний JS (вероятно, вызывая задержки в процессе рендеринга DOM). После этого внешний JS ищет заполнитель HTML и заменяет его iframe. Затем iframe загружает свое содержимое и становится видимым.

Подводя итог, можно сказать, что вы не увидите ни одной кнопки Поделиться, пока процесс не будет завершен в браузере пользователя. Через некоторое время, когда кнопки появятся, вы можете заметить проблему. Они вообще не выравниваются. Для этого существует исправление, но оно мне неприемлемо. Как насчет того, чтобы исправить эти кнопки, не используя их вообще?

mixin social-buttons(url, title, summary)
    -
        var encoded = {url: encodeURIComponent(url), title: encodeURIComponent(title), sumary: encodeURIComponent(summary)};
        var socialButtons = [
            { network: "Google+", class: "google-plus", href: "https://plus.google.com/share?url="+encoded.url },
            { network: "LinkedIn", class: "linkedin", href: "http://www.linkedin.com/shareArticle?url="+encoded.url+"&title="+encoded.title+"&sumary="+encoded.summary },
            { network: "Pocket", class: "pocket", href: "https://getpocket.com/save?url="+encoded.url+"&title="+encoded.title },
            { network: "Twitter", class: "twitter", href: "https://twitter.com/intent/tweet?text="+encoded.title+"&url="+encoded.url },
            { network: "Facebook", class: "facebook", href: "https://www.facebook.com/sharer/sharer.php?u="+encoded.url },
            { network: "Reddit", class: "reddit", href: "http://www.reddit.com/submit?url="+encoded.url+"&title="+encoded.title },
            { network: "Email", class: "email", href: "mailto:?subject="+encoded.title+"&body="+encoded.summary+"'\n\n"+encoded.url }
        ]
    ul.social-buttons
        each socialButton in socialButtons
            li(class="social-button social-"+socialButton.class)
                a(href=socialButton.href target="_blank" title=socialButton.network)= socialButton.network

Здесь вы можете увидеть шаблон Jade, который можно отображать на стороне сервера. Я не включаю внешний JS в свой HTML. Все делается до того, как страница будет доставлена ​​пользователю. Это простой список общих ссылок. Добавьте к нему немного магии CSS, и все готово! Посмотрите мою собственную магию CSS под этой статьей и попробуйте эти причудливые кнопки!

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

Источники: Кнопки «поделиться в социальных сетях с соблюдением конфиденциальности», Кнопки обмена в социальных сетях без javascript.