I have view in asp.net mvc3, which has list of products, when user clicks on a product, user goes to another view with product detail, the problem is that the facebook like button is not showing when the page is finish loading. But if I refresh the page, then it displays, where as google plus +1 button is working properly. help plz.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height,user-scalable=no" />
<title>xxxxxxxx</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script>
<link href="/Content/JqueryContent/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="/Content/JqueryContent/jquery.ui.core.js.js" type="text/javascript"></script>
<script src="/Content/JqueryContent/jquery.ui.widget.js.js" type="text/javascript"></script>
<script src="/Content/JqueryContent/jquery.ui.position.js" type="text/javascript"></script>
<script src="/Content/JqueryContent/jquery.ui.autocomplete.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"> </script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<header data-role="header" data-theme="a"><h3>xxxxx</h3></header>
<div data-role="content">
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
<style>.fb_edge_comment_widget {display: none !important; }</style>
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</div>
<footer data-role="footer" data-theme="a" style="font-family:Trebuchet MS;"><h5></h5></footer>
</body>
</html>
You may want to update your FB sdk snippet. I just checked the Facebook Javascript SDK page and it does this:
// Load the SDK Asynchronously
(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));
Notice the new method for inserting the js, insertBefore(). Maybe this will help.
Cheers!
Related
I'm making the app in Angular 2 using Typescript. I've implemented some of the facebook's plugins to the page. Now when I'm loading/reloading the page, they're loading so slow and it takes a while after they completely load. They load in parts... so e.g. Facebook Page plugin shows header first, then the rest of the plugin, and so on... it looks ugly in my opinion. Is there a way I can make some listener and show them after they're completely loaded?
Here is the code (index.html with facebook's javascriptSDK):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BLOG OLIFFFFFFKA</title>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Prompt:300,200' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="http://localhost/OliwkaFinal/back/Images/default/favicon.png">
</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/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=1025977917520637";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<app-root><img class="loading-image" src="http://localhost/OliwkaFinal/back/Images/default/loading.gif"></app-root>
</body>
</html>
and e.g. app.component.ts (which has the Facebook Page plugin):
<router-outlet></router-outlet>
<div id="facebook-page-container" *ngIf="!fanpageClosed">
<a (click)="closeFacebookFanpage()" class="pointer facebook-close-link"><span class="glyphicon glyphicon-remove"></span></a>
<div class="fb-page"
data-href="https://www.facebook.com/oliffffffka/"
data-tabs="timeline"
data-width="250"
data-height="420"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="true"
data-show-facepile="true">
<blockquote cite="https://www.facebook.com/oliffffffka/" class="fb-xfbml-parse-ignore">
Oliffffffka
</blockquote>
</div>
</div>
I was thinking about something like this one:
facebookLoaded = false;
constructor(private _fbService: FacebookService) {}
ngOnInit(){
this._fbService.loaded().subscribe(
response => {
if(response[state] == "loaded") { // OR true or whatever...
this.facebookLoaded = true;
}
}
);
}
and implementing it in HTML with *ngIf="facebookLoaded" on my facebook's plugin tags. Is there a similar way or any way to do this?
Thank you in advance.
From Facebook developer site
var finished_rendering = function() {
console.log("finished rendering plugins");
}
// In your onload handler
FB.Event.subscribe('xfbml.render', finished_rendering);
and the Facebook plugin html have data-attribute for notify the state, see if you can use that also
loading
Rendered
using the above state you may try following css
[fb-xfbml-state="rendered"]{
display:block;
}
[fb-xfbml-state="parsed"]{
display:none;
}
Has anyone the same Problem?
I got the example from https://developers.facebook.com/docs/plugins/save?locale=en_US
After pressing the "Save-Button" i got the success message from facebook but nothing was added. Console displays the following error.
The Error:
POST: Failed to load resource: the server responded with a status of 404 ()
https://www.facebook.com/plugins/save/sentry/?dpr=1
Code:
<html>
<head>
<title>Your Website Title</title>
<meta property="og:url" content="https://www.instagram.com/facebook/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<style>
.fb-save, span, iframe {
width: 200px !important;
height: 50px !important;
}
</style>
</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/de_DE/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-save" data-uri="https://www.instagram.com/facebook/" data-size="large"></div>
</body>
</html>
Okay i found the problem! I missed the App-Id....
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=12345679";
or
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.5'
});
};
I'm trying to displaying content on my website only if people like my Facebook Page.
Unfortunately, I can't get it work... I use edge.create and edge.remove but even if I "Like" the page, it goes through the "edge.remove" function instead of the "edge.create" function...
Here my code :
<!DOCTYPE html>
<html lang="fr" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="DC.Language" content="fr" />
<meta name="DC.Creator" content="Noomia" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="./css/screen.css" media="screen" />
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/scripts.js" type="text/javascript" charset="utf-8"></script>
<title>Concours LTBR</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '118439091595657', // App ID
channelUrl : 'http://cedriccharles.be-webdesigners.com/concoursLTBR/index.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('edge.create', function(href) {
alert('Like');
});
FB.Event.subscribe('edge.remove', function(href) {
alert('Unlike');
});
};
// Load the SDK Asynchronously
(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/fr_FR/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="main">
<fb:like href="https://www.facebook.com/pages/Noomia-studio/100473956669259" send="false" width="960" show_faces="true"></fb:like>
</div>
</body>
I want to create a Facebook login for my website. I used the same code from the Facebook reference. But the login button does displays only as the text "login with Facebook". Can anyone help?
My code is:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '394261217260358',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
login with facebook
<fb:login-button show-faces="false" perms="publish_stream,email,user_location,offline_access" width="200" max-rows="1">login</fb:login-button>
</body>
</html>
Put this line
<fb:login-button show-faces="false" perms="publish_stream,email,user_location,offline_access" width="200" max-rows="1">login</fb:login-button>
above <script> and below <div id="fb-root"></div> and it should work
The following codes works in FF and Chrome, but IE6 does not render the connect button.
What am I missing here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<fb:login-button>Login button</fb:login-button>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init("API_KEY", "/xd_receiver.htm");
});
</script>
</body>
</html>
Seems the problem is with the Maxthon browser and not the straight forward IE6.
Replace the javascript to this one:
<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=261463080590982";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>