This question already has answers here:
AngularJs and Facebook Comments
(2 answers)
Closed 7 years ago.
I am trying to use the facebook share plugin. It works fine if I reload the page, but if i go to the page without reloading then the "share button" does not appear. I have tried moving the facebook sdk code into my template and into the head but neither seem to do the trick. Any ideas?
this is the fb code that I have right below the opening tag
<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/sdk.js#xfbml=1&version=v2.5&appId=xxxxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
where i implement in my html template
the fbUrl is defined in my controller
<div class="fb-share-button" data-href="{{fbUrl}}" data-layout="button" id='fb-share'></div>
The problem is the function runs immediately. It's an immediately invocable function expression (IIFE). If you put it in the head, it runs before any of the rest of the document. The only (probably) safe place to put it would be at the end of your document, before the body tag, when all the html elements have been loaded.
If you notice, one of the call is to getElementById but no elements are loaded if you put that into the head and the ID element might not have been loaded if you put it any place else.
Related
I'm attempting to implement a Facebook like button on a web page on a domain which was recently upgraded to SSL. The sample code Facebook provides doesn't work for me. I keep getting this error when attempting to use Facebook's like button code:
Failed to execute 'postMessage' on 'DOMWindow': The target origin
provided (http://mywebsite.com) does not match the recipient window's
origin (https://mywebsite.com)
I completely cleaned out all http:// references throughout my project, so I'm a bit stumped. I did find a post which suggested the problem I'm encountering might have to do with the code running before the page is fully loaded. With that in mind, I'd like to delay running JavaScript until the page is loaded.
So let's say they want me to put this code just inside the <body> tag:
<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/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then I put my button somewhere on the page:
<div class="fb-like" data-href="https://www.facebook.com/MyPage/" data-width="100" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
How would I move the JavaScript they want me to embed inside the body of the <body> tag into my script.js file? I tried this, but I'm kinda rusty on jQuery, so I wanted to see if I'm fouling up what I'm attempting to do (spoiler: I probably am):
(function($) {
$(".fb-like").loaded(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.10";
// also tried adding https: in front of it, like so
// js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'))
})
Update
Based on comments, I created an App on the Facebook developer portal, classified it as "Business" and enabled it publicly.
I put the following JavaScript code inside the <body> tag, per Facebook's instructions.
<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/sdk.js#xfbml=1&version=v2.10&appId=XXXXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I also cleaned out the code I put in my scripts.js file so that all the code for the like button is on the html page.
I put the button inside a visible portion of the markup inside the <body> tag. I checked that the width of the button isn't set to zero. I refreshed the page, I nuked the browser cache (Safari and Chrome).
If I type https://mywebsite.com/my-page-with-like-button.html in the browser, I still get this error:
Failed to execute 'postMessage' on 'DOMWindow': The target origin
provided (http://mywebsite.com) does not match the recipient window's
origin (https://mywebsite.com)
...and nothing appears.
If I type in http://mywebsite.com/page-with-like-button.html in the browser, the page loads without an error, but the like button doesn't appear.
Any ideas re: what I'm mucking up are greatly appreciated. The last time I did this, it was a 5 minute project. Now, I'm on day 2 of fiddling with it.
To somewhat answer your question on how to add the FB script to an external js file. This is a best guess scenario; You could try and add it as it is in the example:
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I believe this would still need to be included before your <div> holding the like button. If you have other js inside that file, this should be at the top and outside of any other JS you have. for example:
(function(d,s,id){ /* FB script */}(document, 'script', 'facebook-jssdk'));
(function($){ /* your other JS */ })(jQuery);
This is purely a guess, and not the recommended 'FB official' way. So as long as you can add what you need in a js file just after the <body> element, that should work. I also assume you would need the correct markup for this in the HTML file(s) for this also, meaning:
<body>
<div id="fb-root"></div>
<script src="yourJsFileWithFB.js"></script>
....
.....
<div class="fb-like"></div>
...
.....
</body>
Plus all the data attributes referenced on the like button mentioned in the example HERE
I used the following script in my web page
In body tag i used the following code
<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/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
In my blog listing I used the following in each blog:
<div class="fb-share-button" data-href="http://test.com" data-layout="button"></div>
Its displayed fine. After 10 blogs while scroll the remaining data are loaded dynamically by using the ajax file.
Here also I used the above script and Div share button. But it is not displayed with the ajax loaded file.
I googled a lot and I couldn't find a right solution. Please help me to fix this.
after ajax, call function FB.XFBML.parse(); to force the refresh/rendering FB share buttons
Hi I'm tying to put a like button in my web but I have a problem with that, I'm using the code below
<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/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="https://www.facebook.com/petsandfashion?fref=ts" data-width="500px" data-numposts="5" data-colorscheme="light"></div>
But this doesn't work and appear an error "GET file://connect.facebook.net/es_LA/all.js". My question is I need put something more?, other script or call another function or something more?.
I put in the script this "js.src = "https://connect.facebook.net/es_LA/all.js#xfbml=1";"
but Is it fine?.
Sorry for my english.
error "GET file://connect.facebook.net/es_LA/all.js".
this caused by you accessed your index.html on browser using file:/// protocol instead of http:// or https://.
I put in the script this "js.src = "https://connect.facebook.net/es_LA/all.js#xfbml=1";" but Is it fine?.
You better remove it, for example if a user was visiting your page on http:// the js sdk will called on http://.
The same thing happens for a visitor accessing your site on https:// it will load it https://
I have included a Facebook Like box on a website i am creating and it only shows up when they are logged into facebook. When they have looged out the like box disappears not allowing anyone new to the site being able to see it. I have included all the code facebook tell you to put in but no joy.
Could anyone help me please.
The code i have used:
<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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
HTML code
<div id="fb_like">
<fb:like-box href="https://www.facebook.com/pages/Emma-Nolan-Mobile-Beauty- and-Holistic-Therapy/230397297018772" width="300" height="185" show_faces="true" stream="false" header="false" border_color="#FFFFFF"></fb:like-box>
</div>
The site is not using HTML5 so im using the XFBML. Is this something to do with the Facebook settings itself? This is a business page only.
Ive put the script in the head tag and at the bottom of the page to allow for loading, also placed it straight under the body tag as metioned by Facebook.
Add namespace to the html tag of your document.
<html xmlns:fb="http://ogp.me/ns/fb#">
Add this code directly below the < body > tag. Note: make sure to append the correct app id to the js sdk.
<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=YourAppIdHere";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
there was white space in your fb url for the target page.
<div id="fb_like">
<fb:like-box href="https://www.facebook.com/pages/Emma-Nolan-Mobile-Beauty-and-Holistic-Therapy/230397297018772" width="300" height="185" show_faces="true" stream="false" header="false" border_color="#FFFFFF"></fb:like-box>
</div>
I have also been dealing with this issue. Does the cient/business owner have any country or age restrictions set for their page? When demographic restrictions are set (allowing only visitors from a specific country for example, or excluding visitors from a specific country), the Fb like box will not display for non logged-in users. This is a consequence of setting demograhic restrictions and as far as i know cannot be resolved except by opening up the page and getting rid of all restrictions. Hope this helps. See similar thread here: Facebook Like Box plugin doesn't show up for logged out users; only for logged in users
I think you didn't included javascript sdk in your head tag ,resulting in improper fb like button rendering .
I am to implement social network buttons on some one's website. I am hoping to do it as easily as possible AND futureproof so that the customer doesn't need to add anything when he creates a new page. All his pages are HTML (not PHP) so I can't use any PHP. I was thinking of JS and then using jQuery's .append to make it all nice and easy, but I was wondering whether there is a better way and/or this method has any flaws? Here is the code:
HEAD (scripts):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>$(document).ready(function() {
var currentURL = window.location; //Get the URL, put it in a variable
$('#fb').append('<div class=\"fb-like\" data-href=\"' + currentURL + '\" data-send=\"true\" data-width=\"450\" data-show-faces=\"true\" data-font=\"arial\"></div>');
});</script>
BODY
<body>
<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_GB/all.js#xfbml=1&appId=177213782346727";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb">Test</div>
</body>
Any remarks on that? I don't want to fully implement this and then have to change everything all over again.
Once in a while Google's API Libraries go down for whatever reason.
I think including a fallback method to load jQuery would be welcomed in the head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
For the buttons themselves, animating them with open source jqDock might interest you which is based on JavaScript and jQuery and not CSS3. One of that site's webpages is using a social-plugin from Wordpress that you might want to look at. It shows a method similar to your DIV's and JS but is different for the FB connection scheme. Perhaps a mashup method is in order.
If jqDock is overkill, there's a lot more nifty Social Button plugins and CSS/Animated tutorials to pick from which are direct in what they do.
You can put your fb-like div in #fb, and edit data-href after load :
$("#fb-like").data("href",window.location);