Recently a change is observed in the Post UI for images. It shows caption and link name on the image besides showing the same in the RHS of the image. Post snippet is attached. I tried using large image but even then post shows caption on the image itself. How can I avoid showing caption and other stuff on the image?
I am using following metatags:
<meta property="og:video:height" content="30" />
<meta property="og:video:width" content="600" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="fb:app_id" content="${appId}"/>
See attached snippets.
Related
My site contain all the meta tags required to share on facebook. image, url, site_name, app_id, title , description etc. all the necessary things.
But when somebody share the page, it doesnot show full preview of the image on some phone. On web and some other phone its working fine.
I tried everything. I read full documentation of facebook about web sharing. I tried recommended size of 1200x630 pixel, also the minimum size of 600x315 pixel. Issue is still there. Setting og:image:width and height manually don't really make any change also.
``` <meta property="fb:app_id" content="<<PAGE ID>>" />
<meta property="og:site_name" content="<<Site Name>>" />
<meta property="og:url" content="<<URL>>" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Some title" />
<meta property="og:description" content="Play now" />
<meta property="og:image" content="<<image url>>" />
```
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...
Despite seemingly following all the guidelines for including Open Graph objects in my code, I cannot get Facebook to display my images correctly in the share dialog. These are the meta tags that my website currently provides:
<meta property="og:url"content="http://tombakas.com/delfinariumas/5" />
<meta property="og:type" content="website">
<meta property="og:title" content="Delfinariumas"/>
<meta property="og:description" content="Moderni išmintis per patikrintas lūpas"/>
<link rel="image_src" type="image/png href="http://tombakas.com/static/delfinariumas/thumbnails/5.png" />
<meta property="og:image" content="http://tombakas.com/static/delfinariumas/thumbnails/5.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<meta property="og:image:type" content="image/png" />
The image is of the 600x315 dimensions, the minimum accepted according to the specification. Regardless, it is still being previewed as a cropped square, instead of showing it at full size. I've scanned the forums and SO to no avail, so I'm really flabbergasted.
Any help would be very appreciated. Thank you!
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
I'm trying to implement a basic Facebook like functionality to a site. I've triple-checked & more the meta tags, but the og:description -text doesn't show up in the FB news feed. The title and the image work fine.
Here's the code:
<meta property="og:type" content="article" />
<meta property="og:title" content="SOG – VEITSIÄ VIIDAKOSTA ARKITÖIHIN" />
<meta property="og:url" content="http://www.finnprotec.fi/webshop/news/2" />
<meta property="og:description" content="Kunhan kirjoitan vaan jotain tekstia nyt." />
<meta property="og:site_name" content="Finnprotec.fi" />
<meta property="og:image" content="http://www.finnprotec.fi/webshop/kuvat/kuva517a8539a91f1.jpg" />
<meta property="fb:admins" content="6700009220" />
<meta property="fb:app_id" content="348235131938688" />
When I click on the link on the page, the description shows up nicely under the title:
But when I click on the send button, this shows up on my FB feed:
This is what I'm trying to get:
The url of the current page is: http://www.finnprotec.fi/webshop/news/2
I have tried to clear facebook's cache with the facebook linter, but that hasn't helped.
I just ran into this. I found that the description is actually there - you have to hover over the image to see it. It shows it in the format you want sometimes, depending on the size of the post where you're viewing it.
For example, after I've liked my post, I don't see the description in the post shown when I click on my name and view my wall (where the posts are smaller).
But I do see it when I just go to facebook.com and I view the larger version shown in my stream.
I realize this isn't really answering the question; I couldn't find a way to get it to show the description consistently.
add this two lines to your code after og:image
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
it must work