Is it possible to insert thumbnail image URL from page properties of Thumbnail tab into og:image inside meta tag. I am able to get values of pageTitle and description properties but not the image. Or is there a better way to handle this?
<meta property="og:url" content="${head.pagePath}" />
<meta property="og:title" content="${properties.pageTitle}" />
<meta property="og:description" content="${properties['jcr:description']}" />
<meta property="og:image" content="imageURL" />
You can reference it as ${properties['image/fileReference']} if it is provided via DAM (so you can use web renditions this way). If the asset is attached to the page itself (uploaded directly) you can use Thumbnail servlet to reference rendered thumbnails using following convention: /content/[path-to-the-page].thumb.319.319.png
AEM creates 48x48, 140x100 and 319x319 thumbnails out of the box, since you are planning to use it for providing reference to reusable image via OpenGraph protocol you might need to customize thumbnails creation workflow to add higher resolution into the pipeline.
Related
I have implemented AddThis sharing functionality in my Umbraco CMS website.
<meta property="og:title" content="AddThis Tour" />
<meta property="og:description" content="Watch the AddThis Tour video." />
<meta property="og:image" content="http://i2.ytimg.com/vi/1F7DKyFt5pY/default.jpg" />
In their documentation they mentioned if we pass image in meta tage like below it will showing up in share popup. I have puted all meta tags in my pages and tried that but image, description and title are not coming up from meta tags.
http://www.addthis.com/academy/how-to-optimize-facebook-sharing/
Even while in facebook popup window in URL Description, Title and Image are same as that provided in meta tags but in Actual sharing, it is displaying different title and description.
I tried Addtoany sharing tool but in that also not get success same thing happening in that also.
I've set up some OG meta data on my site so that when sharing a link, it displays a nice logo which I have created specifically for Facebook (it's square on a nice coloured background so it looks good on the site.)
However with this in place I am now no longer able to choose any other image. I was hoping for the logo to be the default but for the link sharing to still allow me to scroll through thumbnails from the page. Now it just gives me the option for the logo and nothing else.
Is it possible to set both a specific og:image and still have access to the thumbnails functionality on Facebook?
Here is my metadata:
<meta property="og:image" content="http://www.mysitehere.com/images/oglogo2.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
You find your answer here:
How does Facebook Sharer select Images and other metadata when sharing my URL?
Quote: "You just need to add multiple image meta tags in the order you want them to appear in. The user will then be presented with an image selector dialog."
I read thru this post (How to show particular image as thumbnail while implementing share on Facebook?) but, I'm trying to figure out if it's possible to do this with a Tumblr link and no server space to use. My "og:image" (the main logo) is not 200x200 when Tumblr automatically resizes it to fit and I can't upload an image with a specific filename to Tumblr or tinypic, etc. as far as I know...
Any suggestions for some sort of "hack" for this? Thanks!
Oh and, here's my blog and the image I'd like to use...
http://wckdwrld.tumblr.com
http://24.media.tumblr.com/fe2f85fd86f428568ceb79c0f90921f6/tumblr_mw0zg2eqXq1skzrtzo1_1280.png
(the image uploaded to tumblr as a private post... I've done stuff like this successfully before for things like the background image, etc.)
Add:
<meta property="og:title" content="My Awesome Blog" />
<meta property="og:url" content="http://myawesomeblog.tumblr.com/" />
<meta property="og:image" content="http://example.com/myawesomeimage.png" />
between in <head> tags to Your HTML structure in Customize Blog
(According to Tumblr, You have to define the og:url and og:title tags in your theme's HTML to overwrite the OG meta tags)
Here's an example to share (check its source)
Using graph API, I can set a custom image to be displayed when sharing link from my app. But, when a user shares a link of my website manually, a random image of my website comes in rather than my logo. So, is there a meta tag or something using which I can set a custom image as the image to be displayed in the link description box of facebook? Thanks in advance...
What you want to add are the Open Graph tags so that Facebook can parse your website more easily than its default parsing. The <meta> tags required are
<meta property="og:title" content="Page's Title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://yourwebsite/article" />
<meta property="og:image" content="http://yourwebsite/images/displayImage.jpg" />
Thank you Anvesh. I applied your suggestion, but in my case it is not working, as it should.
If I post my link page to the wall, it's ok, the image is showing. But if I post via url share/sharer.php, image is hidden, except on some web image host like imagilive.com (weird).
But, anyway, after posting the page url in the facebook debugger, all I did which failed before, is done with success.
I can handle the issue this way, but I have to do it with every page. Just imagine you have a photo gallery with each image shareable.
I need a better solution or a fix.
When I link to my website on Facebook a thumbnail comes up but it is not the thumbnail I want to come up. How do I change the thumbnail. It shows the image on the object debugger
http://developers.facebook.com/tools/debug/og/object?q=totelfootball.com
How do I change the image?
I have seen similar posts but want to no a simple solution for the issue? Can it be done on Facebook no coding involved?
you can add into <head></head>
this tag <link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / >
OR change <html> tag to
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
and add into tag <head></head>
this tag
<meta property="og:image" content="http://URL-TO-YOUR-IMAGE" />
Don`t forget to test your link using facebook debug tool
Go to http://developers.facebook.com/tools/debug
Enter the URL following by fbrefresh=CAN_BE_ANYTHING
Examples:
http://www.example.com?fbrefresh=CAN_BE_ANYTHING
http://www.example.com?postid=1234&fbrefresh=CAN_BE_ANYTHING
OR visit:
http://developers.facebook.com/tools/debug/og/object?q=http://www.example.com/?p=3568&fbrefresh=89127348912
I was having the same issue last night, and I got this solution from some website.
Facebook saves your cache thumbnail. The thumbnail will not change even if you delete the image from your server. But Facebook allows you to refresh by using fbrefresh
I hope this helps.
You can choose what thumbnail is displayed by adding an og:image meta tag to the HTML of totelfootball.com:
https://developers.facebook.com/docs/opengraph/
Facebook uses meta tags on the page you're sharing to determine which image, title, and description to show when posting a link. The meta tag syntax follows Facebook's OpenGraph specification.
The most important meta tags you need to define are:
<meta property="og:title" content="The title of the sharing preview" />
<meta property="og:description" content="The first few lines of content below the title" />
<meta property="og:image" content="http://example.com/your-image-1200x630px.jpg" />
This of course only works if you have complete control over the site you’re sharing. If you’re sharing an external link (like a news article), you don’t have access to their site and therefore can’t change the meta tags. I'm using ShareKit.io, which allows you to change the title, description, and image of any link you’re sharing without having to fiddle with meta tags.
Easier than this.
Go to the link you shared. Open it in a new tab.
Right upper corner --> Refresh Share Attachment
New thumbnail image gets fetched and you get an option to choose another.
Hope this helps :)