Facebook щебетать кнопки с Turbolink
Я пытаюсь реализовать 2 кнопки Share. Facebook Like Button
и Twitter Share Button
,
Но у меня проблема с турболинками. После поиска я нашел интересную статью.
В решении было указано, что удаление исходного скрипта из application.html.erb и включение файла ниже приведут к решению проблемы.
fb_root = null
fb_events_bound = false
$ ->
loadFacebookSDK()
bindFacebookEvents() unless fb_events_bound
bindFacebookEvents = ->
$(document)
.on('page:fetch', saveFacebookRoot)
.on('page:change', restoreFacebookRoot)
.on('page:load', ->
FB?.XFBML.parse()
)
fb_events_bound = true
saveFacebookRoot = ->
fb_root = $('#fb-root').detach()
restoreFacebookRoot = ->
if $('#fb-root').length > 0
$('#fb-root').replaceWith fb_root
else
$('body').append fb_root
loadFacebookSDK = ->
window.fbAsyncInit = initializeFacebookSDK
$.getScript("//connect.facebook.net/en_US/all.js#xfbml=1")
initializeFacebookSDK = ->
FB.init
appId : 'YOUR_APP_ID'
channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html'
status : true
cookie : true
xfbml : true
То же самое касается проблемы Twitter:
twttr_events_bound = false
$ ->
bindTwitterEventHandlers() unless twttr_events_bound
bindTwitterEventHandlers = ->
$(document).on 'page:load', renderTweetButtons
twttr_events_bound = true
renderTweetButtons = ->
$('.twitter-share-button').each ->
button = $(this)
button.attr('data-url', document.location.href) unless button.data('url')?
button.attr('data-text', document.title) unless button.data('text')?
twttr.widgets.load()
Я сделал это, но по какой-то причине моя проблема не исчезла... Может ли кто-нибудь помочь мне сделать это правильно?
1 ответ
Обратитесь к этому вопросу Rails 4: как использовать $(document).ready() с турбо-ссылками (ответ с наибольшим количеством голосов), поэтому попробуйте:
ready = ->
...your coffeescript goes here...
$(document).ready(ready)
$(document).on('page:load', ready)
У меня раньше были проблемы с turbolink, когда я загружал скрипт fb на домашней странице и переходил по ссылке на другую страницу, а скрипт fb не перезагружался. Поэтому я пытаюсь добавить data-turbolink-track = false
и это сработало. Надеюсь, это поможет.