So I went through the facebook documentation found here, but my share button still isn't showing up.
I added this directly beneath the body tag in my _layout.cshtml page:
<div id="fb-root"></div>
script
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxxxxxxxxxxxxxx',
status: true,
xfbml: true
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
script
(I removed the less than/greater than around the script tag in order to get the code block to show up on SO)
And I added this to my homepage for testing purposes:
<div class="fb-share-button" data-href="http://myurl.com" data-width="50px" data-type="button_count">Share</div>
I have to add in the text for the div element just to "see" the "Share" text.
Where am I going wrong? I figured adding the facebook widget thing would provide the facebook image/icon and share count, am I wrong?
Ugh, stupid AdBlocker/Avast anti-virus software...
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 cut and paste the code generated by FB into my app as directed.
</head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyId',
xfbml : true,
version : 'v2.5'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-share-button" data-href={{webAddress}} data-layout="button_count"></div>
<div class="fb-comments" data-href={{webAddress}} data-numposts="10"></div>
I tried putting the JS in the head as well as in different parts of my index.html but the share button and comments would appear without an additional refresh.
I had a similar problem with my LinkedIn button not showing up until after a refresh and I switched
<script src="https://platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
to
<script>
delete IN;
$.getScript("https://platform.linkedin.com/in.js")
</script>
and the problem is solved. Would a similar thing work for FB? If so how do I implement it?
I looked at this post, http://stackoverflow.com/questions/29133563/facebook-social-plug-in-not-showing-up-when-added-dynamically
focused on FB.XFBML.parse() but given the info on
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
I don't know how to implement it and I don't think it's what will fix my problem because no information is coming from my server.
The code generated from the Twitter and FB share buttons belongs in the index.js file at the top of the <body> in an Angular Fullstack application. Then in the appropriate controller.js file put:
angular.element(document).ready(function() {
twttr.widgets.load();
FB.XFBML.parse();
});
I have django app and I need to show the number of followers of its facebook page.
In my base.html I have hardcoded the number of FB followers, but this is not a feasible longterm solution.
I've been experimenting with inline javascript, and this is the state of my code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'NumOfMyId',
xfbml : true,
version : 'v2.4'
});
FB.api(
'/MyWebSite',
'GET',
{"fields":"likes"},
function(response) {
console.log(response);
//here should go something so that the number of people liking the page gets appended to an html element by id;
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I need the facebook api to give me the number of followers, which is not a problem in the graph api explorer, but I have no clue how to accomplish it in my tag.
Any example/advice or redirecting to similar solved questions/issues/github project would be super appreciated!
~good vibes to y'all
If you're using jQuery on your page, you can do something like this:
<p>The total number of likes in my page is <span id="number-of-likes"></span>.</p>
function(response) {
console.log(response);
$('#number-of-liles').html(response.NUMBER_OF_LIKES_FIELD);
});
Where response.NUMBER_OF_LIKES_FIELD is the correct field name that has the number of likes.
This may be a dumb question but i'm not such a hacker (yet! hehehe)...
I have successfully developed a Facebook App to display my website in a Facebook tab inserting the following code right after the "body" tag to an HTML site:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID_NUMBER',
xfbml : true,
version : 'v2.4'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
You can see it here: https://www.facebook.com/jogojogomx/app_1096645967031976
You can see the original HTML site at jogojogo.mx
BUT NOW, I want to do the same with a Wordpress themed website. I have tried to put it in different .php files of the theme with no success...
See this link: https://www.facebook.com/Cochinita.YUKTK/app_1024054777627795
Can anyone help?
Thanks in advance!
So today I found this awesome piece of code that instantly made my website faster. Actually, any link clicked became almost instant. It's called InstaClick (http://instantclick.io/). I installed it and everything worked great ..except that Facebook Like and Twitter Tweet buttons suddenly didn't show up anymore.
I searched their documentation on http://instantclick.io/scripts for a solution and found out it might be possible by changing the .on('change') code. But the problem is, the Facebook script:
<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&appId=XXXXXXXXXXXXXXX&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and the Twitter script:
<script type="text/javascript">
window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src= "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
don't seem to use these codes to initiate it. Has anyone found a way to get this working? InstantClick seems like a wonderful way to speed up websites and if it worked with Twitter and Facebook it might just revolutionize the way the internet works.
UPDATE #1:
I found out how to fix Twitter by including it like this:
<script type="text/javascript" async defer src="//platform.twitter.com/widgets.js"></script>
But including Facebook sdk.js the same way doesn't work. Any ideas?
UPDATE #2:
Just a thought, maybe a fix would be to check if Facebook or Twitter .js are loaded and if not, load them again?