I'm buidling a rails app and I'm having trouble getting the Facebook Share button to display in Chrome or Firefox. It shows up fine in IE and Safari. The Like and Login buttons work fine in all browsers. I've searched the web, but can't find anything helpful.
On each page I have
<!-- Facebook SDK -->
<div id="fb-root"></div>
<script>
window.onload = function()
{
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXX', // App ID
channelUrl : '//localhost:3000/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
On the page I want the Share button to appear, I have
<fb:share-button type="button_count"></fb:share-button>
Per Adam's suggestion I created an HTML file. THe login button appears but the share button doesn't
<!DOCTYPE HTML>
<HTML xmlns:fb="http://ogp.me/ns/fb#">
<HEAD>
<TITLE>Untitled HTML Document</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<div id="fb-root"></div>
<script>
(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/all.js#xfbml=1&appId=MY_APP_ID"; // APP ID
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
FB
<fb:share-button type="box_count"></fb:share-button> <br>
<div class="fb-login-button" data-width="200"></div>
</BODY>
</HTML>
