I have the LIKE button in the website, but URL like https://www.website.com/something/1/something2/2 is not displayed in the News Feed on Facebook.
Here's my setup:
<html xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema/'>
<meta content='New Listingggg' property='og:title'>
<meta content='article' property='og:type'>
<meta content='https://www.filepicker.io/api/file/1234567890' property='og:image'>
<meta content='https://website.herokuapp.com/something1/1/something2/2' property='og:url'>
<meta content='Website name' property='og:site_name'>
<meta content='New record' property='og:description'>
<meta content='147949055123456' property='fb:app_id'>
<link href='https://www.filepicker.io/api/file/1234567890' rel='image_src'>
<meta content='http://cache.thisorth.at/blog-images/00000/00000/161.jpg' name='image'>
<link href='https://website.herokuapp.com/something1/1/something2/2' rel='canonical'>
<meta content='en_US' property='og:locale'>
When I check this URL on the Facebook tool, I see there following:
Critical Errors That Must Be Fixed - Bad Response Code: URL returned a bad HTTP response code.
Errors That Must Be Fixed - Missing Required Property: The 'og:type' property is required, but not present.
Open Graph Warnings That Should Be Fixed
Inferred Property: The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
I am fighting with this issue the second day and it drives me crazy, what am I missing?
The all tags that are mentioned that I am missing them are implemented in the website, thus... where could be the problem?
Thanks a lot!
EDIT:
Updated HTML output.
EDIT2:
Output from console:
Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "https://website.herokuapp.com". The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access. like.php?api_key=439601822731111&locale=cs_CZ&sdk=joey&channel_url=http%3A%…scheme=light&show_faces=false&send=false&extended_social_context=false:403
Related
I set up the meta-tags gem, and I added Open Graph metatags as follows:
<% set_meta_tags title: 'Sortyu Image',
description: #photo.description,
og: {
title: 'Sort images, choose what you like the most of an image',
type: 'website',
url: "#{photo_url(#photo)}",
site_name: 'Sortyu',
image: [{
_: "#{#photo.file.url(:medium)}",
width: #width,
height: #height,
}]
} %>
This is generating this kind of Open Graph metatags on my pages:
<meta property="og:title" content="Sort images, choose what you like the most of an image">
<meta property="og:type" content="website">
<meta property="og:url" content="https://sortyu-staging.herokuapp.com/photos/43">
<meta property="og:site_name" content="Sortyu">
<meta property="og:image" content="https://sortyu.s3.amazonaws.com/photos/files/000/000/043/medium/valida.png?1488596412">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="626">
I added this like 4 days ago for my pages, but Facebook doesn't get any of my Open Graph metatags, I have checked the format of my metatags and it seems to be right... However on the Open Graph debugger says that I haven't provide anything:
Inferred Property: The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Share App ID Missing: The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
Inferred Property: The "go:image" property should be explicitly provided, even if a value can be inferred from other tags.
As you can see above, those properties are indeed provided... So I don't know what's going on... What am I doing wrong?
This is the current twitter card data I have inside <head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#tradukka">
<meta name="twitter:title" content="Currency exchange: United States Dollar (USD) - Argentine Peso (ARS)">
<meta name="twitter:description" content="Currencies exchange updated in real time: United States Dollar (USD) - Argentine Peso (ARS) / 1 USD...">
<meta name="twitter:image" content="http://tradukka.com/meta/359ac65be829e896c12a3126fa9c71d0.jpg">
<meta name="twitter:image:width" content="750">
<meta name="twitter:image:height" content="370">
<meta name="twitter:url" content="http://tradukka.com/currency/usd/ars">
If I send a tweet with that link, all the information is being shown in the tweet, except the image:
I also tried using the card validator:
...it fetches everything except the image.
Also, I already tried using twitter:image:src as well. The domain is whitelisted. Any ideas on why the image is not being displayed inside the tweet?
The issue was caused by robots.txt. Make sure that the twitter bot is allowed to crawl the directory containing the twitter images (in this case, /meta).
I am also facing the same problem.
The solution is just switching from summary card with large image to summary.
To apply this you have to edit the script
"meta content='summary_large_image' name='twitter:card'"
as
"meta content='summary' name='twitter:card'"
This solves the problem, but I don't know why the large image type cards are not working.
I'm using https://cards-dev.twitter.com/validator on http://parlaywith.me.
When I include this tag (currently included):
<meta property="og:url"
content="http://parlaywith.me">
I get this error:
When I remove the tag, I get:
How can I keep the og:url tag and avoid the error?
You might have to specify the URL with the trailing slash:
http://parlaywith.me/
instead of
http://parlaywith.me
Also note that HTML5 requires to use link (instead of meta) if the value is a URI:
<link property="og:url"
href="http://parlaywith.me/">
Looking to set up a Twitter product card integrated through Shopify -- while the product info is populating in the validator preview and the got confirmation that the card was approved, there is no next step available. The help article that shopify provided instructs to use "catalog view" as next step however I haven't been able to access. Any insights?
https://docs.shopify.com/manual/configuration/store-customization/social-media/twitter/taking-advantage-of-twitter-cards
EDIT: If you're already able to view the proper card in the validator tool, then all that's left is to tweet out a link and see if it works!
--
It looks like Twitter has changed their Card Application & Validation pages since that Shopify article was written.
According to https://dev.twitter.com/cards/types/product, just copy and paste this code into your twitter-card snippet, and update it with your information.
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="#iHeartRadio">
<meta name="twitter:creator" content="#iHeartRadio">
<meta name="twitter:domain" content="iheart.com">
<meta name="twitter:title" content="24/7 Beatles — Celebrating 50 years of Beatlemania">
<meta name="twitter:image" content="http://radioedit.iheart.com/service/img/nop()/assets/images/05fbb21d-e5c6-4dfc-af2b-b1056e82a745.png">
<meta name="twitter:label1" content="Genre">
<meta name="twitter:data1" content="Classic Rock">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="National">
Once you've done that, you can go back to the Validator Page (https://cards-dev.twitter.com/validator) to check that everything works the way it should.
I cannot get a caption to show up on a user-generated photo, like so:
Instead, this is a non-user generated photo,with a title and description:
after enabling user-generated photos (via iOS - Facebook Open Graph Api -- ensuring that photos are user generated ), it looks like this:
note- on the image above, both title and description are set just as in the first image. However, the description does not show up. The title, on the other hand, does.
After setting the title to empty, this is the result:
Open graph object on the web is like so:
<meta property="fb:app_id" content="<?php echo strip_tags($_REQUEST['fb:app_id']);?>">
<meta property="og:url" content="<?php echo strip_tags(curPageURL());?>">
<meta property="og:type" content="<?php echo strip_tags($_REQUEST['og:type']);?>">
<meta property="og:title" content="<?php echo strip_tags($_REQUEST['og:title']);?>">
<meta property="og:description" content="<?php echo strip_tags($_REQUEST['og:description']);?>">
<meta property="og:image" content="<?php echo strip_tags($_REQUEST['og:image']);?>">
<meta property="fb:explicitly_shared" content="true">
What do I need to do in order to get the caption to show up alongside having a user_generated, full size image?
Maybe something is configured incorrectly on facebook? Meal is a predefined object defined by facebook. Should I try using another one?
It's not a caption, it's a user message.
You need to set the message in your code and in settings as a field as described in https://developers.facebook.com/docs/opengraph/using-actions/
Allows users to write a personalized message attached to this action. You can only use this when the text is entered by the user and not pre-populated. You can mention users and pages inline using mention tagging.
Furthermore, in iOS code (objective-c) from this tutorial
https://developers.facebook.com/docs/tutorials/ios-sdk-tutorial/publish-open-graph-story/:
In this method:
- (void)postOpenGraphActionWithPhotoURL
setting this property:
action.message = #"your message here";
gives the desired result.