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.
Related
UPDATED.
This code block takes the users facebook connections and saves them into the "fbdata" and within the div "friends-list-container".
Here is the page with the error.
I'm then attempting to save the data to parse.com and have the following error shown the image below.
<!doctype html>
<!-- Runs Parse and FB code that uses Facebook authentication to login
user to the site and redirects them to the main content area. This page is
fired from the Facebook button being clicked on the site landing page-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="fresh Gray Bootstrap 3.0 Responsive Theme "/>
<meta name="keywords" content="Template, Theme, web, html5, css3, Bootstrap,Bootstrap 3.0 Responsive Login" />
<meta name="author" content="Adsays"/>
<title>Parse JavaScript Todo App</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="scripts/underscore-1.1.6.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
</head>
<body>
<!-- Important, must be on the page -->
<div id="fb-root"></div>
<!-- Initialize the Parse object-->
<script type="text/javascript">
Parse.initialize("79tphN5KrDXdjJnAmehgBHgOjgE2dLGTvEPR9pEJ", "9lblofQNZlypAtveU4i4IzEpaOqtBgMcmuU1AE6Y");
var user = Parse.User.current();
//Fb app information//
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '523753101076577',
channelUrl : 'http://www.kudosoo.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
//FB user authentication script, after this completes it fires todos_two.js to redirect user to main content page//
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
FB.api('/me/friends', function(response){
if (response && response.data){
var contact = new Parse.User();
var fbdata=response.data;
var divTarget=document.getElementById("friends-list-container");
for (var friendIndex=0; friendIndex<fbdata.length; friendIndex++)
{ var divContainer = document.createElement("div");
divContainer.innerHTML="<b>" + fbdata[friendIndex].name + "</b>";
divTarget.appendChild(divContainer);
}
var contact = new Parse.User();
var contact = new Contact();
$(document).ready(function () {
var username = $("#friends-list-container").val();
contact.set("facebookFriends", fbdata.toString());
contact.save(null, {
success: function (results) {
// The object was saved successfully.
location.reload();
},
error: function (contact, error) {
// The save failed.
// error is a Parse.Error with an error code and description.
alert("Error: " + error.code + " " + error.message);
}
});
});
} else {
console.log('Something goes wrong', response);
}
});
}
});
};
(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>
<div id="friends-list-container"></div>
</body>
</html>
Here is the error.
Try replacing this line:
var contact = Parse.Object.extend("_User");
Updated from the chat conversation, this is what solved the problem:
If you want to store the friends list in an array on the current user, then Parse.User.current() is what you want:
var contact = Parse.User.current()
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.
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.
I know this can't be that difficult; maybe I'm going about this the wrong way. Hopefully you can help me.
I have a website that needs to be able to post a string to someone's Facebook timeline.
I've gotten them to login properly, but I haven't found any working code to submit information to their timeline after they've given permission.
I've followed the example here with no luck. I've
Created an App
Logged into Facebook
Defined a Cook action with a recipe object
Created a page on my website with the code that they provided, replacing [your_app_id] with my app id
Attempted to post a cook action
But when I click the cook button on their sample page on my site, it gives me the error:
No callback passed to the ApiClient for https://graph.facebook.com/me/fblaevents:cook
and the error occurred browser alert pops up.
Here is the sample code that I'm using:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fblaevents:
http://ogp.me/ns/apps/fblaevents#">
<title>OG Tutorial App</title>
<meta property="fb:app_id" content="542182755801091" />
<meta property="og:type" content="fblaevents:recipe" />
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
<script type="text/javascript">
function postCook()
{
FB.api(
'/me/fblaevents:cook',
'post',
{ recipe: 'http://fbwerks.com:8000/zhen/cookie.html' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '542182755801091', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<h3>Stuffed Cookies</h3>
<p>
<img title="Stuffed Cookies"
src="http://fbwerks.com:8000/zhen/cookie.jpg"
width="550"/>
</p>
<br>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
</body>
</html>
If there is an easier way, please point it out to me. I don't know what I'm doing.
You should replace the OG meta tags and the recipe url in your JS code with your own. As the above code is a starting code only, not a working demo (or maybe it was but now the links are dead).
Also since you are getting Error occured then most probably response.error has something in it, so you should check its value by calling the console method for example:
if (!response || response.error) {
console.log('Error occured: ', response.error);
} else {
This would give you:
Error occured: Object {type: "Exception", message: "Could not
retrieve data from URL.", code: 1660002}
Hello everyone I'm trying to post the activity of users of my facebook app, I follow the tutorial step by step but it doesn't work properly...
The alert message show me the error "Error occured An active access token must be used to query information about the current user" why?? I'm loged correctly.
The code is this:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# appnamespace:
http://ogp.me/ns/apps/appnamespace#">
<title>OG Tutorial App</title>
<meta property="fb:app_id" content="appID" />
<meta property="og:type" content="appnamespace:recipe" />
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://www.domain.com/logo.gif" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://www.domain.com/activity.php">
<script type="text/javascript">
function postCook()
{
FB.api(
'/me/namespace:cook',
'post',
{ recipe: 'http://www.domain.com/activity.php' },
function(response) {
if (!response || response.error) {
alert('Error occured '+ response.error.message); // it shows "Error occured An active access token must be used to query information about the current user." message
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'appID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<h3>Stuffed Cookies</h3>
<p>
<img title="Stuffed Cookies"
src="http://www.domain.com/logo.gif"
/>
</p>
<br>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
</body>
</html>
I don't see anywhere in your source where you authenticate the user. The user must authorize your application first, as described here: https://developers.facebook.com/docs/authentication/client-side/