JSFIDDLE
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://www.google.com&p[images][0]=http://www.hdwallpapers3g.com/wp-content/uploads/2014/01/Audi-A1.jpg&p[title]=Sharing%20custom%20title&p[summary]=Custom%20text%20description">Share on Facebook</a>
When posted on Facebook, why won't the custom title,description and image work? It just automatically takes that from the link and ignore custom settings when posted on FB.
Is there any other working JS/Jquery solution for this perhaps?
The only way to force overwriting og meta tags is by using FB.ui with feed method which requires an app id and limits a lot of features like ability to choose post to friend's timeline, group or a fan page you administrate, however, I recommend using Open Graph as the best solution tags!
HTML
<div class="container">
<a id="shareOnFB" class="shareBtn">Share on Facebook</a>
</div>
JS
window.fbAsyncInit = function () {
FB.init({
appId: 'XXXXXXXXXX', // Your App ID
status: false,
xfbml: false,
logging: false
});
$('#shareOnFB').on('click', function (e) {
e.preventDefault();
FB.ui({
method: 'feed',
name: 'Retrogram',
link: 'https://www.facebook.com/Retrogram',
picture: 'http://i.imgur.com/SKwsQM2.png'
});
});
};
Fiddle
Related
Can somebody explain why my custom Facebook share button does not work?
Whenever I click the button it the share window just does not show up.
I've tried it as html file on an actual webserver, and I've read everything in the facebook docs regarding the share button.
When using the same code provided by facebook it does work.
I do get this error though when clicking on the button.
This is my code. (Without the CSS because its a bit more, If you need it I can add it.)
<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1"></script>
<div class="page-header">
<h1>Share Dialog</h1>
</div>
<p>Click the button below to trigger a Share Dialog</p>
<button class="fill" id="fb-share-button">Share on Facebook</button>
<script>
document.getElementById('fb-share-button').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: 'https://nureinberg.de',
}, function(response){});
}
</script>
You need to initialize the FB SDK,
This includes the FB.init function and having the <div id="fb-root"></div> element.
Check out this pen - it works just fine minus the App ID of course, but the popup portion works:
https://codepen.io/xhynk/pen/MVKerM
I also added the version ID to the sdk.js script (https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7)
Try adding a version and the App ID to the JS SDK source:
https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=<your-app-id>
Although, i would recommend using the asynchronous way to load the JS SDK:
https://developers.facebook.com/docs/javascript/quickstart
If you do not want to create an App, use sharer.php with a standard anchor-tag:
https://www.facebook.com/sharer/sharer.php?u=<encoded-url>
Thank you for all your answers. It works now with the following code.
I've also created a codepen for it.
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
cookie : true,
xfbml : true,
version : 'v2.7'
});
FB.AppEvents.logPageView();
};
document.getElementById('fb-share-button').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: window.location.href,
}, function(response){});
}
I try send a invite for my app using javascript and works, the window of invite show and send the invite, but the user dont see any notification. this is the code i use:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APP_ID',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Your Message diaolog',
to: '204302321251236'
});
}
</script>
<a href='#' onclick="FacebookInviteFriends();">
Facebook Invite Friends Link
</a>
Hi You just need to go in to the facebook developer and select your app and goes in to the setting of your app and click "Add Platform" and select "App On Facebook" and than add canvas url in it. now try to send invitation and it will show the notification.
I am trying to make a facebook share button, using the Javascript SDK, and this is the code I am using:
$(function() {
$('.facebook-share').click(function(e) {
e.preventDefault();
FB.ui({
method: 'feed',
link: SOME_VALID_LINK,
picture: "https://netstars-production.s3.amazonaws.com/uploads/staging/image/artwork/185/Screen_Shot_2013-06-25_at_2.07.21_PM.png?AWSAccessKeyId=AKIAJPC2ZNIXV535QU6A&Signature=lKS8UdWSDd8k5iFJxCFThTJnp8Y%3D&Expires=1380217515",
name: "Screen",
caption: "Please star my Image on Netstars.",
description: "Some "
}, function(response){});
});
});
Everything is working as expected (link, description, name, caption), except for the picture (it is not being shown). If I copy and paste the link on a browser, the image is there.
What I am missing?
Thanks!
I've checked the live demo on Is there any Facebook share plugin? and the image sharing isn't working neither.
If you want to get the facebook share link, I would recommend you to use the Facebook Share Dialog that facebook offers. Try this,
<html>
<body>
<div>
<a href="https://www.facebook.com/sharer/sharer.php?u=www.google.com" target="_blank">
<img src="http://www.turtlegardens.org/blog/wp content/uploads/2012/10/FBShare.jpg" width="150px" height="60px"/>
</a>
</div>
</body>
</html>
JsFiddle :
http://jsfiddle.net/codeSpy/EYxTJ/133/
For more details :
https://developers.facebook.com/docs/plugins/share/
I have this code that suppose to work, but doesn't work.
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
<p id='msg'></p>
<script>
FB.init({appId: "338334836292077", status: true, cookie:
true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
link:'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
I want to add facebook share button on my website, that should just post my website's content on the wall. Can anyone help me?
You don't need all that code. All you need are the following lines:
<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
Share on Facebook
</a>
Documentation can be found at https://developers.facebook.com/docs/reference/plugins/share-links/
You can do this by using asynchronous Javascript SDK provided by facebook
Have a look at the following code
FB Javascript SDK initialization
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Note: Remember to replace YOUR APP ID with your facebook AppId. If you don't have facebook AppId and you don't know how to create please check this
Add JQuery Library, I would preferred Google Library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Add share dialog box (You can customize this dialog box by setting up parameters
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>
Now finally add image button
<img src = "share_button.png" id = "share_button">
For more detailed kind of information. please click here
You can read more about share button here on Facebook developers website
Working JSFIDDLE
Also take a look at custom Facebook Share button JSFIDDLE
Include Facebook JavaScript SDK code right 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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And place below code wherever you want to show Facebook Share button
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>
Check working JSFIDDLE
For Facebook share with an image without an API and using a # to deep link into a sub page, the trick was to share the image as picture=
The variable mainUrl would be http://yoururl.com/
var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);
var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);
var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);
var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;
// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
return false;
});
// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
return false;
});
Share Dialog without requiring Facebook login
You can Trigger a Share Dialog using the FB.ui function with the share method parameter to share a link. This dialog is available in the Facebook SDKs for JavaScript, iOS, and Android by performing a full redirect to a URL.
You can trigger this call:
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});
You can also include open graph meta tags on the page at this URL to customise the story that is shared back to Facebook.
Note that response.error_message will appear only if someone using your app has authenticated your app with Facebook Login.
Also you can directly share link with call by having Javascript Facebook SDK.
https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}
app_id => Your app's unique identifier. (Required.)
redirect_uri => The URL to redirect to after a person clicks a button on the dialog. Required when using URL redirection.
display => Determines how the dialog is rendered.
If you are using the URL redirect dialog implementation, then this will be a full page display, shown within Facebook.com. This display type is called page.
If you are using one of our iOS or Android SDKs to invoke the dialog, this is automatically specified and chooses an appropriate display type for the device.
If you are using the Facebook SDK for JavaScript, this will default to a modal iframe type for people logged into your app or async when using within a game on Facebook.com, and a popup window for everyone else. You can also force the popup or page types when using the Facebook SDK for JavaScript, if necessary.
Mobile web apps will always default to the touch display type.
share Parameters
href => The link attached to this post. Required when using method share. Include open graph meta tags in the page at this URL to customize the story that is shared.
For your own specific server or different pages & image button you could use something like this (PHP only)
<img src="http://i.stack.imgur.com/rffGp.png" />
I cannot share the snippet with this but you will get the idea...
This Facebook page has a simple tool to create various share buttons.
For example, this is some output I got:
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="dilSYGI6"></script>
<div class="fb-share-button" data-href="https://www.mocacleveland.org/exhibitions/lee-mingwei-you-are-not-stranger" data-layout="button" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.mocacleveland.org%2Fexhibitions%2Flee-mingwei-you-are-not-stranger&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>
I apologize ahead of time if this is clearly documented somewhere on the FB developer site - but I can't find it (so please link me if appropriate).
I've implemented the FB login button on a website using GAE + Python. Here is the HTML:
<fb:login-button></fb:login-button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'ad16a806fc10bef5d30881322e73be68', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
</script>
Currently the behavior is - if I click on the "login" button, I am asked to allow the application access to FB. Which I then choose, "OK". But then the login button is still showing "login" and not "logout". How do I implement that? On the server or client side?
Its not documented on the FB SDK login-button page for some reason, but you can add the autologoutlink="true" attribute to the tag and it will show a logout button if you are logged in rather than just making the button invisible.
<fb:login-button autologoutlink="true"></fb:login-button>
Warning: it will ignore that tag if you are using custom text on the login button like
<!-- This will always display the button, whether you are logged in or out -->
<fb:login-button autologoutlink="true">Login To My Service!</fb:login-button>
Thanks to user "haha" the solution is:
1) Grab the Facebook Python SDK: https://github.com/facebook/python-sdk/tree/master/examples/appengine
2) Implement the HTML example: https://github.com/facebook/python-sdk/blob/master/examples/appengine/example.html
3) Update your main request handler and models: https://github.com/facebook/python-sdk/blob/master/examples/appengine/example.py
This has now been documented at https://developers.facebook.com/docs/reference/plugins/login/ . You may also want to check out onlogin for your callback.
Derek did not mentioned the HTML5 alternative which is he recommended way:
<div id="fbloginbut" scope="user_birthday" onlogin="checkLoginState();" class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true"></div>
The following page will generate the code for the login/logout button that you like the most:
https://developers.facebook.com/docs/plugins/login-button