Develop Reference

How can I use Facebook share button function on a custom button in MVC

I want to use custom icon button on a facebook share code to share a link.
<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=v3.1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-share-button fb-Button" data-href="http://www.oppa.ge/piggybank/1002102" data-layout="button" data-size="large" data-mobile-iframe="true" style="margin-right:20px; float:right">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.oppa.ge%2Fpiggybank%2F1002102&src=sdkpreparse" class="fb-xfbml-parse-ignore" style="height:45px;">Share</a>
</div>
Update: So I tried FB.ui and I get an error in console So I tried FB ui and I get a problem with script
" piggybank?isFullScreen=True:821 Uncaught ReferenceError: FB is not defined at HTMLDivElement.document.getElementById.onclick "
<script type="text/javascript"> document.getElementById('shareBtn').onclick = function () { FB.ui({ method: 'share', display: 'popup', href: 'oppa.ge/piggybank/1002102';, }, function (response) { }); } </script>

FB web share dialog not giving option to send as message

I am using Facebook's SDK with Require JS and Backbone JS. I have a share button that triggers a fb share display. It shows up as expected, but does not give the option to share as a message. All other options (timeline,group,event,page) appear. Is there a reason why?
my facebook sdk load module (copied/generated from fb developer guide):
define(["facebook"], function(FB){
FB.init({
appId : '', // my id is here
xfbml : true,
version : 'v2.9'
});
FB.AppEvents.logPageView();
(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'));
});
and how I use it in a backbone view:
clickFbShareHandler: function() {
var dialogue = "I got " + this.model.getValue()";
FB.ui({
method: 'share',
mobile_iframe: true,
href: '(my url)',
quote: dialogue,
}, function(response){});
}
here is an image of the options given to me:

You can use the Send Dialog for that: https://developers.facebook.com/docs/sharing/reference/send-dialog
Alternatively, you can use sharer.php, that´s what you saw on other pages. It just needs the url as parameter: https://www.facebook.com/sharer.php?u=[xxx]

Facebook Javascript SDK, how to know when async script has been loaded?

I do include facebook snippet like so
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'someAppId',
cookie : true,
xfbml : true,
version : 'v2.8'
});
};
(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>
Then, somewhere in my code, i will be doing something like
FB.foo.bar();
How i know when the script has done loading and therefore the FB object does exists?

That is what window.fbAsyncInit is for, the JavaScript SDK is loaded when you hit that callback function. You can use FB right after FB.init.

Facebook social sigin-in javascript sdk won't load in Chrome or FF

Update 1
I started with angular quickstart and only added facebook's javascript, however, it won't load:
<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>
I am Using Facebook JavaScript API to create login in an angular 2 app, but running into the following:
TypeError: FB.login is not a function
index.html (Elided for brevity)
<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
System.import('app').catch(function (err) {console.error(err);});
</script>
I noticed the script does not seem to load correctly, following is from Chrome devtools:
Angular 2 Component
declare const FB: any;
#Component({
// usual suspects here
})
export class LoginComponent implements OnInit {
constructor() {
FB.init({
appId: 'my-app-id',
cookie: false,
xfbml: true,
version: 'v2.5'
});
}
ngOnInit(): void {
FB.getLoginStatus(response => {
....
});
}
onSignin(socialMedia: string): void {
FB.login(); // The errant line
}
}
Am I supposed to do something like the following? as outlined here
(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.com/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Answering this for the benefit of others....
It was ghostery plugin which was (among other things) blocking 'social signin'.

i think insert script library of fb in your main html file.Also make sure that the script provided by the fb developers are inserted in your code that solve the problem.follow the link https://developers.facebook.com/docs/javascript/quickstart

Don't run FB.init directly, You should do:
declare var window:any;
and then in your constructor or ngInit Method use FB Async Method:
window.fbAsyncInit = function() {
FB.init({
appId: appID,
xfbml: true,
version: 'v2.5'
});
};
(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.com/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
fbAsyncInit automatically get trigger when facebook sdk loads.
See more at Facebook quick start

Passing multiple variables to javascript function from onclick link

I want to pass variables to a js function:
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// async init once loading is done
window.fbAsyncInit = function() {
FB.init({appId: 1234567890987, status: false});
};
function gogogo(data) {
FB.ui({
method: 'feed',
link: data.url,
picture: data.picture,
name: data.title,
//caption: data.caption,
description: data.description
});
}
Gets in here and displayed all except description:
<%= link_to image_tag('icons/social-fb.png'),'#', :onclick=>"gogogo({ url:'#{request.original_url}',title:'#{content.title}',picture:'#{PICTURE_PATH+content.tg_medias.first.media.url(:big)}', description:'#{content.description}' }) ;return false;" %>
content.description is not working..
Thanks

You should pass a javascript object as the argument to the gogogo function. Try replacing
gogogo(data=(url:'#{request.original_url}',url:'#{content.title}'));
with
gogogo({url:'#{request.original_url}',title:'#{content.title}'});
I'm assuming the fact that your argument's two keys were both url was a typo.

I have done this in my many projects. So I will suggest you following approach.
Put an id on the link
add an script tag in the view
Add following code in a script tag in your view
$(document).ready(function($){
$("a#id_of_that_link").on('click', function(e){
gogogo(#{#prepared_data.to_json}, true, #{#anything_else.to_json});
});
});
Now you will get these params at your function.
Let me know If you have any confusion.