I have a web application which uses the Facebook Send button on a per campaign basis, we used the functionality as described below last about 4 weeks ago.
The full reproduction example is here:
<html>
<head>
<title>Your Website Title</title>
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="https://managedhosting.partners/fb.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://managedhosting.partners/wp-content/uploads/2020/07/engineering.png" />
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '474334713680098',
autoLogAppEvents : true,
xfbml : true,
version : 'v10.0'
});
};
function fb(){
FB.ui({
method: 'send',
link: 'https://comp.aquila.com.au/',
});
}
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
click
</body>
</html>
When clicking the link to trigger the send button I get an error in the browser console:
I though at first this is some deprecation, as we were using v2.11 of the SDK, but its also reproducible with the v10.0 SDK. I've also made live our campaign page from 4 weeks ago which shows the same behaviour.
I've made sure our Facebook App is live and I have also created an App in a fresh account to make sure its nothing to do with the account.
The Facebook UI call now seems to require a callback function, this can be seen in the examples, but its not shown on the quickstart page initially
The complete working code example becomes then:
<html>
<head>
<title>Your Website Title</title>
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="https://managedhosting.partners/fb.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://managedhosting.partners/wp-content/uploads/2020/07/engineering.png" />
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '474334713680098',
autoLogAppEvents : true,
xfbml : true,
version : 'v10.0'
});
};
function fb(){
FB.ui({
method: 'send',
link: 'https://comp.aquila.com.au/',
}
, function(response){}) //<!-------------
);
}
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
click
</body>
</html>
Related
I'd like to show a share dialog using URL Redirection as described here : https://developers.facebook.com/docs/sharing/reference/share-dialog
The example they provide is the following : https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https://developers.facebook.com/tools/explorer
I tried to achieve the same with a custom page I created (with og meta tags), here is the code :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
<!-- Open Graph data -->
<meta property="fb:app_id" content="762471050442760" />
<meta property="og:site_name" content="Facebook Developers" />
<meta property="og:title" content="Documentation for building software with Facebook - APIs, SDKs and Services" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://developers.facebook.com/docs/" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y6/r/YQEGe6GxI_M.png" />
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="Learn how to integrate with Facebook's APIs and developer tools to drive growth and engagement to your app, website or content." />
</head>
<body>
</body>
</html>
This page is stored at this location (fake location here) -> www.mysite.com/test.html
Now I try to use the following link to share : https://www.facebook.com/dialog/share?app_id=MY_APP_ID&display=popup&href=www.mysite.com/test.html&redirect_uri=www.mysite.com
But I don't get the same result as the example they provide. Instead I get some image and description from another website (not at all the one I created with og meta tags).
How can I solve that and customize my share dialog ?
Thanks
It was a cache problem. I managed to refresh this by going to https://developers.facebook.com/tools/debug/ with the following Input URL www.mysite.com/test.html
I have some trouble here, do you know Yahoo! News? I want to create a widget like that (when you read an article it is published on your Facebook).
I've just created the Facebook apps and the Open Graph, but I don't understand how to insert it into my website, I am using Wordpress, and I was searching on Google but I still don't understand, hope you can help me.
I still dont understand, i've just create the apps and also the opengraph, also insert the opengraph tag on my header and the function, but when i try to open the post page, i get "Error Occured" How? can you help me?
You need to understand how the concepts work by reading the documentation
User takes an action in the app, such as read an article
App invokes a HTTP POST to the Graph API end-point /me/action:object=Object_URL
Facebook will crawl the object webpage (your WordPress page), read its meta tags and connect the object to the user via the action.
Your action is news.reads, so you would call as follows
POST https://graph.facebook.com/me/news.reads?article=[article object URL in your Wordpress Blog]
In order to have this work you need to set up the built action type read in your app settings: https://developers.facebook.com/apps/YOUR_APP_ID/opengraph
Then you must have the article type for the object set.
Then you must set up an object url on your WordPress blog these are done by inserting meta tags
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#
article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="YOUR_APP_ID">
<meta property="og:type" content="article">
<meta property="og:url" content="URL of this object">
<meta property="og:site_name" content="Name of site hosting article">
<meta property="og:image" content="URL to an image">
<meta property="og:title" content="Name of article">
<meta property="og:description" content="Description of object">
<meta property="article:published_time" content="DateTime">
<meta property="article:modified_time" content="DateTime">
<meta property="article:expiration_time" content="DateTime">
<meta property="article:author" content="URL to Author object">
<meta property="article:section" content="Section of article">
<meta property="article:tag" content="Keyword">
</head>
<body>
<!-- main article body -->
</body>
</html>
So you would put these in your header.php or index.php file based on your theme setup. Then you would have to insert functions and if statements based on your theme setup such as
The URL of the post
<meta property="og:url" content="<?php the_permalink() ?>"/>
A single post title
<meta property="og:title" content="<?php single_post_title(''); ?>" />
Then you need to lint this url to ensure you have setup properly, you can do this via
http://developers.facebook.com/tools/debug
Once you are sure the meta tags are set properly you need to test the action as mentioned earlier
POST https://graph.facebook.com/me/news.reads?article=[article object URL in your Wordpress Blog]
If everything is set this should return the id of the action.
Then you must implement the logic for authentication using the JS SDK
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[YOUR_APP_ID]', // 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>
and the login button plugin
<fb:login-button show-faces="true" width="200" max-rows="1" scope="publish_actions">
</fb:login-button>
Either in a functions.php file or directly within the single.php and index.php pages
From there you must create a function to call the action below on page load
<script type="text/javascript">
function readArticle()
{
FB.api(
'/me/news.reads',
'post',
{ article: 'http://yourwordpress.com/site/' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Article read was successful! Action ID: ' + response.id);
}
});
}
</script>
I am trying to implement OpenGraph actions and object. It works fine, I am able to create objects and actions in the ticker/Timelime.
My only concern is when you display the object, its title is a link.
But it links to the page I use to generate the object, so there is nothing to display :
object.html.erb
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# name_space: http://ogp.me/ns/fb/name_space#">
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="name_space:object" />
<meta property="og:url" content="PATH_TO_METHOD_TO_CREATE_OBJECT?img_link=<%= CGI.escape(#img_link)%>&points=<%=#points%>&description=<%= #description%>" />
<meta property="og:title" content="<%= params[:units_offered] %> Points" />
<meta property="og:description" content="<%= params[:description] %>" />
<meta property="og:image" content="<%= params[:img_link] %>">
if I change the og:url meta tag to the url of my FB page then the object picks my FB page value..
in a perfect I wanted to link to nothing or my FB page.
Any clue ?
Thanks!
Since the linter doesn't run javascript, you can do a javascript redirection for the user to go to the place you want.
<script> location.href = 'http://example.com/the_real_page.php'; </script>
This way the linter can still see the correct og meta tags, and the user who clicks the link gets redirected to the correct location.
Add this to the head:
<script type="text/javascript">
location = 'YOUR_HOME_PAGE';
</script>
I'm trying to create a Washington Post-esque social reader for my self-hosted Wordpress site, so when someone reads a post of mine it's published on their Facebook newsfeed.
I've followed the Facebook Open Graph tutorial, but I continue to face a pop-up box saying "Error Occured" when I click "Read" on a post. I have used the debug tool and it reported that everything is okay.
Are there additional steps required to make an Open Graph app work on a self-hosted Wordpress site?
Below is the code I've used so far. I've replaced the actual Image URLs with defaults as I can't post images on Stack Overflow yet.
In the Meta Tag area I typed the following:
<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# fb: http://ogp.me/ns/fb#
zeitlife: http://ogp.me/ns/fb/zeitlife#
<meta property="fb:app_id" content="308222752522151" />
<meta property="og:type" content="zeitlife:article" />
<meta property="og:url" content="http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould/>
<meta property="og:title" content="Cabana: Brazilian that Breaks the Mould"/>
<meta property="og:description" content="Restaurant Review" />
<meta property="og:image" content="[image URL]" /></a>[/caption]" />
</head>
</html>
And in the body of the post I typed the following:
<script type="text/javascript">
function postRead()
{
FB.api('/me/zeitlife:Read' +
'?article=http://zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'308222752522151', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="18" face="verdana" color="blue">
Cabana
</font>
</h3>
<p>
<img title="Cabana"
src="Image url here" </p>
<form> <input type="button" value="Read" onclick="postRead()" />
</form>
</html>
I would be eternally grateful if someone could help me out!
I look forward to your response.
Kind Regards,
You're making things a fair amount more difficult for yourself by creating a custom read action.
Facebook offers three built-in action types: reads, listens, and watches. (See https://developers.facebook.com/docs/opengraph/actions/builtin/)
If you use the built-in system:
It's much easier to avoid errors
Your articles appear in the "Trending articles" section of people's news feeds
Facebook does most of the work setting up actions for you
It's because you have a space in:
http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould /
It needs to be:
http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould/
I tried using this at:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.zeitlife.co.uk%2Fcabana-brazilian-food-that-breaks-the-mould%2F
And it worked.
I am facing problem in share button integration with my website.
When i click share it is only showing my website url.It is not showing image and description what might be the problem ???
Below is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Welcome Facebook Read Eval Log Loop</title>
<meta name="description" content="Examples for the Facebook Platform.">
<meta name="keywords" content="facebook, connect, facebook connect, javascript, examples, javascript sdk, javascript library, library, howto, tutorial, api, facebook apisdk">
<meta property="fb:admins" content="5526183">
<meta property="fb:app_id" content="123865001025929">
<meta property="og:image" content="https://fbrell.com/logo.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="http://fbrell.com/">
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '123865001025929',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:share-button href="http://fbrell.com" type="button"> </fb:share-button>
</body>
</html>
You are missing the og:title so you need to add it, something like: <meta property="og:title" content="Welcome Facebook Read Eval Log Loop"/>
close the tags properly as mentioned by #dwarfy
Don't use the fb:share-button! use the Like plugin instead
It seems to work with the facebook linter :
http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Ffbrell.com%2F
Anyway it's best to always use the linter (in the link above) so that it gives you warnings and errors about your og tags, an ALSO it force facebook to REFRESH its cached information about your page, which in your case was not yet refreshed after you added tags, I suppose, so you were not seeing your last changes ... It's this information Facebook uses when you share something.
Does it work now ?
Btw it gives this :
Warning
Required Property Missing og:title is required