Skip to content

Instantly share code, notes, and snippets.

@mupkoo
Last active March 15, 2018 18:26
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mupkoo/0741aa782e9678be1d40 to your computer and use it in GitHub Desktop.
Save mupkoo/0741aa782e9678be1d40 to your computer and use it in GitHub Desktop.
Facebook Like snippet for Turbolinks
class @Facebook
rootElement = null
eventsBound = false
@load: ->
unless $('#fb-root').size() > 0
initialRoot = $('<div>').attr('id', 'fb-root')
$('body').prepend initialRoot
unless $('#facebook-jssdk').size() > 0
facebookScript = document.createElement("script")
facebookScript.id = 'facebook-jssdk'
facebookScript.async = 1
facebookScript.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=#{Facebook.appId()}&version=v2.0"
firstScript = document.getElementsByTagName("script")[0]
firstScript.parentNode.insertBefore facebookScript, firstScript
Facebook.bindEvents() unless Facebook.eventsBound
@bindEvents = ->
if typeof Turbolinks isnt 'undefined' and Turbolinks.supported
$(document)
.on('page:fetch', Facebook.saveRoot)
.on('page:change', Facebook.restoreRoot)
.on('page:load', ->
FB?.XFBML.parse()
)
Facebook.eventsBound = true
@saveRoot = ->
Facebook.rootElement = $('#fb-root').detach()
@restoreRoot = ->
if $('#fb-root').length > 0
$('#fb-root').replaceWith Facebook.rootElement
else
$('body').append Facebook.rootElement
@appId = ->
'APP-ID'
Facebook.load()
<div class="fb-like" data-href="{URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
@lukasnagl
Copy link

Had some Rails Turbolinks problems with the facebook sdk and this gist seems to be a very clean solution, thanks! Consider renaming it to something like “Facebook SDK Turbolinks snippet with like button example” for easier Google discovery. :)

@wingleungchoi
Copy link

Thanks a lot. It works and solve the problem between Rails Turbolinks and Facebook.

@s6stuc
Copy link

s6stuc commented Oct 6, 2015

Works perfectly - thanks! :-)

@benbonnet
Copy link

benbonnet commented May 2, 2016

as of today, //connect.facebook.net/en_US/sdk.js became //connect.facebook.net/en_US/all.js
thx a lot for this script, using fb with turbolinks is not that obvious at first

@ciaranc78
Copy link

ciaranc78 commented Jun 24, 2016

Works really well thanks a mill!!!
...one small problem however, I changed the name of my facebook App, but when I hover over the like button(or click it), it's still giving the old name.
I even created a new app with facebook & updated the app id, and still it's pointing to the old name..any ideas???
Ok..sorted...just needed to add Open Graph MetaData & scrape again from FB..thanks!

@sanyam-j
Copy link

sanyam-j commented Jan 7, 2017

Not working for me. Do i need to call Facebook.load() on every page change?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment