I have a question, how to put like button" on the application on facebook example:
<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/all.js#xfbml=1&appId=94784739294";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/teste?sk=app_09090909" data-send="true" data-width="450" data-show-faces="true"></div>
If you use this form http://www.facebook.com/teste?sk=app_09090909 this brings me to http://www.facebook.com/teste. Why ?
facebook gives three options, i tried the third one ,used an i-frame and worked for me easily..
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fapps.facebook.com%2FYOURAPPNAME%2F&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80&appId=XXX" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
It seems like the like button doesn't care about page's variables after the "?".
The hack I found is to use a data-href with another URL you own, and redirect it to your real app URL.
I don't like this so much, why facebook does not allow to like pages?
It's actually related to fact that page you're trying to like is Facebook Page (and the parameters you pass just indicate that Page Tab application should be displayed instead of default view).
Linter doesn't even try to fetch OpenGraph tags from your application. Once linter visit that page it'll discover that og:url for that page still pointing to the Facebook Page and not to your Application running in Page Tab, and this seems OK (you application doesn't own that page but Facebook Page does)...
The solution is to create intermediate page that will hold desired OpenGraph tags and doing client-side redirect to final page. URL of that page should be used for Like Button social plugin to provide correct details in stories published by liking but still drive users to correct final page.
Related
I would like to find out whether this will be possible.
I have added a Facebook like button to my Website, and I have a Facebook page.
But when you view the website, you see 0 likes but on the facebook page its more than 20 likes.
I want to know whether it will be possible to link the two, the facebook page and the website so they both show the same amount of likes?
Like if its shows 20 likes on the facebook page, then it should show 20 likes on the website?
Any help will be highly appreciated!
Thanks
If you previously pasted in your head section the fb script looking like this:
<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&appId= your app ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Paste the following code where you want your like button: (insert your fb page link before saving it).
<div class="fb-like" style="float:right; height:18; vertical-align:middle" data-href="https/www. your fb page link " data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="tahoma">
I think the linking happens automatically if you have added the URL of your website in the Facebook page.
Ref:https://developers.facebook.com/docs/reference/plugins/like/
As per above link, specify the URL of your Facebook page in the href parameter of the like button.
I have the javascript code with the fb-root div installed right after my <body> tag.
There's a like button in the header of my website to like the website.
But there's more buttons on the website, for every article. Sometimes there's more than one on the same page.
So following facebook's docs instructions I added a data-href="" attribute to my fb-like tag. Didn't worked. Then I added a ref="" attribute with the article's slug inside it. Thought it would help.
The button with both data-href and ref attributes shows the same amount of likes as the website header's one. And when I click on them they both like the same url, not the url I specified in data-href. Any button ALWAYS uses data from the opengraph tags and completely ignores what I specify in the tag. (Which should be the opposite)
So the question is: Is there a way to bypass OG tags and force the URL from data-href to be used for a button? (It should work that way but I totally ignore why it doesn't).
Here's the code I use:
Right after :
<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&appId=MY_API_KEY>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then in the header:
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial" data-colorscheme="light"></div>
And then in an article:
<div class="fb-like" data-href="URL_OF_THE_ARTICLE" data-send="false" data-layout="button_count" data-width="175" data-show-faces="false" data-font="arial" data-colorscheme="light"></div>
I tried using both fb: and div tags by the way. This should be really simple, as it has been for Twitter and Google+.
Anyone has an idea of what's wrong with that?
Thanks!
The like button's data-href param should point to the URL of the content you want to like/share -
That URL should contain the meta tags telling facebook what title, etc to display and return these tags to Facebook's crawler
You can see what facebook detects at that url with Facebook's Debug Tool - double-check you're not redirecting the crawler by changing the og:url tag, using a canonical meta tag, etc
I have created a page "Education For All" in facebook. In my website i want to provide a like button to like this page not the url and also want to show the count of the Likes received for that page in website along with Like button. I have used "Add this", but it is showing the count of number of likes for the url. Can you suggest me any plugin ?
Any help will be appreciated...
generate your facebook like button from here,
http://developers.facebook.com/docs/reference/plugins/like/
Please provide proper informations to get the proper code, or you can use the code below by following the instructions, just replace http://www.yoururl.com with the desired URL of the page which needs to be liked:-
1. Include the JavaScript SDK on your page once, ideally right after the opening 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>
Place the code for your plugin wherever you want the plugin to appear on your page.
<div class="fb-like" data-href="http://www.yoururl.com" data-send="true" data-width="450" data-show-faces="true"></div>
Have you already tried to generate the like button through https://developers.facebook.com/docs/reference/plugins/like/ ?
It gives you this code for example:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fedforall&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35&appId=225116190942635" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
I am trying to load the Facebook like box on my webiste and when I go to get my code, I get a message that says "this content can not be displayed, To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame."
<div class="fb-like-box" data-href="facebook.com/pages/Cohen-Nutrition/…; data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2??Fpages%2FCohen-Nutrition%2F153878864726298%3Fref%3Dtn_tnmn%23%21%2Fpages%2FCohen-Nutrition%2F153878864726298%3Fsk%3Dwall&width=292&height=290&colorsc??heme=light&show_faces=true&border_color&stream=false&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe>
I then put the code into my website widget and I get the same message mentioned above on my website where the Facebook like box should be.
Please help, I have no idea what to do and how to change this!
I ran into this problem as well. In my case, I was testing a static HTML page, and I was loading it in my browser with file://. I spent a while trying to figure this out, and before I uploaded my file, I tried deploying it as part of a service on http:// localhost (no space, that was just to let the post get through). Then it started working. I guess there's some logic that makes this fail when not behind a server. I hope this helps.
Try using HTML5 version of the code and follow the instructions. Also important is the APP ID.
<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&appId=<YOUR_APP_ID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="..." data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
I just had a weird problem with a client's facebook page. The script didn't run and it didn't give any reasons. After looking in the my client's facebook page settings, I noticed he had an extra option saying "18+ yrs old" because he was selling massage oil. And because of that, the facebook box never shows on the website unless you're logged in and 18+.
Hope this can help you
I have recently implemented the Facebook Like Button
I have chosen some settings (for the HTML5 implementation) and facebook gave me the following 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/en_US/all.js#xfbml=1&appId=*my-app-id*";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and
<div class="fb-like"
data-href="*http://my-domain.com/page/uri*"
data-send="false"
data-layout="button_count"
data-width="50"
data-show-faces="false"
></div>
I have implemented this code on my public website.
When I click the button it changes the button to the "liked" state and shows a dialog that I can use to post to my wall.
The wallpost works fine (and Facebook manages to extract the Open Graph meta tags from the page like image, title, url and so on...) when I refresh the page, the buttons shows up as one like, but when I visit the same url with another browser and facebook account the like button indicates that the page is not liked by anyone.
If I then check my https://graph.facebook.com/me/likes in Graph API Explorer the like does not show up in the list.
I have also tried to use Facebook's Debugger to make Facebook refresh the data for the url as I found on http://www.allwebmaster.com/2011/07/fix-facebook-like-button-not-working/ but that did not seem to help.
So the wallpost works but the like does not, why is that? What can I do to make it work?
Update: now I have a few likes on some of the pages but it does not correspond to the number of accounts that has liked that url...