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;
}
Related
None of our games is playable from Firefox on some computers. Until yesterday, we didn't have the chance to reproduce the error, but now we can on two of our office computers. As a test, this is the link of one of our games which won't load (https://apps.facebook.com/magicquesttcg/)
The only setup where we have been able to reproduce the issue is the following:
OS: Windows 10 (64 bits)
Browser: Mozilla Firefox v58.0 (https://ftp.mozilla.org/pub/firefox/releases/58.0/win64/en-US/)
Flash Version installed: v28.0 (latest). We have tried with several flash versions, all of them have the same impact.
When loading the website it will display the "You don't have Flash installed message" (even if it's installed)
We are embedding the swf the simplest way possible, but we have also tried it using swfObject, nothing. It just won't work.
I hope you can help us!
Here's the index.html we are currently using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en" xml:lang="en">
<head>
<script type="text/javascript">
var v = "\?v=1.5.4.028"
var platform="fb";
<!-- #return whether the current platform is Facebook or not -->
function isFacebook(){return platform == "fb";}
</script>
<!-- Add FACEBOOK Script (Conditionally) -->
<script type="text/javascript">
if(isFacebook())
{
(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>
<title>Magic Quest: TCG</title>
<meta name="google" value="notranslate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center;
background-color: #000000; }
object:focus { outline:none; }
#flashContent { display:none; box-shadow:0px 0px 60px black;}
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css"/>
<script type="text/javascript" src="history/history.js"></script>
<!-- END Browser History required section -->
<!-- Include support librarys first -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var cssStyle = (isFacebook()) ? "display:block;text-align:left;box-shadow:0px 0px 60px;" : "display:block;text-align:left;";
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "18.0.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = (isFacebook()) ? {} : kongregateAPI.flashVarsObject();
var params = {};
params.quality = "high";
params.bgcolor = "#000000";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.allowFullScreenInteractive = "true";
params.wmode = "direct";
var attributes = {};
attributes.id = "FSPreloader";
attributes.name = "FSPreloader";
attributes.align = "middle";
attributes.type = "application/x-shockwave-flash";
swfobject.embedSWF(
"FSPreloader.swf" + v, "flashContent",
"800", "600",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", cssStyle);
</script>
<style media="screen" type="text/css">#flashContent {box-shadow:0px 0px 60px black} </style>
</head>
<body id="body">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXXXXX',
xfbml : true,
version : 'v2.11'
});
// ADD ADDITIONAL FACEBOOK CODE HERE
};
(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>
<center>
<div style="box-shadow:0px 0px 60px; -moz-box-shadow: 0px 0px 60px; -webkit-box-shadow: 0px 0px 60px; width:800px;">
<div id="flashContent">
<p style="background-color:black;">
<font color="red">
<b> To view this page ensure that Adobe Flash Player version
18.0.0 or greater is installed. Make sure to install it by downloading it from <strong>here</strong>
(Right click and Select "Open link on new tab" if single click does not work). If after installing doesn't work, make sure to "Activate always" Flash extension on your browser and untick the "Block Dangerous and intrusive Flash Content".
</b>
</font>
</p>
Get Flash
</div>
</div>
</center>
</body>
</html>
Thanks beforehand
Pasting here a link to the solution we found in case anyone has the same issue:
https://support.mozilla.org/en-US/questions/1202849#answer-1073221
I'm trying to display the like + send button on a test page. The code i'm using to display the button is:
<fb:like href="http://developers.facebook.com/docs/reference/plugins/like" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
You can see that i have specified "layout=button_count" and "send=true" parameters. However only the like button is showed on IE8 (other browsers works fine) and not with the "button_count" layout but with the "standard" layout.
Do you have any clue?
Here is the full html+sdk+fbml code you can paste in your testpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<meta name="DESCRIPTION" content="Just a test page" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</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/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="http://developers.facebook.com/docs/reference/plugins/like" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
</body>
</html>
It seems to me that it's a Facebook bug.
I've posted it here: https://developers.facebook.com/bugs/216063688545697.
I have the typical HTML5 implementation of the Facebook recommend button:
<div id="fb-root"></div>
<script type="javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
<? if ( $current_language == 'en' ): ?>
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
<? else: ?>
js.src = "//connect.facebook.net/fr_CA/all.js#xfbml=1";
<? endif; ?>
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<div class="share_button facebook" id="facebook">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false" data-action="recommend"></div>
</div>
The first time I click it, the popup preview box does not display the Title or Description. I have the following info at the top of the page:
Test
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="description" content="Test website." />
<meta name="keywords" content="test whatever" />
<meta property="og:title" name="Show this!" content="Show this!" />
If I leave the page, unrecommend the page from Facebook and return to the same page and press Recommend again, the title and description then appear. The page shows one of thousands of db entries so the problem needs to be fixed. I have tried putting the js function in jQuery(document).ready(function() - no luck. I tried moving it to the bottom of the page - no luck. Can someone help me?
From the example you gave, you are missing some required OG tags such as URL and image. Also, do you have the prefix info on your head tag?
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# myspecialapp: http://ogp.me/ns/fb/myspecialapp#">
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!
I've almost successfully integrated facebook comments in my application, but there are some problems that I don't know how to resolve.
The problem is that the button/div "View More X" comments and the superior bar (where we can select the order by) do not appear.
You can see in this link:
http://saxbox.keep.pt/community/#id/5
There are 6 or 7 comments, the plugin has a maximum of 5 comments but the button view more doesn't appear.
Any suggestions?
I've created a HTML file to test the Facebook plugin with the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <!--xmlns:fb="http://ogp.me/ns/fb#">-->
<head>
</head>
<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/pt_PT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://saxbox.keep.pt/community/" data-num-posts="2" data-width="470"></div>
</html>
Even with this simple HTML I didn't get the view more button. There is any bug with the plugin? or I'm doing something wrong?
When facebook tries to lint the page there might be a problem.
It could be something to do with the hash tag in the url. Is there a way to convert over to a querystring instead?
When I first went to that page in a clean browser, I did not get to the id 5 page, but was redirected to some homepage. I then had to retype the #id/5 to get to the real page...Facebook is probably running into the same situation.
EDIT
Ok, I tried again and facebook still sees wrong information:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fsaxbox.keep.pt%2Fcommunity%2F%23id%2F5
And if you follow this link: http://developers.facebook.com/tools/debug/og/echo?q=http%3A%2F%2Fsaxbox.keep.pt%2Fcommunity%2F%23id%2F5
This is what your server responds with: Notice there are no og meta tags and there's no comment plugin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration--><!-- above set at the top of the file will set --><!-- the browser's rendering engine into --><!-- "Quirks Mode". Replacing this declaration --><!-- with a "Standards Mode" doctype is supported, --><!-- but may lead to some differences in layout. --><html>
<!-- xmlns:fb="http://ogp.me/ns/fb#">--><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Default locale --><meta name="gwt:property" content="locale=pt_PT">
<!-- --><!-- Consider inlining CSS to reduce the number of requested files --><!-- --><!--<link type="text/css" rel="stylesheet" href="WebCommunityClient.css">--><title>weebox community</title>
<!-- --><!-- This script loads your compiled module. --><!-- If you add any GWT meta tags, they must --><!-- be added before this line. --><!-- --><script type="text/javascript" language="javascript" src="webcommunityclient/webcommunityclient.nocache.js"></script><link rel="alternate" type="application/rss+xml" title="RSS" href="rss">
<meta name="title" content="weebox community">
<meta name="description" content="weebox community">
<link rel="image_src" href="logo.png">
</head>
<!-- --><!-- The body can have arbitrary html, or --><!-- you can leave the body empty if you want --><!-- to create a completely dynamic UI. --><!-- --><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/pt_PT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><!-- OPTIONAL: include this if you want history support --><iframe src="javascript:''" id="__gwt_historyFrame" tabindex="-1" style="position: absolute; width: 0; height: 0; border: 0"></iframe>
<div id="loading" style="height: 99%;"><img src="loading.gif" alt="Loading..." style="position: relative; top: 50%; left: 50%; margin-top: -27px; margin-left: -27px;"></div>
<div id="main"></div>
</body>
</html>