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.
Related
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>
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've added the Facebook Like button to this site in wordpress:
http://www.likemaca.com/
However, the like button is still in english, even though it is the danish language code I added to the header:
<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/da_DK/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Any help appriciated
I viewed your blog source code to check if you added the like using iframe or <div class="fb-like">, My predictions were right, you added the like-button using iframe without adding/sending the parameter locale=da_DK to your iframe src
Basically you have two solutions
Stick with the iframe method and add locale=da_DK as below
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FAnchers-Gulvservice-AS%2F309501119143959%3Ffref%3Dts&width&layout=box_count&action=like&show_faces=false&share=false&height=65&locale=da_DK" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowTransparency="true"></iframe>
Notice the last parameter, In this case you won't need the Facebook-JS
Replace iframe with <div class="fb-like">:
<div class="fb-like" data-href="https://www.facebook.com/pages/Anchers-Gulvservice-AS/309501119143959" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
Here you will need the Facebook-JS
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 had a page with a simple Facebook like button and I needed to know when the user liked the page so I used the edge.create event to do this which all worked fine. I now need to add a like Box plugin to the page to like the client's facebook page and again I need to be notified when someone clicks the like button. However, the subscribe event never fires. Any idea what might be the problem? I am using the xfbml code to add the like box.
It appears to be a bug. Here's a link to official credible sources:
http://developers.facebook.com/bugs/310763168934515
And my jsFiddle here to demonstrate: http://jsfiddle.net/dmcs/3D2GD/1/
EDIT
I've found the solution!
First I put my code onto my own domain rather than jsFiddle to do better testing, however my first try failed as if the code was still on jsFiddle. So I troubleshot the situation further.
Then for the app setting I specified I went in and specified the WebSite url on https://developers.facebook.com/apps/{APP_ID}/summary
Here's my code
<html>
<head>
<title>Like Box example</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '{APP_ID}'
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; //js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId={APP_ID}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like-box" data-href="http://www.facebook.com/Cocacola" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</body>
</html>
just need to replace code:
<div class="fb-like-box" data-href="http://www.facebook.com/jsfiddle"
data-width="292" data-show-faces="true" data-stream="false" data-header="true">
with this one :
<fb:like-box href="http://www.facebook.com/jsfiddle"
colorscheme="light" show_faces="false" header="false" stream="false"
show_border="false"></fb:like-box>
and it works ok.