I am confused how to go about this problem I have. On my site, after a user fills out a form, an image is generated on the canvas element.
This is the image I want the user to be able to share on facebook through a share dialog. Now I know how to convert from canvas to png, but not before the page has loaded.
Using opengraph like this works,
<meta property="og:image" content="sample_chart.png" />
only if the image is an existing png. And there seems no way to add an image to this property once the user has arrived at the page.
What can I do? Thanks!
If the user generates the image, store it on your server and generate a unique URL for that image that contains the direct URL to the image in the Open Graph tags of that page.
For example, this is how the markup of that page could look like:
<html>
<head>
<meta property="og:image" content="http://example.com/path/to/image.png" />
<meta property="og:url" content="http://example.com/awesome/image.html" />
<meta property="og:title" content="A title" />
<meta property="og:description" content="A description" />
</head>
<body>
<img src="http://example.com/path/to/image.png" />
</body>
</html>
Related
When I share a link on tumblr, it sometimes will grab the page's blog post image. For example, if I share something like:
http://www.smartpassiveincome.com/income-reports/my-may-2016-monthly-income-report/
It'll grab this image for it's thumbnail:
http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg
How do you make tumblr grab the image? Is there some meta tag you need to include?
Searching the source code this image appears three times:
<meta property="og:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>
<meta name="twitter:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>
<header style="background-image: url('http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg')">
Does anyone know which one it uses and could explain what the process for choosing how to grab the image is?
The original page is: http://www.patchesoft.com/learning-linux-how-to-find-what-version-of-linux-youre-running-command-uname-and-lsb_release/
But when I post it into Tumblr, it doesn't grab the featured image.
These meta properties should get your image to show on tumblr
<meta property="og:image" content="http://example.com/ogp.jpg" /> <!-- Required -->
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
To learn more head over to http://ogp.me/
Your site seems to have these properties set and I get this when I put url of your site on tumblr...
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 added the tag in my page but it not fetching the image while LinkedIn sharing .
I want to know to how to customize a image while share in LinkedIn using.
http://www.linkedin.com/shareArticle?mini=true'+'&url='+articleUrl+'&title='+articleTitle+ '&summary='+articleSummary+'&source='+articleSource
please let me know what to do fetch the image while sharing on LinkedIn.
http://www.linkedin.com/cws/share?token&isFramed=false&url=http%3A%2F%2Fwpsites.net%2Fweb-design%2Fstyle-jetpacks-social-sharing-sharedaddy-buttons%2F
use this on browser its work with image.
in url that you like to share that page required image then and then only image will display on share tabs
URL that you like to share that must be live on net.
image auto fetch from given URL. please try with some valid url that have image tag
Use the metatags on your html page to indicate the crawler how to present the link, there's an image property too:
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />
</head>
<body>
…
</body>
</html>
Source: https://developer.linkedin.com/docs/share-on-linkedin#methods
i am having some tweets like things and i would like to post that custom text with facebook like button. is it possible if yes then how.
thanks
Use Open Graph Tags:
Put this tags on your page head section:
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta property="og:image" content="custom image path" />
<meta property="og:site_name" content="name of the website" />
<meta property="og:title" content="custom title" />
<meta property="og:url" content="url of the page" />
<meta property="og:description" content="custom description" />
<meta property="og:type" content="website/article/game etc.." />
</head>
use Linter to check your custom properties has affected.
More about Opengraph tags
You should add OpenGraph meta tags to the page located on URL you linking your like button. Once user click on Like Button Facebook crawl that page and post content of OG tags to feed.
Read more on Like Button documentation and Open Graph protocol
Although it is true as both the other commenters say you would need to create a facebook app which then would require a secure canvas URL in the end to be verified. Hence the obstacle is quite high.
<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"/>
...