This is driving me mental! I have page which has a share button on it, for arguments sake I have hard coded the image name and title in the controller as shown here
public ActionResult ThankYou()
{
var model = new LabCombination
{
ImageCombination = "danone_ultimate_coconut_vanilla.png",
ImageTitle = "danone_ultimate_coconut_vanilla"
};
return View(model);
}
In my view I do this
<meta property="og:title" content="Check out the flavour I just made! #Model.ImageTitle" />
<meta property="og:description" content="Check out the flavour I have just created!" />
<meta property="og:image" content="http://danone.staging-eurorscg.com.au/Content/Images/FlavourLab/CombinationSmall/#Model.ImageCombination" />
<meta property="og:url" content="http://danone.staging-eurorscg.com.au/thank-you" />
which renders as follows
<meta property="og:title" content="Check out the flavour I just made! danone_ultimate_coconut_vanilla" />
<meta property="og:description" content="Check out the flavour I have just created!" />
<meta property="og:image" content="http://danone.staging-eurorscg.com.au/Content/Images/FlavourLab/CombinationSmall/danone_ultimate_coconut_vanilla.png" />
<meta property="og:url" content="http://danone.staging-eurorscg.com.au/thank-you" />
When I do the facebook scraper I see this
yet when I go to the page a press share I see this
Why is facebook not refreshing! I have cleared the cache in my browser!
You can scrap the page here
https://developers.facebook.com/tools/debug/og/object/
with the following url
http://danone.staging-eurorscg.com.au/thank-you
Any help would be appreciated
** Update ** As I set the mete data dynamically, it caches the original information as shown here, what you see in the middle of the screen i.e the image should be also displayed in the shared dialog
My Meta data looks like this
<meta property="og:title" content="Check out the flavour I just made! Strawberry & Honey" />
<meta property="og:description" content="Check out the flavour I have just created!" />
<meta property="og:image" content="http://danone.staging-eurorscg.com.au/Content/Images/FlavourLab/CombinationSmall/danone_ultimate_strawberry_honey.png" />
<meta property="og:url" content="http://danone.staging-eurorscg.com.au/thank-you" />
As you can see it has all the correct meta data.
That is because your share button is trying to share the url http://danone.staging-eurorscg.com.au/flavour-lab and not http://danone.staging-eurorscg.com.au/thank-you
Add the following og meta tag, with the current epoch time:
<meta property="og:updated_time" content="1431713584" />
You can force Facebook to update it's cache using debugger tool. It used to be called url linter.
https://developers.facebook.com/tools/debug/
Related
I have read quite a number of SO post on the topic however my problem still persists : Facebook sees my meta tags as raw tag found but does not display or include image during the open graph display. This is the Url i am trying to post on facebook :
https://holyunions.com/govt-releases-gh-cent-465-million-for-start-of-one-district-one-factory-project-general-language-en-article-118
And This is my output of my code
<meta property="og:title" content="Govt releases GH¢465 million for start of one-district-one factory project - General :. Twum Barimah" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://holyunions.com/govt-releases-gh-cent-465-million-for-start-of-one-district-one-factory-project-general-language-en-article-118" />
<meta property="og:description" content=""/>
<meta property="fb:app_id" content="532235306919626"/>
<meta property="og:image" content="http://holyunions.com/js/max_john_richeditor/lib/tiny_mce/plugins/openmanager/uploads/images/image_11_04_2017_12_24_02_1491913442-42.png" />
<meta property="og:image:secure_url" content="https://holyunions.com/js/max_john_richeditor/lib/tiny_mce/plugins/openmanager/uploads/images/image_11_04_2017_12_24_02_1491913442-42.png" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="285" />
<meta property="og:site_name" content="Holy Unions : Home of Marriages" />
<meta property="fb:admins" content="100004005747278"/>
The og image properties are well defined however Facebook after displaying them as tags, still does not fetch the image neither does it display the image nor the description in the open graph properties.
How do I display the image that facebook sees as url ?
I used Open Graph protocol for sharing pages via LinkedIn. I've added multiple tags og:image, but when I try to share, in share dialog I have first image from meta tags and 2 another from page content.
Can somebody tell, how to manage multiple images sharing using OG.
Code example:
<meta property="og:url" content="websiteUrl" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Test Title" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://tamgdeya.ru/photos/norm/1/1_jS37XHMl.jpg" />
<meta property="og:image" content="http://img.brothersoft.com/screenshots/softimage/n/nature_illusion_studio-44987-1300868181.jpeg" />
Share dialog: http://prntscr.com/bcxwi9
I have a problem whenever I try to click my share button for the first time...
It's not seeing my og:image, but it's seeing my site logo instead.
See: http://d.pr/i/NIQZ
But for the second share and/or second attempt of clicking the share icon again, it begins to load the correct og:image or rather the thumbnail.
Proof: http://d.pr/i/vWAg
Here are my meta tags:
<meta property="og:image" content="http://stmaws.s3.amazonaws.com/thumbs/53184e19fd3401484600109b.jpg?AWSAccessKeyId=AKIAJQPNZH4P5E5ZY4LQ&Expires=1394388088&Signature=QTgflfyCzyIXVB%2BrMn2hBRw6srM%3D" />
<meta property="og:image:secure_url" content="https://stmaws.s3.amazonaws.com/thumbs/http://stmaws.s3.amazonaws.com/thumbs/53184e19fd3401484600109b.jpg?AWSAccessKeyId=AKIAJQPNZH4P5E5ZY4LQ&Expires=1394388088&Signature=QTgflfyCzyIXVB%2BrMn2hBRw6srM%3D.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:title" content="Check out what I made on Muserk.com" />
<meta property="og:site_name" content="Check out what I made on Muserk.com" />
<meta property="og:description" content="Muserk.com gives you the ability to legally add music to your videos and share them with the world!" />
<meta property="og:url" content="http://www.muserk.com/video/index/531a092efd3401725c00067f" />
The url that I want to share is: http://www.muserk.com/video/index/531a092efd3401725c00067f
Facebook Debugger tool is showing response code 200 so I can't replicate this issue.
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.muserk.com%2Fvideo%2Findex%2F531a092efd3401725c00067f
Sharer link: https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.muserk.com%2Fvideo%2Findex%2F531a092efd3401725c00067f
PS: I cleared my browser cache like 5 times already and got no luck.
EDITS:
In my app that uses the sharer.php? way of catering share buttons, how can I implement the scrape=true paramater. Any ideas?
Tried to add the parameter to my sharer link but didn't work
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.muserk.com%2Fvideo%2Findex%2F531a092efd3401725c00067f&scrape=true
Hi I'm having trouble in showing the image when sharing a link thru Facebook.
Here are my meta tags:
<meta property="og:image" content="http://stmaws.s3.amazonaws.com/thumbs/<?php echo $meta_thumbnail; ?>.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:title" content="Check out what I made on Muserk.com" />
<meta property="og:site_name" content="Check out what I made on Muserk.com" />
<meta property="og:description" content="Muserk.com gives you the ability to legally add music to your videos and share them with the world!" />
<meta property="og:url" content="http://<?php echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>" />
$meta_thumbnail could be something like this: http://stmaws.s3.amazonaws.com/thumbs/53135cb64f26109a448b4ba6.jpg
My thumbnail image is shared to public so I don't think the problem has something to do with privacy/security.
Image size is 32px of width and 26px of height.
Facebook debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmuserk.sourcepadstage.com%2Fvideo%2Findex%2F5314f1ba4f261098448b519b
Output from Facebook Debugger:
Scrape Information
Response Code 200
Fetched URL http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
Canonical URL http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
Object Properties
og:url http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
og:type website
og:title Check out what I made on Muserk.com
og:image <IMAGE HAS BEEN DISPLAYED HERE>
og:description Muserk.com gives you the ability to legally add music to your videos and share them with the world!
og:site_name Check out what I made on Muserk.com
og:updated_time 1393881547
Raw Open Graph Document Information
Meta Tag <meta property="og:image" content="http://stmaws.s3.amazonaws.com/thumbs/53135cb64f26109a448b4ba6.jpg" />
Meta Tag <meta property="og:image:type" content="image/jpeg" />
Meta Tag <meta property="og:image:width" content="300" />
Meta Tag <meta property="og:image:height" content="300" />
Meta Tag <meta property="og:title" content="Check out what I made on Muserk.com" />
Meta Tag <meta property="og:site_name" content="Check out what I made on Muserk.com" />
Meta Tag <meta property="og:description" content="Muserk.com gives you the ability to legally add music to your videos and share them with the world!" />
Meta Tag <meta property="og:url" content="http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b" />
URLs
Graph API https://graph.facebook.com/642413225848487
Scraped URL See exactly what our scraper sees for your URL
EDITS:
Hi I tried to continue sharing the link and it was displayed:
http://d.pr/i/mu2T
But I wonder why it is not showing while sharing the link: http://d.pr/i/9j3l
Your image is way too small, these are the recommendations:
Minimum 600x315px
Recommended: 1200x630px
Ratio should be 1.91:1
Also, i get an error when i try your Debugger link: "Error parsing input URL, no data was scraped."
Make sure all data is public so Facebook can scrape it.
I have this website with dynamic pages. Now there's a page with an overview of all articles and a page with detailed view that shows the complete article when you click it's title on the overview page. The URL of the detail page is something like this for example:
http://www.mysite.com/view.php?ID=43
Now i want to implement the facebook like button that only shows on the detailed page on the bottom of each article. I've found out that i have to use the Open Graph meta tags like below
<meta property="og:title" content="My title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="My url" />
<meta property="og:image" content="my img" />
<meta property="og:site_name" content="My site name" />
<meta property="fb:admins" content="admin number" />
Now my question is, how do i dynamically fill in the content values of each meta property? So that each article has it's 'own' like button. Is there a way to print php statements inside or something?
Yes you can dynamically fill these values the same way you would dynamically fill any parameter or element in your HTML.
<meta property="og:title" content="<?php print $title; ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="myurl/<?php print $articleurl; ?>" />
<meta property="og:image" content="<?php print $article_image; ?>" />
<meta property="og:site_name" content="My site name" />
<meta property="fb:admins" content="admin number" />
Don't forget to use http://developers.facebook.com/tools/debug to check your OGP tags are being interpreted as you desire. Facebook is very strict with it's expectations to follow protocol.