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.
Related
So I have a custom share button for facebook and functions for it.
<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and
<script>document.getElementById('piggy-bank-fb-shear-btn').onclick = function () {
FB.ui({
method: 'share',
display: 'popup',
href: window.fbSheareUrl,
}, function (response) { });
}</script>
so I get an error when try to share : Invalid App ID: The provided app ID does not look like a valid app ID.
I cant fin place to put it if you can help.
Thanks
The App ID is required for the Share Dialog: https://developers.facebook.com/docs/sharing/reference/share-dialog#params
You can either submit it as parameter, or add it in the implementation of the JS SDK: https://developers.facebook.com/docs/javascript/quickstart#loading
You need to create an App for that: https://developers.facebook.com/apps/
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]
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
OK, so I'm trying to save each comment that is being made in the facebook comments widget locally for later use. I subscribe to both the 'comment.create'- and 'comment.remove'-event - which in turn should fire my 'fb_fetch_comment'-function. However, 'comment.create' never fires. The weird thing is that the problem only occurs with 'comment.create' - and not 'comment.remove' - which works just as it should.
I have implemented the following code in my html:
<div class="fb-comments" data-href="<?php echo get_permalink(); ?>" data-numposts="25" data-width="100%"></div>
Then i include the js in a separate file. The code is as follows:
(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/nb_NO/sdk.js#xfbml=1&version=v2.4&appId={MY-APP-ID}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : {MY-APP-ID},
xfbml : true,
version : 'v2.4'
});
FB.Event.subscribe('comment.create',function(comment_data){
fb_fetch_comment(comment_data, 'create')
});
FB.Event.subscribe('comment.remove',function(comment_data){
fb_fetch_comment(comment_data, 'remove')
});
function fb_fetch_comment(comment_data, comment_action) {
jQuery.post(
fb_ajax.url, {
commentid: comment_data.commentID,
security: fb_ajax.security,
action: 'fb_ajax_update_comment',
event: comment_action,
url: comment_data.href
});
}
};
Any ideas where the problem may lie?
The issue has resolved itself without any action taken on my part. Must have been an error in Facebooks own API. Case closed.
To explain, I'd like for a link to only become available for clicking once visitors have 'Liked' my website (not my Facebook page - the actual website). I've been trying to do it using this code:
<script>
FB.Event.subscribe('edge.create', //FB.event.subscribe attaches a handler to an event and invokes your callback when the event fires.
function(response) { //This is where the response function is inserted, I used document.write for this example
document.write(';This is the HTML I want to display');
}
);
</script>
But even after I like my website the link doesn't display. I hope I've been as clear as possible, any help would be greatly appreciated.
I managed to get it working after some thinking and playing around:
<!-- FB Javascript SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'APP-ID',
channelUrl : '//WWW.WBESITE.COM/channel.html', // Channel File
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
// Additional initialization code here
FB.Event.subscribe('edge.create', function() {
window.location.href = "http://WEBSITE.COM/";
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<!-- More FB Javascript SDK (Like Button) -->
<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=APP-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="//connect.facebook.net/en_US/all.js#xfbml=1">
</script>
The FB.Event.subscribe needed to be placed within the window.fbAsyncInit function. I then made it so that instead of having the HTML appear after the 'Like' button had been pressed it simply redirected it using the window.location.href = "http://WEBSITE.COM/"; to a page that has the new link included on it. The document.write function wasn't working because it would get rid of all the HTML on the page other than what was included in the function.
The code above needs to be placed just after the opening tag and then you can place the code for the 'Like' button:
<div class="fb-like" data-href="http://WEBSITE.COM" data-send="send" data-layout="button_count" data-width="450" data-show-faces="true"></div>
Anywhere that you would like on the page!