I am using following JS code for sharing on facebook.
function openFbPopUp() {
var fburl = 'http://54.251.121.6/cnc/cupcakes-n-chai-side-table';
var fbimgurl = 'http://imageURL';
var fbtitle = 'Your title';
var fbsummary = "This is the description blah blah blah";
var sharerURL = "http://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + encodeURI(fburl) + "&p[images][0]=" + encodeURI(fbimgurl) + "&p[title]=" + encodeURI(fbtitle) + "&p[summary]=" + encodeURI(fbsummary);
window.open(
sharerURL,
'facebook-share-dialog',
'width=626,height=436');
return false;
}
In the pop-up window, the Description text seems fine. But when seen in facebook, the description does not show up
While sharing, Description(summary text) can be seen.
But Description(summary text) not showing in facebook.
On whatever page you're sharing, try putting the following:
<meta property="fb:app_id" content="{Your_App_ID}"/>
<meta property="og:url" content="http://54.251.121.6/cnc/cupcakes-n-chai-side-table"/>
<meta property="og:title" content="Your title"/>
<meta property="og:image" content="http://imageURL"/>
<meta property="og:description" content="This is the description blah blah blah">
However, if you're already using JS, how about using the Facebook JS SDK?
Just put the following code right after your tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
status : true,
xfbml : true
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then, to invoke the share dialog, just call the following:
FB.ui({
method: 'feed',
name: 'Your title',
link: 'http://54.251.121.6/cnc/cupcakes-n-chai-side-table',
picture: 'http://imageURL',
caption: '',
description: 'This is the description blah blah blah',
ref: '{your_reference_call_here}'
});
My personal experience suggests using the JS SDK to share things is much safer (ensures no bugs) than using the URL Redirection method.
Related
I am testing out some basic stuff and this is confusing.
Parse JavaScript SDK v1.9.0:
<script src="parse.min.js"></script>
<script>
Parse.initialize("KEY");
Parse.serverURL = 'URL'
</script>
Connect to Facebook:
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'ID',
xfbml : true,
version : 'v2.7'
});
};
(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'));
Get the current user:
var user = Parse.User.current();
All fine up to this point. I can read and display from user.
When I try to update the user:
user.set("name","test");
user.save();
RangeError: Maximum call stack size exceeded.
I checked for recursion. This is only being called one time. No idea why this error would be thrown.
EDIT: To fix syntax. Error still exists.
EDIT 2: I get the same error if I try to update the currentUser or if I set a pointer of another object to the currentUser. Example:
The following creates a new InterestObject just fine, unless I set the user column as a pointer to the currentUser. Then I get the same error.
var currentUser = Parse.User.current();
var InterestObject = Parse.Object.extend("CadetsInterest");
var intObj = new InterestObject();
intObj.save({
user: currentUser,
cadets: [checkCadets state],
cadets2: [checkCadets2 state],
cwg: [checkCWG state],
question: [txtQuestion stringValue]
}).then(function(object) {
[viewSuccess setHidden: NO];
[viewInterest setHidden: YES];
});
i think the syntax in your code should be:
user.set("name","test");
and in your case you wrote:
user.set("name"),"test"
UPDATE
From the code that you provided i don't see any logIn call in order to login with facebook.
I did some side project and managed to do it. What i did is the following:
Go to https://developers.facebook.com
Create facebook app of type Web
In your facebook app URL put your server URL (in my case i did it on my localhost so i put the URL where my app is hosted)
Go to your parse app and write put the following code:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide
</li>
<li>Parse JavaScript API Documentation
</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>We've also just created your first object using the following code:</p>
<code>
var TestObject = Parse.Object.extend("TestObject");<br/>
var testObject = new TestObject();<br/>
testObject.save({foo: "bar"});
</code>
</div>
</div>
<script type="text/javascript">
Parse.initialize("{PARSE_APP_ID}");
Parse.serverURL = '{PARSE_SERVER_URL}'
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId: '{YOUR_FB_APP_ID}',
xfbml: true,
version: 'v2.7'
});
};
(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'));
setTimeout(function() {
Parse.FacebookUtils.logIn(null, {
success: function(user) {
user.set("name", "test");
user.save();
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
}, 2000);
</script>
</body>
</html>
In this code i do exactly the same steps that you did but then i call to Parse.FacebookUtils.logIn. I am doing it after 2 seconds just to make sure that Parse.FacebookUtils.init was executed (it's better to do inside a callback but for testing purposed i did it like that).
then after i log in with my facebook account i get the user inside the success block, update his name and save it again.
then in my parse-dashboard i see the following:
Please also make sure that your current user is logged our before doing it because maybe there is a chance that you have an active session.
in order to do it simply call to
FB.User.logOut();
I'm trying to use facebook registration plugin on my localhost. But the problem is that the registration box won't show up.
Here are some screenshots:
https://dyp.im/FXwee52OJC
https://dyp.im/NRjFe2ulB9
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxxxxxxx',
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.0' // use version 2.0
});
};
// Load the SDK asynchronously
(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>
<fb:registration redirect_uri="http://www.google.com" />
test
</body>
</html>
See Documentation, Facebook requires that the redirect_uri be within your own site:
redirect_uri: The URI that will process the signed_request. It must be prefixed by your Site URL, defined in the app dashboard. This field is required.
So you need to change your registration tag to something like this:
<fb:registration redirect_uri="http://localhost/callback-fb-registered" />
Is my Facebook canvas app displaying the login dialog automatically upon arrival? I want it to butI have been fighting this for quite some time. I have Page Tab Apps that feed off of the same canvas URL and these are indeed displaying the login dialog for the app automatically in in a pop-up.
I clear my browsers cookies when I test.
I am using Javascript and the Facebook SDK to build my app with a GoDaddy Website Builder; can I use PHP with this website builder?
My app- https://apps.facebook.com/{My_App}/
Code in HEAD section
<meta property="og:type" content="emoticon_app_x:app">
<meta property="fb:app_id" content="{My App ID}">
<meta property="og:title" content="Emoticon App. X">
<meta property="og:description" content="Easy to use copy and paste emoticons for Facebook.">
<meta property="og:url" content="https://apps.facebook.com/{My_App}">
<meta property="og:image" content="https://nebula.wsimg.com/b270c0b24507a5a9018ec56c54957962?AccessKeyId=E136FD740FAB2A181ED3&disposition=0&alloworigin=1">
<meta name="google-translate-customization" content="c7ecf59b1c239b7f-e83518b06897476f-g415c0e55e9c88e54-17">
<meta charset="UTF-8">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{My App ID}',
status : true,
xfbml : true,
version : 'v2.0'
});
};
(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'));
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
FB.login();
}
});
</script>
end HEAD section code
Code in BODY section
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{My App ID',
status : true,
xfbml : true,
version : 'v2.0'
});
};
(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'));
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
FB.login();
}
});
</script>
<body>"<"!-- Below we include the Login Button social plugin. This button uses the JavaScript SDK to present a graphical Login button that
triggers the FB.login() function when clicked. --">"
<p><fb:login-button show-faces="false" width="200" max-rows="1"></fb:login-button></p></body>
</html>
end BODY section code
So i'm curious to know how to write some code to make the Facebook "Likes" appear on the users timeline, activity feed and in their "Liked pages section". As of today im using the following code:
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://MY_URL.SE/" />
<meta property="og:image" content="http://MY_URL.SE/med/fbLike.png" />
<meta property="og:title" content="SITE_TITLE" />
<meta property="og:site_name" content="SITE_NAME" />
<meta property="og:description" content="DESCRIPTION" />
And the javascript for the Facebook Like button:
var fbAppId = 'APP_ID';
var objectToLike = 'https://MY_URL.SE';
window.fbAsyncInit = function() {
FB.init({
appId : APP_ID,
status : true,
cookie : true,
xfbml : true
});
};
(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/sv_SE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function postLike() {
FB.api(
'https://graph.facebook.com/me/og.likes',
'post',
{ object: objectToLike,
privacy: {'value': 'SELF'} },
function(response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML = 'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/me/activity/' + response.id + '\" />';
}
}
);
}
The like counter is increasing/decreasing as intended but nothing is being displayed on Facebook. The debugger tool finds all the OG objects and doesn't report any errors. The app is live and sandbox mode is deactivated, the Feed Dialog is working as intended (using the same app).
So why isn't it sharing the likes on the timeline/activity feed? Did i miss something?
have you tried going to your facebook profile and clicking on the "activity log" It lists all your activity whether its shared on your timeline or not. I've found on a site I'm currently working on that the activity is shown there and in order to get it on my timeline I have to select that from the drop down next to the post in the activity log.
I am trying to get a simple facebook like setup along with a dynamic link for videos. The video functionality (publishVidToFB()) below works great! However I can't get this infernal "Like" to work for anyone but me.
The app is not in sandbox mode. Likes work fine for me, but my comments aren't coming through. For other devs here who aren't setup as "Facebook Developers" on the App - likes aren't showing up for them at all on their newsfeeds.
The FB debugger isn't complaining about anything but the image size in the og:image tag.
Please see code below and please do help!
!DOCTYPE html
html
*head*
*meta property="fb:app_id" content="app id is here" *
*meta property="og:url" content="link back to the originating page is here... "*
*meta property="og:site_name" content="site name code is here like 'INTERNALCODE'"*
*meta property="og:image" content="web linkable image is here"*
*meta property="og:description" content="description blah blah."*
*meta property="og:type" content="company"*
*meta property="og:title" content="blah blah blah"*
*/head*
*body*
*div id="fb-root"**/div*
*input type="button" value="Publish" onclick="publishVidToFB(); return false;" *
*script*
window.fbAsyncInit = function() {
FB.init({
appId : 'my appid is here', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.async = true;
js.src = document.location.protocol + "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function publishVidToFB(){
FB.ui({
method: "stream.publish",
user_message_prompt: "",
message: "message",
attachment: {
name: "Check out this cool video",
caption: "Video caption goes here etc etc etc",
href: "my href is here",
media:[{
"type": "image",
"src": "image source is here",
"href": "myhref is here"
}]
}
});
};
*/script*
*div class="fb-like" data-href="href is here" data-send="false" data-width="450" data-show-faces="false"**/div*
*/body*
/html
Solved. Facebook had blacklisted the app for all of my testing. Waited a few days, worked on other issues, and we're up and running.