2011-12-18 2 views
3

Я хотел бы добавить на мою новую страницу fb-like, google + 1, твит-кнопку и т. Д. (При отображении определенного сообщения). Я знаю, что, например, addthis предлагает это по умолчанию. Но недостатком является то, что вы получаете несколько большой файл javascript, который иногда вызывает некоторые ошибки. Поэтому мой вопрос: какой вариант и почему вы, ребята, обычно идите в подобных сценариях. СпасибоAddthis/Sharethis VS добавляет каждую кнопку «вручную»

ответ

4

Включение через addthis не является моим предпочтительным способом включения социальных кнопок. Фактически, как вы заметили, иногда возникают некоторые ошибки, и если библиотека addthis терпит неудачу (например, ошибка javascript, время ожидания сервера ...) все кнопки могут выйти из строя, поскольку они зависят от уникальной библиотеки. Кроме того, для простого выполнения производительности addthis - это скрипт, который загружает другие скрипты (это 33kb gzipped), поэтому его можно избежать, и я могу полностью контролировать включение социальных кнопок.

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

$(document).ready(function() { 

    if (('.socialshare').length) { 

     /* twitter button */  
     $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>').appendTo($('.socialshare')); 
     loadscript('//platform.twitter.com/widgets.js', 'twitter') 

     /* Google +1 button */  
     $('<div class="g-plusone" data-size="medium" data-annotation="bubble" data-expandTo="top"></div>').appendTo($('.socialshare')); 
     loadscript('https://apis.google.com/js/plusone.js', 'google-plusone'); 
    } 

}) 

(ради производительности, кэшировать ссылку на .socialshare) loadscript является простая функция скрипта загрузчика как этот

function loadscript(url, id) { 
    var js, fjs = document.getElementsByTagName('script')[0]; 
    if (document.getElementById(id)) { return; } 
    js = document.createElement('script'); 
    js.id = id; 
    js.charset = "utf-8"; 
    js.src = url; 
    fjs.parentNode.insertBefore(js, fjs); 
}; 

в основном, если мой шаблон содержит элемент с социальной фишкой (.socialshare элемента) Я впрыснуть элемент сценария с n id (так что я уверен, что ни один другой скрипт не может их вводить дважды)

+0

Хорошее решение, спасибо за обмен :) Я принимаю это, потому что это лучше, чем оба моих примера, imo. – Johan

+0

Кстати, у вас есть url для более часто используемых библиотек? – Johan

Смежные вопросы