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.
Related
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.
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.
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 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.
When integrating 3 social network buttons (TWEET, +1 and Facebook) Facebook is the only one not picking up the correct data.
When reading the documentation, there appears to be no reason why it should not. It will not pick up the picture of the page in question and instead picks up a user icon and it will not pick up any content.
It should pick up the core content automatically but failing that uses META tags. These too are not helping it.
This appears just after 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_GB/all.js#xfbml=1&appId=250606741665703";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This appears in the HEAD
<meta property="og:title" content="The Belgian Empire" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.robin-knight.com/the-belgian-empire-201112/" />
<meta property="og:image" content="http://www.robin-knight.com/wp-content/uploads/Untitled-11-212x160.jpg" />
<meta property="og:site_name" content="Quite Cheesed Off" />
<meta property="fb:admins" content="597180443" />
And this is the button
You can see an example here:: http://www.robin-knight.com/the-belgian-empire-201112/
Always use the Facebook debugger to find bugs associated with the open graph.
Type the following url into the Facebook debugger (without the slash at the end):
http://www.robin-knight.com/the-belgian-empire-201112
Now you will see that the debugger says:
Object at URL 'http://www.robin-knight.com/the-belgian-empire-201112/' of type 'article' is invalid because it specifies multiple 'og:url' values: http://www.robin-knight.com/the-belgian-empire-201112/, http://www.robin-knight.com/the-belgian-empire-201112/.When you look into your source code you will find two times the og:url meta tag. That's your problem.