I'm following the advise of FB's tutorial here and I even used their open graph generator:
http://developers.facebook.com/docs/reference/plugins/like/
but my like message does not use this data. It uses outdated info from the site that I've changed awhile ago.
I've just added my open graph tags and they look like this:
<meta property="og:title" content="Test Title" />
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://foo.com" />
<meta property="og:image" content="http://foo.com/images/image.jpg" />
<meta property="og:site_name" content="Foo" />
<meta property="og:description" content="Hey, check out this thing" />
<meta property="fb:admins" content="Foo" />
And yet when I enter my site into Linter, it says I'm missing all the required meta tags (title, type url, etc).
It says it takes 24 hours to scrape so maybe I just need to wait but it also said that if I enter my site into Linter that it'll work right away.
What am I doing wrong?
If you run your url through the linter it will automatically scrape your page and update facebook's cache with your new OG tags. If you're not seeing this behavior, it's either a bug or you're not entering the exact url where your page exists containing these OG tags, or your like button references an outdated URL.
Related
I'm building an image on the fly to attach to page to be shared on facebook. Everything seems to be going great until it hits the share dialog. Facebook doesn't seem to be scraping, because the image isn't showing up. If I refresh that dialog page, it does load the image (having crawled it from the first go?).
I've read several pages that say I need only specify og:image:width and og:image:height to allow for immediate rendering, but that doesn’t seem to be working. Here are my meta tags:
<meta property="fb:app_id" content="###"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="###" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My Page Description" />
<meta property="og:image" content="http://the-domain/the-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
Am I missing something here?
For these kinds of issues, I recommend checking out the debugging tool that Facebook provides. It's great for quick identification of show stopping errors like you're receiving.
https://developers.facebook.com/tools/debug/
Just a couple of things to keep in mind, sometimes the image or page will time out if Facebook finds that it's taking longer than 1s to fetch the data. I've also found issues with my own implementations if the og:url is different than the page you're expecting Facebook to fetch. The two values must match, because ultimately it's the og:url value that facebook is trying to scrape.
Just wondering what HTML5 element is shown as the image for a Facebook post which contains a preview of the URL mentioned in the post?
I want to post a link to my website and have my logo appear in the image box of the URL preview...
Hopefully my question makes sense.
You can achieve that by adding Facebook specific OpenGraph meta tags in the header of your webpage.
Here are the meta tags you need to add
<meta property="og:url" content="WEBSITE LINK" />
<meta property="og:type" content="article" />
<meta property="og:title" content="IT WILL APPEAR IN BIG FONTS" />
<meta property="og:description" content="THIS WILL BE SUBTEXT" />
<meta property="og:image" content="LINK OF THE IMAGE" />
you can check out meta tags in details here
Also to verify how it will look and what actually Facebook sees through meta tags you can go to the Open Graph Object Debugger
Example shows what will be seen once you try to share https://images.google.com
Hope this is what you are looking for.
I have been struggling with this for many hours now and have not gotten anywhere.
I have the following metatags:
<meta property="og:type" content="website" />
<meta property="og:title" content="I'm going to see Speaker name" />
<meta property="og:description" content="This is the description of the speaker" />
<meta property="og:url" content="http://example.com/Speakers.aspx?speaker=35" />
<meta property="og:image" content="http://example.com/test.jpg" />
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">
After running this URL through the Facebook debug tool, I was given the following error message:
Object at URL 'http://example.com/Speakers.aspx?speaker=35' of type 'website' is invalid because a required property 'og:image:url' of type 'url' was not provided.
According to Open Graph protocol (http://ogp.me/#structured), the og:image & og:image:url are identical, but I tried to add it anyways:
<meta property="og:image:url" content="http://example.com/RGDDT/images/test.jpg" />
<meta property="og:image:type" content="image/jpeg" />
However the first 7 images on the page are still being scraped instead of the one I want to use.
Any insights would be greatly appreciated!
This is probably the best article on which metatags you need. Facebook requires you to have an id, in order to use even a Like button now a days. I don't see those metatags in your snippet. Try adding:
<meta property="fb:app_id" content="1111111111111111" />
<meta property="fb:admins" content="2222222222" />
The first is your app_id number, it seems you need to turn even your blog into an app to make Facebook happy. The second is your personal id number, you can also use your Fan Page if you have one. Including these things seems to make Facebook happy and I think you get Analytics for your troubles.
So I've finally solved this problem.
Problem #1: I was using 'permanent' URLs (/getmedia/3c87abee-1cd0-4ca3-a07d-b7d8fde8ec4b/irma1.jpg.aspx?width=437&height=434&ext=.jpg) instead of 'direct' URLs (/RGDDT/media/RGDDT/Speakers/facebook-share/irma-boom.jpg?width=600&height=315&ext=.jpg). This was a setting I was able to configure in Kentico (the CMS we have used to build this site)
Problem #2: I was getting the results I wanted in the Facebook debug tool, but they were being cached when I tried to share from the live site. Thanks to this article I was able to solve that problem by adding '&v=1' (or '?v=1' if you don't already have a query string at the end of your URL), so Facebook considered this a new page request and didn't cache the description I had hardcoded in as of this morning.
I'm trying to implement a basic Facebook like functionality to a site. I've triple-checked & more the meta tags, but the og:description -text doesn't show up in the FB news feed. The title and the image work fine.
Here's the code:
<meta property="og:type" content="article" />
<meta property="og:title" content="SOG – VEITSIÄ VIIDAKOSTA ARKITÖIHIN" />
<meta property="og:url" content="http://www.finnprotec.fi/webshop/news/2" />
<meta property="og:description" content="Kunhan kirjoitan vaan jotain tekstia nyt." />
<meta property="og:site_name" content="Finnprotec.fi" />
<meta property="og:image" content="http://www.finnprotec.fi/webshop/kuvat/kuva517a8539a91f1.jpg" />
<meta property="fb:admins" content="6700009220" />
<meta property="fb:app_id" content="348235131938688" />
When I click on the link on the page, the description shows up nicely under the title:
But when I click on the send button, this shows up on my FB feed:
This is what I'm trying to get:
The url of the current page is: http://www.finnprotec.fi/webshop/news/2
I have tried to clear facebook's cache with the facebook linter, but that hasn't helped.
I just ran into this. I found that the description is actually there - you have to hover over the image to see it. It shows it in the format you want sometimes, depending on the size of the post where you're viewing it.
For example, after I've liked my post, I don't see the description in the post shown when I click on my name and view my wall (where the posts are smaller).
But I do see it when I just go to facebook.com and I view the larger version shown in my stream.
I realize this isn't really answering the question; I couldn't find a way to get it to show the description consistently.
add this two lines to your code after og:image
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
it must work
I have a very simple test page at http://student.cqu.edu.au/s0147794/.
It has an og:url in its header that redirects to http://student.cqu.edu.au/s0147794/next.html, which has og:title, og:description and og:url properties. I run the first link through Linter, and all looks good. There are no errors or warnings, and I can see my properties being recognised as below.
og:url `http://student.cqu.edu.au/s0147794/next.html
og:type website
og:title FFFFFFFFFFFFFFFFFFF
og:description DO NOT Ignore this one
og:updated_time 1329102748
However, when I actually click the Like button, and post to my facebook wall...
My Name liked a Link. 12 seconds ago
<-- Title should be here
`http://student.cqu.edu.au/s0147794/next.html <-- Correct URL
student.cqu.edu.au <-- This should be the description
Like · · Share
All I get is a link to the page, and a link to the domain underneath it, where the description should be.
You need to place all og meta tags on the same page so it will start working fine.
Place them in header as defined in like plugin in api
<meta property="og:title" content="My Title" />
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://www.site.com" />
<meta property="og:image" content="http://www.simplyzesty.com/wp-content/uploads/2012/02/Facebook-logo.png" />
<meta property="og:site_name" content="My Site" />
<meta property="fb:admins" content="You User ID" />