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>
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){});
}
Edited
I am trying to implement the amazonPay to my website on checkout. Following their documents, I started writing the code. As of now for testing purpose, I redirect the user to another page once they loggedin with their amazon account and on that page the user are able to see the address and payment methods widgets. Now I want the flow like this: Once user clicks on 'Pay with Amazon' button on 'checkout.php', amazon login window will be pop-up and when the user successfully logged in and if access token is generated, they should redirect to the same page(checkout.php) and they should see the address and payment method widgets on that page only after they successfully logged in. I want to do this as my order details are on that page, so will be easy to get the order reference id from that page.
In index.php
<div id="AmazonPayButton"></div>
<!-- <div id="addressBookWidgetDiv"></div> -->
<!-- <div id="walletWidgetDiv"></div> -->
<script type="text/javascript">
var authRequest;
OffAmazonPayments.Button("AmazonPayButton", "<?php echo $amazonpay_config['merchant_id']; ?>", {
type: "PwA",
color: "Gold",
size: "small",
authorization: function() {
loginOptions = {
scope: "profile payments:widget",
popup: "true"
};
authRequest = amazon.Login.authorize(loginOptions, "checkout.php");
},
onError: function(error) {
// your error handling code
}
});
</script
How can I do this ?
Confirm that the domain the button is being rendered on is whitelisted in your Allowed JS Origins. It's also important to make sure that the protocol matches, http, https, etc, and to confirm that the correct client_id is being used. If you continue to have trouble, reach out to Amazon Pay's merchant support, as they can assist with your specific situation.
i am testing facebook send button for my website and wants users to send current webpage url link to admin directly by clicking on facebook messenger button..here are javascript codes
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '95100348886',
xfbml : true,
version : 'v2.6'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-messengermessageus"
messenger_app_id="95100348886"
page_id="XYZ"
color="blue"
size="large">
</div>
that was the above javascript code which i have used (you can put your page name instead of "xyz"...
and below is the html code
<a href="https://m.me/XYZ">
I am sending the link to admin which I liked
you can put your facebook page name instead of "xyz"
now these codes open direct messegner and allows user to chat with admin and users are allowed to send message to the admin via this button of facebook messenger.
now i want to load default text when the messenger opens so that user dont need to type anything and can directly click on send button to send the default message along with current page url.
here is one code on which when user click it by default shares current page url but it allows user to select from the contact which i dont want as user should compulsorily send the message to admin only .
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook_messenger"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
hence i want "auto share and send current webpage url to only one person(friend) on click of messenger button on webpage". which is the mixture of above codes
thanks in advance
Basically, my website hosts various embedded posts using the new Facebook Feature. This allows users to like, comment and share other peoples content from my site. What am I trying to achieve is, when a user shares somebody else's content via embedded post, it will show up on the Facebook Feed as via MY WEBSITE...not via the posts originator. It can be done if when clicking the share button, I manually enter my app id in the url in place of theirs. Can this be done dynamically by a piece of code?
Thank you in advance,
Gavin.
You not mention which server side language used. Assumed PHP
$url=$_SERVER['REQUEST_URI'];
<div class="fb-share-button" data-href="<?php echo $url;?>"></div>
or Javascript
<script type="text/javascript">window.location.protocol = "http";
window.location.host = "example.com"
window.location.pathname = "index.html"
var shareURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
document.write('<div class="fb-share-button" data-href="'+shareURL+'"></div>');
</script>
Can i have a facebook share button without an app id? I have a facebook page, not an app and no associated app.
i have a div
<div class="fb"></div>
and the js file
$('.op-blackfb').click(postToFeed);
var postToFeed = function() {
var share = {
method: 'feed',
u: 'http://mylink.goes/here'
};
FB.ui(share, function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
});
}
This used to work, but now it fails with an error in the popup dialog, i'm guessing after facebook changed the API. Does anyone know a workaround for this? I want to have a custom share button? I have the normal fb share button, but i want to have an image that doesn't break the design.
This works without an app id but has the standard fb button
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<div id="fb-root"></div>
<p id='msg'></p>
<fb:share-button type="button" style="display:inline-block;" share_url="http://my.link/here"></fb:share-button>
Thank you,
How about a modal iframe? You can use facebooks sharer. You can use any button you want to open up the dialog. The problem is that this uses a facebook page, so you have to merge it into you design with some iframe or you must use a popup
https://www.facebook.com/sharer/sharer.php?u=[the-link-you-want-to-share]
Also facebooks documentation is also very well done
https://developers.facebook.com/docs/reference/dialogs/feed/