I have added the Facebook Send button to my website and it does not display. Has Facebook turned off the Send feature?
Here is the page in question.
The documentation for the Facebook Share widget is here.
Below is the code for the html page
<html>
<head>
<title>Your Website Title</title>
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="https://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12&appId=299539706821986&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your send button code -->
<div class="fb-send"
data-href="https://compesh.com/test2.html"
data-layout="button_count">
</div>
<div class="fb-send" data-href="https://compesh.com"></div>
</body>
</html>
According to https://developers.facebook.com/docs/plugins/send-button
With the release of Graph API version 2.11, the Send Button is
deprecated. For Graph API versions 2.10 and under, the Send Button
will be supported until February 5, 2018.
Related
I have added a facebook share button to my app and it appears correctly o the page. I have used the following code:
https://developers.facebook.com/docs/plugins/share-button/
When I click the button it a popup appears with the correct content and I can click "Post to facebook"
When I do the item appears in my feed perfectly but nobody else can see it even though the privacy settings are correct.
Any ideas... ?
<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<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/sdk.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="http://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>
</html>
Things to consider:
Is the privacy set to "friends" or even "public" in the share popup?
Is your App public? Set it public in the "App Review" section.
Make sure your friends actually go to your user profile to check out the posting, it may just not show up in their stream.
How can I have a button on my webpage that shares the link the user is viewing automatically to his or her facebook timeline?
For eg if he or she is in mypage.com/aboutme then the link will be shared on his or her facebook timeline when clicked...
That is not possible without user prior Facebook authentication.
If you get theat beforehands, then
<div id="fb-root"></div>
<script type="text/javascript">(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>
Also, make sure you control the og:meta properties in the HTML head
<meta property="og:image" content="http://www.mysite.me/my.png" />
<meta property="og:description" content="mycontent..." />
<meta property="og:title" content="blueflower"/>
<meta property="og:type" content="article"/>
<meta property="og:site_name" content="mysite.me"/>
<meta property="og:url" content="http://www.mysite.me"/>
Best
I figured out how to do it.
This can be done using http://www.addthis.com/ generated code.
I seem to be missing something very important in implementing Facebook like buttons to my article based website.
Everything seems to be configured correctly according to the Facebook debugger. But when I actually try to "like" a post, the true url get's replaced with the facebook url. For example, I am liking a post http://www.mysite.com/post/1 , for some reason mysite is being replaced with "facebook", so I end of liking http://www.facebook.com/post/1 . That is how it is showing up both when you hit the like in the modal and on my facebook wall.
Here are my tags
<meta property="og:title" content="My Site"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php echo "http://www.mysite.com/posts/{$post->id}" ?>"/>
<meta property="og:image" content="http://www.mysite.com/media/logo.png"/>
<meta property="og:site_name" content="My Site"/>
<meta property="fb:admins" content="XXXXXXXX"/>
<meta property="fb:app_id" content="XXXXXXXXXXXXXXX"/>
<meta property="og:description" content="<?php echo text::limit_words($post->content, 20, '...'); ?>"/>
All the urls are showing correct in the Linter, so I can't figure this out.
Thanks
Is there a relative URL in the data-href="URL" in your actual LIKE button code in the page? e.g. I use the facebook like button code as follows, using the og tags set up like you have above:
<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="<?php echo "http://www.mysite.com/posts/{$post->id}" ?>"> data-send="false" data-count="false" data-layout="button_count" data-width="47" data-show-faces="false"></div>
i have this facebook page: LINK
And i want to implement multiple facebook like button on product page on site: LINK
When i click on "Like" Buttom, this aways shows "1" and when refresh the page, this count disapear.
for my product page i use:
<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_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and for buttons:
<div class="fb-like" data-href="http://www.calcadosabruzzo.com.br/2012/catalogo/1402.html" data-send="false" data-layout="button_count" data-width="85" data-show-faces="false" data-font="segoe ui"></div>
for each phantom pages for the products i use these meta tags:
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/">
<head>
<title>Calçados Abruzzo - Ref.: 1402</title>
<meta property="og:title" content="Calçados Abruzzo - Ref.: 1402" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://www.calcadosabruzzo.com.br/" />
<meta property="og:image" content="http://www.calcadosabruzzo.com.br/2012/produtos/1402_5122_Marrom_montila.jpg" />
<meta property="og:site_name" content="Calçados Abruzzo" />
<meta property="fb:app_id" content="100002115061810" />
<meta http-equiv="refresh" content="0;url=http://www.calcadosabruzzo.com.br/2012/catalogo.html">
</head><body></body></html>
i dont know where to get the APP_IP becouse the client make his page on facebook and dont make an APP
when i put the product page on Facebook Debug, show me these errors: LINK
How to solve this? Its the first time i use this Plugin...
I managed to find few reports on this behaviour. I seems Facebook introduced a bug because even their reference where you can create like button gives errors. What people suggested is to make an app through developers.facebook.com/apps
Get the app_id from there and in the app settings under App Domain add your website (calcadosabruzzo.com.br).
For fb:admins you should add the app admin id (probably yours).
Hope this helps.
I am trying to test on a private development server, and I can't use the linter to test why opengraph isn't being picked up on the share. I can set up an app id for the dev server and share the link, however none of the opengraph data is being picked up.
My code is:
<meta http-equiv="X-UA-Compatible" contant="IE=edge" />
<meta property="og:title" content="my title" />
<meta property="og:type" content="Park" />
<meta property="og:url" content="http:<%=cdnHost%>/my_domain" /> <!--ignoring parameters in url -->
<meta property="og:site_name" content="my site name"/>
<meta property="og:description" content="my description" />
<meta property="fb:app_id" content="xxxxxxxxxxxx"/>
<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=xxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="http:<%=cdnHost%>/my_directory"
send="true" layout="button_count" width="100" show_faces="false">
</fb:like>
The og data is not getting picked up because the linter has no access to read that data. You will need to punch a hole thru your firewall and setup DNS appropriately so Facebook can lint your URL. Otherwise, you'll have to tell you QA team that it wont work behind the firewall and explain to them about Facebook's requirement that the URL be publicly accessible.