i have website news (single page application ) this code woks well in aspx page
<div id="fb-root">
</div>
<script language="javascript" 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_GB/all.js#xfbml=1&appId=1403512256546141";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" style="width: 670px; float: left;" data-href="http://www.facebook.com/share.php?u=http://www.game11.com/%23/newsdetail/24" data-width="670" data-num-posts="10" dir="rtl" lang="aa">
</div>
but how to do in View in SPA which doesn't contain html or body tags just div i use durandal in single page application
Late answer, but maybe it will help someone. For me the key to getting unique fb comments to render on a single page application was FB.XFBML.parse();
Each time I want to render unique comments:
Change the url, each fb comments thread is assigned to the specific url So I might have www.someurl.com/#123, www.someurl.com/#456, www.someurl.com/#789, each with its own fb comment thread. In AngularJs this can be done with $location.hash('123');
Create a new fb-comments div, where 'number' equals '123', '456' or '789'
<div class="fb-comments" data-href="http://someurl.com/#{{number}}" data-numposts="5" data-width="100%" data-colorscheme="light"> </div>
Call a function that executes the fb SDK
function FBfun(path) { setTimeout(function() { // I'm executing this just slightly after step 2 completes window.fbAsyncInit = function() { FB.init({ appId : '123456789123', xfbml : true, version : 'v2.2' }); }; (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')); FB.XFBML.parse(); // This is key for all this to work! }, 100); }
i added the script to app.js like
initializeFB: function () {
if (!isFBInitialized.isInitialized) {
FB.init({
appId: 'xxxxxxxxxxxx',
appSecret: 'xxxxxxxxxxxxxxx',
// App ID from the app dashboard
channelUrl: '//mysite//channel.html', // Channel file for x-domain comms
status: true, // Check Facebook Login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // Look for social XFBML plugins on the page to be parsed
});
(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'));
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any auth related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function (response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testFBAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct user interaction (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
isFBInitialized.isInitialized = true;
}
},
and call it in viewattached as
app.initializeFB();
then it works well
Step 3 for my React app become (more linter friendly):
componentDidMount() {
window.fbAsyncInit = () => {
window.FB.init({
appId: '572831199822299',
xfbml: true,
version: 'v4.0',
});
};
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
const js = d.createElement(s);
js.id = id;
js.src = '//connect.facebook.net/ru_RU/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
setTimeout(() => {
window.FB.XFBML.parse();
}, 100);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.