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="" />
Related
I am trying to share my web page on facebook. However, it just shows wrong url,image and all other data crawled seems to be incorrect .
This is what I have as per testing :
<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" />
But it shows wrong data and none of the information from above tags is grabbed when sharing.
Facebook caches the OpenGraph data -- the data stored in your og tags. To reset the cached data, you can go to this page and ask Facebook to scrape your website again:
https://developers.facebook.com/tools/debug/og/object?
You need to press the scrape button to refresh the cache in Facebook. otherwise it won't refresh itself regularly. Facebook debugger screenshot
You can also try this simple web app to share with a custom image you want: http://come.toTheTerminal.com
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.
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.
I build new web site. On every post in my web site I have facebook Like button.
When visitor click on like button post don't appear on his-user home page , only in his profile page.
Can someone tell me why post(like) don't appear on home page?
I use code generated from http://developers.facebook.com/docs/reference/plugins/like (iframe)
Thanks
I remember running into this problem several months ago. This solved the problem for me (then), but the situation may have changed by now. Just put the meta data in the head with the desired info. It may take a while for facebook to notice that you have changed anything.
<meta property="og:site_name" content="Lime" />
<meta property="og:title" content="Lime Title" />
<meta property="og:type" content="article" />
<meta property="og:description" content="With more and more Lime [...]" />
<meta property="og:image" content="" />
<meta property="og:url" content="http://example.com/" />
<!--meta property="fb:page_id" content="18807449704" /-->
Do you mean the news feed in the facebook user's home page?!
It's not used to show the user's actions, read this:
News Feed — the center column of your
home page — is a constantly updating
list of stories from people and Pages
that you follow on Facebook.