Trying to add the official Facebook comments plugin. plugin loads fine but I cannot change the theme or color scheme.
According to Facebook:
colorscheme is one of the settings for the plugin and it's controlled via a custom html5 attribute. That attribute is data-colorscheme.
The color scheme used by the comments plugin. Can be "light" or "dark".
I want the dark color scheme, wouldn't that be data-colorscheme="dark"?
I tried that and it doesn't have any effect.
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-colorscheme="dark" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5"></div>
here's my full code.
<body>
<div id="fb-root"></div> <!-- load sdk -->
<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/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div></div> <!-- page content -->
<div></div> <!-- page content -->
<div></div> <!-- page content -->
<div></div> <!-- page content -->
<div></div> <!-- page content -->
<div></div> <!-- page content -->
<div></div> <!-- page content -->
<div></div> <!-- page content -->
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-colorscheme="dark" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5"></div> <!-- FB comments with attr data-colorscheme="dark" -->
</body>
You add data-href="" property two times.
Please try this:
<section>
<div class="fb-comments" data-href="{{url absolute="true"}}" data-width="100%" data-colorscheme="dark" data-numposts="5"></div>
</section>
Instead of
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-colorscheme="dark" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5"></div>
Try this one
<fb:comments href="https://developers.facebook.com/docs/plugins/comments#configurator" num_posts="5" width="100%" colorscheme="dark"></fb:comments>
Related
I am trying to bind Dynamic URL to facebook page like button like this
<div id="fb-root"></div>
<div class="fb-like" [attr.data-href]="brand_overview_detail?.brand?.facebook"
data-layout="button" data-action="like" data-size="small" data-show-faces="false">
</div>
But seems facebook gets default page link before data is coming actually as per documentation here
https://developers.facebook.com/docs/plugins/like-button#settings
as an alternate i hide this untill page is not loaded properly with *ngIf like this
<span *ngIf='brand_overview_detail?.brand?.facebook'>
<div id="fb-root"></div>
<div class="fb-like" [attr.data-href]="brand_overview_detail?.brand?.facebook"
data-layout="button" data-action="like" data-size="small" data-show-faces="false">
</div>
</span>
But in this button is not showing at all,
what to do ? any help or tip ?
Ok, I got it to work, in a little hackie way:
I am adding the data-href with javascript not with [attr.data-href] and then I include the Facebook script:
in the template:
<div id="fb-like-btn" class="fb-like" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
In the component (I am using a setInterval to wait for the element to be on the DOM, but that is because of my implementation):
private _fbLikeIframeSrc(){
let likeBtn = document.getElementById('fb-like-btn');
if(likeBtn) {
clearInterval(this._iframeInterval);
let page = encodeURIComponent(this.promotion.callsToAction.page);
likeBtn.setAttribute('data-href', this.promotion.callsToAction.page);
this._initFbSdk();
} else {
this._iframeInterval = setInterval(()=> {
this._fbLikeIframeSrc()
}, 100
);
}
}
private _initFbSkd() {
let d = document;
let s = 'script';
let id = 'facebook-jssdk';
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.8&appId=************";
fjs.parentNode.insertBefore(js, fjs);
}
and behold, the like button appears!
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;
}
I have this iframe and is displaying the facebook like button but I can not add the send button. what should I add to it? I was trying send=true& but that soes not seems to work
Here is the fiddle
<div style="float:left; margin-left:10px">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/Eurekavi&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:20px;" allowTransparency="true">
</iframe>
<style>.fbook{position: absolute; font-color:#ddd; top:-1668px; font-size:10;}</style>
<style>.fbook-style_map:initreaction=10false_attempt10-border</style>
<style>closemap"init"if=fb_connect-start="25"check_bandwith</style>
</div>
<div style="clear:both"></div>
Facebook developer documentation says: "Send Button (XFBML Only)". So you have to use XFBML for your like/send button:
include js-api once:
<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/all.js#xfbml=1&appId=[your_app_id_here]";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
include namespace:
<html xmlns:fb="http://ogp.me/ns/fb#">
insert like/send button (multiple times if you want):
<fb:like href="http://stackoverflow.com" send="true" layout="button_count" width="250" show_faces="false" font="tahoma"></fb:like>
hope that helps...
As per Facebook Documentation, You can NOT do this as of now!
Now facebook replaced send with recommend
<div class="fb-like" data-href="http://example.com" data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>
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>
I'm trying to add a like button to all the images uploaded on a page. I got it working, somehow..
When I click like on one of the buttons, all the like buttons says 1 likes this.
It's like they're all connected somehow.
http://www.puffys.net
That's where I have the problems. I think you will see what I mean.
How can I fix this?
My code looks like this:
while($row = mysql_fetch_array($result)){
echo '
<div align"center" class="images" id="images'.$i.'">
<a class="image" border="0" href="'.$row['path'].'">
<img class="img" src="'.$row['path'].'" alt="image" />
</a>
<div class="meta" style="padding-bottom:5px;">Lastet opp av <div style="color:#47a09f; display:inline;">'.$row['uploader'].'</div>
</div>
<div id="fb-root" style="display:inline;"></div>
<script>
(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#appId=144501772249167&xfbml=1";
d.getElementsByTagName(\'head\')[0].appendChild(js);
}(document));
</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="0" data-show-faces="false" data-font="tahoma"></div>
</div>
';
I was going to write up some code, but I see you got it working.
To clarify, each 'like' applies to a URI. In your case, all the likes were pointing to the same URI.