I've built a Vue app using Nuxt.js and for some reason og: tags are not working on facebook. I see them in the source code, and run the site through the FB debugger, but it says I have no required og: meta tags.
Site here:
https://staymacro-staging.netlify.com/editorial/caleb/
Code in the page:
head () {
return {
title: `${this.title}`,
meta: [{
hid: `description`,
name: 'description',
content: `${this.description}`
},
{
hid: `og-title`,
property: 'og:title',
content: `${this.title}`
},
{
hid: `og-description`,
property: 'og:description',
content: `${this.description}`
},
{
hid: `og-image`,
property: 'og:image',
content: `${this.image}`
},
{
hid: `og-url`,
property: 'og:url',
content: `https://staymacro.com/${this.$route.path}`
}]
}
},
Sharing works on Slack, iMessage, Twitter, etc. but just not on Facebook
The og:url in the source does not match the url you presented: https://staymacro.com//editorial/caleb
That is the relevant URL where the tags are taken, and it does not work (no SSL, page not found).
You can even see this in the debugger: "Curl-Fehler: 51 (SSL_PEER_CERTIFICATE)". Check out the "canonical URL".
Related
I am unable to shorten the URL being shown in the AddThis email popup when using the built-in Bit.ly shortening service in AddThis.
It works with Twitter, but not Facebook and email. Is this supported?
var addthis_share = {
url: "http://www.wrestlemaniamainevent.com/wishlist/kjhksad897dsjkhdsa98273",
title: "View My List",
url_transforms: {
shorten: {
twitter: 'bitly',
facebook: 'bitly', // Unsupported?
email: 'bitly' // Unsupported?
}
},
shorteners: {
bitly: {
login: '{login}',
apiKey: '{key}'
}
}
}
I'm messing around with an Angular app, let's say for the sake of argument that I'm not using any meta tags, how can I use the Share Dialog to let users share pages of my app?
Using the old Feed Dialog works, but it has been deprecated:
$scope.share = function() {
FB.ui({
method: 'feed',
name: 'This is the name field',
link: 'The link',
picture: 'The picture',
caption: 'The caption',
description: 'This is the content of the "description" field, below the caption.'
})
},
function(response) {
if (response && !response.error_code) {
console.log('Posting completed.');
} else {
console.log('Error while posting.');
}
});
};
So even though this works, I want to use the Share Diolog in the same way but I'm not figuring it out. This is sort of what I've been trying, keep in mind that I'm a newbie:
$scope.share = function() {
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object: {
'title': 'The title',
'image': 'An image',
'url': $scope.shareUrl,
'description': 'This is the description',
}
})
},
function(response) {
if (response && !response.error_code) {
console.log('Posting completed.');
} else {
console.log('Error while posting.');
}
});
};
Any hints?
The short answer is that you can't, you must use OpenGraph meta tags.
Since Facebook doesn't understand JavaScript and thus Angular, you must detect Facebook's crawlers server-side and render a static page for them instead of the Angular app.
While the precise implementation will vary depending on your server technologies, here's the general idea:
Setup a route for the resources that need sharing: http://example.com/resources/:id
Look for the user-agent
If it's one of Facebook's crawlers, fetch the resource and render a simple view with OpenGraph tags and an empty body. Otherwise, simply render the Angular app.
Facebook's crawlers are available here and they currently are:
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
facebookexternalhit/1.1
Facebot
I'm working on publishing stories with Facebook Open Graph, for this I'm using their JS SDK. Docs is here : https://developers.facebook.com/docs/opengraph/overview
So the point is to publish for a user : John Smith is listening Shakira - Lalala on Mywebsite.
listening is the action
Shakira is the object
The JS code would be:
FB.api(
'me/mynamespace:listen',
'post',
{
song: "http://mywebsite/shakiramusic"
},
function(response) {
// handle the response
}
);
In this page, some others informations will be specified with code like this:
<meta property="og:title" content="Lalala" />
<meta property="og:image" content="wonderShakira.jpeg" />
But, here is my problem. Imagine that I would like to make a Stories like :
John Smith is reading page 542 from a BigBook on mywebsite
The page number is highly variable and so can't be stock in meta property because Facebook won't refresh it in time.
So I would like making something like that:
FB.api(
'me/mynamespace:reading',
'post',
{
object:{
app_id: 1234567890,
type: "book",
url: "http://mywebsite/thebigbook
title: "The Big Book"
image: "bigbookcover.png",
description: "A super book",
** page_count:542 **
}
},
function(response) {
// handle the response
}
);
But of course it's not working and i get an error. May be i misunderstand the principe of custom stories, actions and objects... I hope my problem is clear and you'll be able to help me.
Thanks :)
I got the answer, here is the good code:
FB.api(
'me/mynamespace:reading',
'post',
{
book:{
app_id: 1234567890,
type: "book",
title: "The Big Book"
image: "bigbookcover.png",
description: "A super book",
url: "http://mywebsite/thebigbook
page_count:542
}
},
function(response) {
// handle the response
}
);
There is two things to consider:
you need to send an object call book for reading and you need to put the url parameter in last, otherwise, Open Graph will get the value in the meta tag. If you put it last, OG will take the parameter that you send.
var media;
Titanium.Media.takeScreenshot(function(e) {
media=e.media;
}
);
var data = {
link: "https://developer.mozilla.org/en/JavaScript",
name: "Best online Javascript reference",
message: " Javascript reference",
caption: "Timbodi",
picture: media,
description: "This section of the site is dedicated to JavaScript-the-language, the parts that are not specific to web pages or other host environments...",
test: [ {foo:'Encoding test', bar:'Durp durp'}, 'test' ]
};
facebook.requestWithGraphPath('me/feed', data, 'POST', showRequestResult);
share the screen shot image, but the image show in facebook is different.
please help i am new in titanium.
I am working on a Facebook IFrame app and using FB.ui to display the permissions request dialog using the JS SDK.
Here is the code I`m using:
FB.ui(
{
method: 'stream.publish',
message: '',
attachment: {
name: 'תחרות התחפושות הגדולה של לגדול',
caption: '',
media: [{ 'type': 'image', 'src': 'http://www.p-art.co.il/ligdol_purim/logo.gif', 'href': 'http://apps.facebook.com/ligdolpurim/', 'width': '101', 'height': '84'}],
description: ('פורים 2011'),
href: 'http://apps.facebook.com/ligdolpurim/'
},
action_links: [
{ text: 'Ligdol Purim', href: 'http://apps.facebook.com/ligdolpurim/' }
],
user_prompt_message: 'פרסם את השתתפותך בתחרות'
},
function(response) {
alert(response.post_id);
});
}
A happy surprise is that the SDK knows to show the dialog only for the missing permissions (if any). The problem is that a new IE window pops up and then disappears before the dialog is shown inside an iframe.
I have tried several variations on this code I found all over the net and all of them give me this popup before showing the dialog.
I had not considered that in order to open a facebook lightbox, you actualy need to be on facebook. I was testing my IFrame outside facebook. When I began testing the app inside a page tab, I got the lightbox. Ya learn something new everyday.