I'm integrating a Like button in the individual blog posts on my company's website ( www.atlas-games.com , blog by CLASSIC Blogger at http://blog.atlas-games.com ... can't use a widget). Unfortunately the metadata isn't passing through, so in Facebook it looks like:
Michelle Nephew likes a link.
Atlas Games: Charting New Realms of Imagination <--website's name, not post title
The item links work correctly on "link" and "Atlas Games ..." directing to the individual post, but it's using generic text rather than the individual post's title, the site name I specified for Facebook, and the image.
Object Debugger comes up with Inferred Property errors for URL, Title, and Image, though I specify them in the header of my page. For some reason Facebook just isn't finding the metadata, seems like. See the report here:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fblog.atlas-games.com%2F
I'm having trouble posting my code here ... View Source, though, and you'll see the Meta Property tags in the header and the iframe in the post's footer code (commented out right now).
This is the third time over the course of several months that I've spent hours trying to get this to work, with no luck, so it's not a temporary issue. Any suggestions?
It seems like the structure of the HTML might be the issue as it could be stopping Facebook finding the Open Graph tags.
Fixing these validation errors might allow the tags to be parsed:
http://validator.w3.org/check?uri=http%3A%2F%2Fblog.atlas-games.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Also there are some template variables in the OG tags which aren't being replaced with values:
<meta property="og:title" content="<$BlogItemTitle$>" />
I have the same problem on my blog! And I can't even insert html for the facebook like button directly from facebook developers, into my blog, my blogger blog tells me that the html is erred. I think it has something to do with blogger being a google blog and google now having google+. I noticed all my problems began when google+ came out, I think google is possibly screwing up the facebook like buttons on google sites, to gain monopoly through "share on google+" .
Related
I'm not sure if this is new behaviour or if it didn't work at all.
So I'm using the LinkedIn Customized URL feature, you can look it up here. The URL looks like this:
https://www.linkedin.com/shareArticle?mini=true&url=http://developer.linkedin.com&title=LinkedIn%20Developer%20Network&summary=My%20favorite%20developer%20program&source=LinkedIn
Once I share the URL the provided summary is not shown in the post preview:
So I tried with other services like Youtube, Reddit etc. and all posts do not include the provided summary.
Unfortunately I can't provide you the open-graph tags I used on my site as it's running in a corporate environment and I'm not sure if I can provide these snippets as of now.
However, running linkedin's Post Inspector shows that it detects my summary without problems:
Values are in German if anyone wonders...
So my quick and fairly simple questions, which might be answered in a comment as well, are:
Did linkedin change something on their side?
Is there some other undocumented property which neither youtube nor me included in the customized URL and therefore the summary does not show up?
Is there any post from linkedin developers which note this change?
Was it like that all the time or is it just a temporary thing?
Main Problem People are Experiencing: You cannot display BOTH an image and a description. You may only use one. Indicating an OG tag for image means your description will not display. Source: Arguing with LinkedIn Support for 2 Weeks.
LinkedIn only supports one parameter in their share content now:
https://www.linkedin.com/sharing/share-offsite/?url={url}
Source: Microsoft LinkedIn Share URL Documentation.
If you want to specify title and summary, then you need the og tags, but these are things LinkedIn associates with the URL, and it doesn't populate in the message body.
Otherwise, this works for me:
https://www.linkedin.com/sharing/share-offsite/?url=http://www.wikipedia.org/
Works fine:
If you are interested in a regularly maintained GitHub project that keeps track of this so you don't have to, check it out! Social Share URLs
LinkedIn now uses the Open Graph tags to show the preview.
Below are the og:tags that must exist and their correct format:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
And the sharing url is changed to:
https://www.linkedin.com/sharing/share-offsite/?url=your_encoded_url
Please see this Making Your Website Shareable on LinkedIn
I have a blogger post with multiple images. All the images are uploaded from local drive. My blog post
http://canyoureadit.blogspot.in/2017/02/race-to-oscars-2017-part-2.html
I have followed the article on https://www.addthis.com/academy/how-to-add-open-graph-tags-using-blogger/ to open graph related tags.
It just adds the schema definition at the beginning and then some og tags at the head section of the template. Have not added og:image tag to each image of the post.
Now when i share the post on facebook, i only get the first image as preview. Not able to get the other images. I might be missing something here.
I have even followed this https://gist.github.com/pathawks/1343315 but getting the same results
Best Regards,
Saurav
This is happening because your blog is using a Blogger Dynamic Views template. Dynamic Views template load all the data via JavaScript (including the post HTML)
Currently, Facebook scraper doesn't run JavaScript code (Refer to Facebook scraper doesn't load dynamic meta-tags ) and only infers properties from the meta tags and HTML. In your blog's case, as the post HTML is loaded via JavaScript as well, therefore, Facebook scraper only depends on the meta tags for getting information about the page. You can see a live example of what the Facebook scraper see's when parsing one of your blog post - https://developers.facebook.com/tools/debug/echo/?q=http%3A%2F%2Fcodifyit.blogspot.com%2F2015%2F08%2Fcreate-your-first-php-application-with.html
To resolve this problem, switching away from Dynamic Views template to normal Blogger template would be the best solution. If you are particuarly fond of the Dynamic Views design, you can still access it while using a normal Blogger template by accessing the URL - yourblog.blogspot.com/view - For a live example, check https://blogger.googleblog.com/view
Facebook seems to change things fast.. All existing questions I have seen are older than facebooks "big image" posts, that this question is (partially) related to.
I'm testing Facebook interaction by including meta tags in my page to add a YouTube player as og:video on a page on my site.
All OG tags validate and I can successfully post links and get the video embeded. The problem I get is that while both the Facebook OG Debug Tool and the post does understand the title and description of the page, the post seems to behave strangely when played compared to a youtube link.
Look at the differences here: http://imgur.com/a/kOvkk
I have tried all combinations and order of OG tags I can think of, but I cannot seem to get the same result from my page link as I get from the YouTube link. And since the Facebook Debugger Sees the exact same values, I can not see how they are interpreted so differently..?
Here is the OG Debugger Comparison: http://i.imgur.com/dqok8aG.png
Has anyone else experienced this, or is familiar with the inner workings of Facebook?
The pages used to test are these, although the one on my site might have changed when you read this.
Solved it! The behaviour is triggered by the size of the og-image, and even if I still cannot understand why the youtube link behaves differently with the exact same image url, I can workaround it by manually setting a smaller og:image.
Result: http://i.imgur.com/g5pIN2b.png
The Documentation from facebook isn't understandable, atleast for me.
I have never worked before with facebook and had a basic requirement of putting a like button on Product pages.
So yesterday, I added the OpenGraph meta tags and like button to my Product pages as stated in this documentation, https://developers.facebook.com/docs/opengraph/. I also created an app, as the document stated that it has extended the basic meta data to add a required field to connect your webpage with Facebook: fb:app_id.
The like button has been set but i have few queries which are as following :-
For some pages, the like button doesn't read the og tags. Rather than publishing the whole thing in a story manner by reading og tags, it just shows a link. During googling, I read it happens because of facebook caching and since, I shared the link on facebook before putting the meta-tags, this is happening. So, Is there any way that I can direct facebook to reset all the caching for my pages or scraping that it has done earlier.
Though I have created the App, I actually have no idea what to do with it. Why is it needed and what matters it can help me with.
I tested one of my URLs here: Facebook Linter but it shows some error and stuff which i can't understand. Below is the image. Please tell if I have done anything wrong and why it's showing these errors
Documentation for OpenGraph on Facebook containing outdated information about pre-defined types, see OpenGraph Types. You probably need to define your custom Object Type "Product" in for your Application/Site using Developer Application in Open Graph settings.
You may want to read Documentation for OpenGraph beta too.
Update:
There is a similar question about exactly this og:type: Opengraph meta tag og:type set to “product” errors (like button & URL linter/debug)
When we first put up a blog post, Facebook often (but not always) gets confused about what the page is. Specifically, if you try to use the Like button on the blog page OR if you try to share via the Share link on your profile, Facebook will see the root blog page rather than the actual post page.
For example, we recently posted:
http://thisorthat.com/blog/2010-song-of-the-year-round-1-results
If the user "likes" it, it returns the title for:
"http://thisorthat.com/blog"
When you run the post URL through the FB Linter, you can see the problem.
"http://developers.facebook.com/tools/linter?url=http://thisorthat.com/blog/2010-song-of-the-year-round-1-results"
In the Debug section it shows an extra og:title, og:url, description and og:image (the last 4 rows of the Debug section). This is the meta data from the root directory. What we cannot figure out is why. Why is Facebook seeing the correct meta data on the page and then also pulling the meta data from the root directory (and using that incorrectly to populate the data for the Like button and the Share URL tool)?
One other oddity. FB "figures it out" after a few days. Of course, by that time relatively few people are viewing the post.
UPDATE -- I want to thank Peter Bailey again for his answer, but we also discovered that there was another issue that we had to resolve before the Like button worked.
The issue was that we were displaying the Facebook the Like button on a post that was not yet published. The problem with this is that FB then can't resolve the URL and "guesses" as to the correct URL. In our case, it always guesses thisorthat.com/blog. Unfortunately, it then caches that guess for a number of days and that cache cannot be cleared by the Linter. So the ultimate solution was to both fix the og:type as Peter suggested, but also to remove the Like button from the blog post preview. It's very important that you don't show FB a page before it's published or if you do, change the URL.
Pretty sure it's your Open Graph type that's the problem.
<meta content="website" property="og:type"/>
Per the documentation
Use article for any URL that
represents transient content - such as
a news article, blog post, photo,
video, etc. Do not use website for
this purpose. website and blog are
designed to represent an entire site,
an og:type tag with types website or
blog should usually only appear on the
root of a domain.