I want to use the like facebook button in my website which is a static website ,when I add the script to the page it didn't appear when I open the page without the wamp server
but when I add the share button of twitter it work even without wampserver why? where is the problem?
script for facebook:
<div class="fb-like" data-href="http://www.mywebsite" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
script for twitter
<a class="twitter-share-button" data-lang="en" data-url="http://mywebsite/">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
to render the facebook like button facebook will crawl into website and check if the URL provided is a valid web url. if the URL has 'localhost' mentioned then the like button will not display. you can also check if your site url has valid scrape by pasting your site URL in the below facebook developers page,
http://developers.facebook.com/tools/debug/og/object
map your ip from localhost to your domain name and it will render the like button
Related
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
I know this is supposed to be easy task and I have tried code from the developer sites of twitter and facebook as well but any of those code won't work.
I also tried from some other sites as well.
I have to put facebook/twitter share buttons in my webpage.Both the codes from the developer site are not working when I check then on XAMPP .
<html>
<head> Vamos </head>
<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_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/"></div>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>
In above code in Chrome browser nothing except the head element gets displayed.
Could you please find what am I doind wrong and what should I do ?
I tried using XFBML (Add an XML namespace to the tag of your document.) but nothing worked for me.
Florentino, I tested the Facebook social plugin on my server and it's working as expected. Same issue as the one described in this thread.
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 have a website which is integrated with facebook like-box, it is working fine (please check the code below)
script after body
<body>
<div id="fb-root"></div>
<script type="text/javascript">
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
inside sidebar
<div class="fb-like-box" data-href="http://www.facebook.com/javatips.net" data-width="304" data-show-faces="true" data-stream="false" data-header="false"></div>
The problem is some networks proxy enabled and this will block facebook like-box and showing "page not found" message. In order to remove this message, I need to check whether like-box (Facebook SDK) is loaded properly or not, fb-like-box div should shown only if like-box (Facebook SDK) is loaded properly
Any idea will be appreciated.
Hide elements with class .fb-like-box through your stylesheet, and make them visible again in the fbAsyncInit event that the SDK fires.