May I know can we change the url, image, type, title fields on META fields when we pressing a button to post it on Facebook? e.g.:
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="" />
it is empty when user enter to the site, and the info will be filled in if you pressing a 'submit' button, I know jquery can do this, but may I know is facebook Open graph accept this?
No, it doesn’t work that way.
Facebook’s scraper will visit the OG objects URL and extract the meta data – so that data has to be delivered by your server, on a request that has no connection with what your user may be seeing in their browser at the moment, and the scraper will also not execute any JavaScript.
Related
The Facebook link sharing mechanism goes as follows:
When you want to share a website link to facebook, the facebook crawler will try to recognize you webpage, and determine whether Facebook Open Graph Markup exists within the head tag. If it exists, it will be extracted to be materials in the post when shared.
The question is:
If this is a single page React App, e.g. I want to share a commercial product and I want my post contains its picture and brand name. However, since such data is retrieved asynchronously, the product info is not fetched by the facebook crawler.
The Facebook sharer only looks for the Open Graph Meta Tags. You should make these content ready after the server response. If these content ready after the data is retrieved asynchronously, then the sharer does not work properly.
<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:type" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
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.
I have a job portal website and on that I have a facebook button named as share in fb. I want that when user clicks on that button the that specific job description of my webpage should share on his wall.
<a rel='nofollow' href='http://www.facebook.com/share.php?u=http://testing.com/current_openings.php?JobId=".$jobiid."' target='_blank'>share in fbk</a>
Above link go to share page,but its content is coming from webpage about us page,not specific content.
Set the meta tags for each site you want to be shareable.
Put them in the HTML Header like this
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
The properties include descriptive meta-data about the article that we specifically want to present when
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'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.