Say I have a blogging site http://www.example.com using custom cms, and I want each content in the site to display a like button. I have been able to add a mod that inserts code snippets in each page, incliding the like code, but how do I go about differentiating the likes from each different post because as I recall, the facebook like code requires a src="http://www.example.com", how do I make the src value unique for each page like src="http://www.example.com/news/a_news.php". How do I achieve this...?
refer below URL to generate like button for your page.
http://developers.facebook.com/docs/reference/plugins/like/
Once you are done with settings get Code (SDK script + button code) which looks like below.
like button code for URL http://www.site.com/news/a_news.php
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.site.com/news/a_news.php" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
now you have to dynamically set up like button code for each link.
say for b_news.php button will be
<div class="fb-like" data-href="http://www.site.com/news/b_news.php" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
for c_news.php button will be
<div class="fb-like" data-href="http://www.site.com/news/c_news.php" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
you just have to change data-href= in like button and all set.
Related
I've included a like box plugin in my page:
<div class="fb-like" id="fb" data-href="http://www.lorem.com" data-send="false"
data-layout="button_count" data-width="60" data-show-faces="true"></div>
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
after click 'Like' and posted to the facebook's wall, I see that the image is weird, I mean i see it is only a small piece of my site's logo. That image on the wall looks like this
what shall I do to make that image to be looking good ?
The answer was, the minimum size of the image should be 200x200, mine was 330x40. And also, the image url should be placed in the og:image meta tag
I get the like button code from https://developers.facebook.com/docs/reference/plugins/like/, and on my page, the like button is rendered correctly...at least it looks like so :P
But when I click on the like button, the comment dialog appear and disappear immediately, and the button becomes a Confirm link; then I click on the like, a popup window ask me to confirm to like it...then, when I back to my page, I can see the comment dialog. But whatever I input, after I clicked on the Post button, the dialog will not close.
In my Chrome console, I see when I click on the Post button, a request is make to https://www.facebook.com/plugins/like/comment, and the return result is:
for (;;);{"__ar":1,"payload":null}
I compared this behavior on other sites, and it is clear the return is different. But I have no idea why.
Usually that problem can be fixed by using an app id in the init code:
<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=xxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
That´s Facebooks spam protection...
actually what luschn is right. you should create appID. facebook needs to count the LIKES when one clicks on it. you know, it's so simple. perhaps there's something you need to grab from the button :p
Try this stuff:
<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=null";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<span class="fb-like" data-href="https://www.facebook.com/fb-name" data-layout="button" data-action="like"></span>
appID set into null. This works, but it's spamming. This is just for experiments only.
Here's the sample page:
http://developer.appacyber.net/feed/test.php
It also works on localhost :D
I put the facebook like button code as suggested by facebook developer documentation.
<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=416733691671772";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.domain.com/" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-action="recommend" data-colorscheme="dark" data-font="arial"></div>
Strange thing is that, the code of facebook like button is there when I inspect element in firefox and chrome. And its showing on my localhost as well..
To debug problems with the 'Like' button, always use the Facebook debug tool: http://developers.facebook.com/tools/debug
I am unable to comment on a previous topic: Facebook Like-Button - hide count?
So I am posting a new question:
What is the optimum method to hide the facebook like count when using the new method of placing the script and div as shown here? :
namespace
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
markup
<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=APP ID NUMBER";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
with
<div class="fb-like" data-href="http://domain.com" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial"></div>
Since many of the previous solutions use a div and overflow hidden to obscure the count, I'm also interested to know how hiding the count might be achieved taking into account any language localisations for the word "like", such that the word like in a given language is not obscured.
I have copied and inserted the Facebook-Like codes into my Webpage (Kompozer) and nothing happens. There is no like button only a blank space where the first code should be.
Why is this happening?
Thank you for your help and replies.
Make sure the following code is right below the opening body tag:
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then place the following where you want the like button to display:
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
If this doesn't work, please show us your code. Also look in javascript console for errors.
Unfortunately kompozer do this kind of thing. So, the way to insert the facebook codes into your html document is when finished, using a text editor like gedit or notepad.