Как заставить социальные кнопки работать с location.hash

Question

Я создал некоторый скрипт галереи в jQuery (http://creotiv.in.ua/examples/photowall/ - немного NSFW) и хочу добавить социальные кнопки для каждого изображения, чтобы пользователи могли любить каждое изображение отдельно. Но после добавления социальных кнопок я увидел, что они не используют часть хэша URL, но я использовал его для навигации по всем изображениям.

Если щелкнуть изображение галереи, вы увидите три кнопки социальных сетей внизу. Они используют URL галереи вместо URL каждого отдельного изображения.

Может быть, кто-то знает, как заставить кнопки Twitter, Google+ и Facebook использовать хэш местоположения страницы и изменить его, если он был изменен?

Вот код, который генерирует социальные кнопки:

(function(w, d, s) {
  function go(){
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.src = url; js.id = id;
      fjs.parentNode.insertBefore(js, fjs);
    };
    load('https://connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk');
    load('https://apis.google.com/js/plusone.js', 'gplus1js');
    load('https://platform.twitter.com/widgets.js', 'tweetjs');
  }
  if (w.addEventListener) { w.addEventListener("load", go, false); }
  else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));

Answer 1

Хорошо ... давайте попробуем еще раз.Эти сценарии совместного использования при запуске во время load () используют существующее расположение window.location для получения URL-адреса и создания HTML-кода.URL хранится в этом HTML, и этот HTML генерируется только один раз.Я предполагаю, что они не выставляют API, динамически обновляют URL внутри компонента.Вы не можете получить доступ к данным из родительского фрейма, поэтому вы не можете обновить URL самостоятельно.

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

Звучит лучше?:)

Answer 2

Нашел только одно решение этой проблемы.Переустановите все социальные кнопки при смене URL.Например:

//Facebook like
if(typeof(FB) !== 'undefined')
     FB.XFBML.parse(document.getElementById('fblike'));

//Google plus one
if(typeof(gapi) !== 'undefined') {
    gapi.plusone.render(document.getElementById('gplus'),{
        'href':location.href,
        'annotation':'bubble',
        'width': 90,
        'align': 'left',
        'size': 'medium'
    });
}

//Twitter tweet button
if(typeof(twttr) !== 'undefined') {
    $('.twitter-share-button').attr('data-url',location.href);
    twttr.widgets.load();
}

с html-кодом:

<div style="float:left;margin-top: 5px;width:80px;">
    <div id="gplus" class="g-plusone" data-size="medium"></div>
</div>
<div style="float:left;margin-top:5px;width:90px;">
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
</div>
<div style="float:left;margin-top:5px;width:80px;" id="fblike">
    <fb:like send="false" layout="button_count" width="100" show_faces="false"></fb:like>
</div>

Но все еще существует ошибка с кнопкой G +, потому что она использует правильный URL для общего доступа, но не для подсчета

Answer 3

Хэш-часть URL-адреса обрабатывается только пользовательским интерфейсом веб-браузера и игнорируется анализаторами HTML.

Существует спецификация, позволяющая сканировать страницы с хеш-бэнгами:

 https://code.google.com/web/ajaxcrawling/docs/specification.html

Однако ни один сканер, ни сайт пока не поддерживают его.

Вам нужно найти способ использовать реальные URL-адреса для изображений вместо URL-адресов hashbang.