I see the google see correctly structured data but this data is not prepopulated in share dialog.
Data from google dev tool:
rdfa-node
property:
image: https://s3.amazonaws.com/<bucket>/images/image_200_200.JPG
title: Sandal
url: https://site.amazonaws.com/p/view/27
description: description
type: article
My meta tags:
<meta property="og:image" content="https://s3.amazonaws.com/<bucket>/images/image_200_200.JPG">
<meta property="og:title" content="Sandal">
<meta property="og:url" content="https://site.amazonaws.com/p/view/27">
<meta property="og:description" content="description">
<meta property="og:type" content="article">
code for calling the dialog:
<a class="gplus in-popup" sm_type="gplus" href="https://plus.google.com/share?url=https://site.amazonaws.com/p/view/27"></a>
Image is 200*200 px. I tried 900*900 and 120*120 - the same.
Everything looks good, but I still can see only url in the share dialog.
Is it possible that it is because image is from another host?
Maybe some other things?
Have you tried using snippet microdata? Use the snippet tool on the Google+ developers page to generate it.
The following example illustrates how your Microdata would be entered:
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Add the following three tags inside head. -->
<meta itemprop="name" content="Sandal">
<meta itemprop="description" content="description">
<meta itemprop="image" content="https://s3.amazonaws.com/<bucket>/images/image_200_200.JPG">
Related
I'd like to show a share dialog using URL Redirection as described here : https://developers.facebook.com/docs/sharing/reference/share-dialog
The example they provide is the following : https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https://developers.facebook.com/tools/explorer
I tried to achieve the same with a custom page I created (with og meta tags), here is the code :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
<!-- Open Graph data -->
<meta property="fb:app_id" content="762471050442760" />
<meta property="og:site_name" content="Facebook Developers" />
<meta property="og:title" content="Documentation for building software with Facebook - APIs, SDKs and Services" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://developers.facebook.com/docs/" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y6/r/YQEGe6GxI_M.png" />
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="Learn how to integrate with Facebook's APIs and developer tools to drive growth and engagement to your app, website or content." />
</head>
<body>
</body>
</html>
This page is stored at this location (fake location here) -> www.mysite.com/test.html
Now I try to use the following link to share : https://www.facebook.com/dialog/share?app_id=MY_APP_ID&display=popup&href=www.mysite.com/test.html&redirect_uri=www.mysite.com
But I don't get the same result as the example they provide. Instead I get some image and description from another website (not at all the one I created with og meta tags).
How can I solve that and customize my share dialog ?
Thanks
It was a cache problem. I managed to refresh this by going to https://developers.facebook.com/tools/debug/ with the following Input URL www.mysite.com/test.html
Is there any HTML/PHP/jQuery code to share picture on twitter and facebook? Not just the src of picture, but to display the picture on the sharing screen.
There's PHP & HTML, but not jQuery
Facebook
Facebook has something called Open Graph Protocol, to install them add the following meta tag between <head> of your page
<meta property="og:title" content="My awesome website title" />
<meta property="og:type" content="website" />
<meta property="og:description" content="my example website is on facebook!" />
<meta property="og:url" content="http://example.com" />
<meta property="og:image" content="http://example.com/og_img.jpg" />
Twitter
On the other hand Twitter provide its own meta tags called Twitter Cards to install it
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://example.com">
<meta name="twitter:title" content="My awesome website title">
<meta name="twitter:description" content="my example website is on twitter">
<meta name="twitter:image" content="http://example.com/og_img.jpg" />
Hint
PHP renders a HTML output, but the benefits of PHP is to deal with different page without editing each page meta tags every time you change your meta tags OR if you have a blog and each post has its own permalink and its own title, description, image .. etc, PHP comes handy!
Further reading
Open Graph Protocol
Twitter Cards
How to Create a Twitter Card - David Walsh Blog
I have done several searches trying to find a solution with no luck. I'm hoping someone here can help.
For a while I was having a problem with my links on Facebook not showing the thumbnail or the description to my blog posts. They just showed a standard description and always linked to my home page. I was able to fix that issue by changing the metadata to the following:
<meta property="og:type" content="article" />
<meta property="og:url" content="<?= "http://www.calsots.com".$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:title" content="<?= urldecode($_GET['title']) ?>" />
<meta property="og:description" content="<?= urldecode($_GET['description']) ?>" />
<meta property="og:image" content="<?= $_GET['image'] ?>" />
Now, I'm having an issue with G+. When I post a link the thumbnail doesn't show and there is no description. Any thoughts on how to fix this? I do have additional metadata for G+.
<meta itemprop="name" content="">
<meta itemprop="description" content="">
<meta itemprop="image" content="">
I have tried changing the content to calls, direct descriptions, I've left it blank and I even removed it but nothing is working.
The markup for the Google+ fragment you've provided isn't a full schema.org microdata set. Although it provides the data, you haven't shown if the page itself is setup correctly to indicate the itemscope and itemtype. You should also avoid the meta tags themselves, if possible, instead indicating the itemprop attribute on existing page elements.
See http://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035 for more information about microdata in general, http://schema.org/docs/gs.html#microdata_how for details about how to markup your page with microdata, and https://www.google.com/webmasters/tools/richsnippets for the structured data testing tool, which can help determine how Google sees your page.
The facebook like plugin (used as iframe) still not working for the website i work.
I'm aware for the problems that ocurred last week but I don't even have the debugger working for the URLs.
Example:
simple article
In the image below you can see where the fb:like button should appear.
The same URL of the article above at the facebook URL debugger (link) show no response about the open graph tags - and all the meta tags are ok in my point of view:
<meta property="og:url" content="http://extra.globo.com/famosos/zilu-assume-pela-primeira-vez-que-esta-separada-de-zeze-di-camargo-vida-continua-5767649.html"/>
<meta property="og:title" content="Zilu assume pela primeira vez que está separada de Zezé Di Camargo: ‘A vida continua’" />
<meta property="og:locale" content="pt_BR">
<meta property="og:type" content="article" />
<meta property="og:image" content="http://extra.globo.com/incoming/5767648-1c6-157/w107h60-PROP/zilu-zeze-dicamargo.jpg"/>
<meta property="og:site_name" content="Extra Online" />
<meta property="fb:app_id" content="205680889447721"/>
<meta property="fb:admins" content="100000043813964" />
Actually, there is one non-closed meta tag og_type but it isn't the real problem (meta at w3schools - section Differences Between HTML and XHTML and the page doctype is HTML).
There is a possibility of a problem not in the website but at facebook?
I would try to put the Like button iFrame outside of the <div
id="fb-root">, it does not belong there. Put it below the <div
id="fb-root"> and use a div with another id if you need to wrap it.
For the debug tool problem I would try to place my og meta data above
anything else right behind <meta http-equiv="content-type"
content="text/html; charset=utf-8"> so that nothing odd happens
before the Facebook bot scrapes the info it needs.
<fb:share-button class="meta" type="box_count">
<meta name="title" content="A sample title"/>
<meta name="description" content="A sample title"/>
<link rel="image_src" href="path_to_img" />
<link rel="target_url" href="a sample url"/>
</fb:share-button>
The above code displays the number of shares (or likes) and indeed shares the link on FB, but it does not make use of the meta title or description. I would like to push the title/description to Facebook. Is it possible and if so, what am I doing wrong?
Update : ultimately, i would like to use the share functionality as 'i support cause X'. So when a user clicks the share button, it offers to send to that user's feed: I supported cause x on www.site.com. Does this make any sense?
Put the title and description in of the page you are sharing as described here:
<head>
<meta property="og:site_name" content="HeartBooth"/>
<meta property="og:title" content="HeartBooth gallery"/>
...