Javascript HTML Widget

Michael Pfaff

I'm trying to use the Facebook like plugin on my forum. I put the required Javascript in an HTML widget for Global Header and the Like button code in an HTML widget for Global Footer. It works fine if I use F5 to refresh the page, but then if I navigate to a new page or back to the home page, it goes away.

Site: https://community.nerdlouisville.org

What am I doing wrong?

Thanks for any help!

yariplus

Wrapping your script in ajaxify:end should fix this.

$(window).on('action:ajaxify.end', function () {
  // Your FB code...
});

julian

@Michael-Pfaff Hey, looks like you got it working

Nice site, looks a lot like our community forum

Michael Pfaff

@yariplus When I put that it doesn't do anything and actually just shows up as text on the page.

@julian It looks great when you first visit site. But if you navigate away and then back to main page (or any page) it goes away. Odd.

yariplus

@Michael-Pfaff

Take the js code out of your header widget. Place the code in the Appearance => Custom HTML section of the ACP.

It should look like this:

<script>

// FB init code
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=483489128474352";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// FB refresh code
$(window).on('action:ajaxify.end', function () {
  FB.XFBML.parse();
});

</script>

Also, add the following to the Custom CSS section, to ensure the iframes always get the proper width.

.fb-like, 
.fb-like > span,
.fb-like > span iframe {
  width: 100px !important;
  height: 20px  !important;
}

Michael Pfaff

Odd. I don't see Custom HTML in the Extend section. Just Plugins, Widgets, Rewards. Is there a plugin I need to install?

yariplus

@Michael-Pfaff oops, Appearance section!

Michael Pfaff

@yariplus Golden! And, now I know where the Custom CSS section is! Thank you!

Michael Pfaff

@julian said in Javascript HTML Widget:

Nice site, looks a lot like our community forum

Ha! Thanks! Just need some users now!