I tried facebook share. i added everything on my head tag like og:image,og:title,og:description but it is not showing the image when share it on facebook. When i debug it using facebook preview it shows og:image url but not as preview.
<meta property="og:title" content="Lorem Ipsum" />
<meta property="og:description" content="Lorem Ipsum Lorem Ipsum Lorem Ipsum" />
<meta property="og:image" content="images/OG_image.png" />
Related
I'm trying to make sure that when my website is shared the correct meta information is displayed. I thought I had it working but I'm experiencing a few issues on different social websites, as follows:
Twitter pulls in the text but doesn't display the specified image.
LinkedIn displays text but seems to use the wrong image so it's stretched.
Facebook doesn't display anything. If I post the URL, that's all that's displayed as a hyperlink.
Originally I just had the meta name="twitter: stuff but have since added the meta property="og: above it as I was told that was needed for LinkedIn.
This is the meta/OpenGraph data I'm using in my website head:
<!-- OpenGraph -->
<meta property="og:title" content="myurl.com - What this website is" />
<meta property="og:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod." />
<meta property="og:url" content="http://myurl.com" />
<meta property="og:image" content="/img/site/linkedin-media-image.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="#twitteruser">
<meta name="twitter:url" content="https://myurl.com">
<meta name="twitter:title" content="I am a lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.">
<meta name="twitter:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.">
<meta name="twitter:image" content="/img/site/social-logo.png">
Can anyone spot what I'm missing? Twitter seems ok, aside from the image not display and the URL is correct. While LinkedIn doesn't use the og correctly and Facebook is non-existent?
Thanks in advance.
Image requires a full path, I tried relative as well but didn't work.
Your use of "twitter:url", "twitter:title", twitter:description" and "twitter:image" is redundant unless you want different behavior for twitter only. If these tags are not found, twitter will fall back to OGP tags.
For Facebook, you might be missing the following :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
Tools to debug OG preview :
Facebook
Twitter
LinkedIn
My problem is, LinkedIn seems to stretch the image in spite of their documentation saying that minimum size is 80 x 150px to prevent it from being artificially stretched to fit the layout.
Try to include the full path of the image. Also with facebook you may need to scrape the page again.
If you go to this page https://developers.facebook.com/tools/debug/ enter your site it should show you any errors. You will also need to hit the scrape again button when you make any changes
This page: http://viralsport.se/4-Crazy-mal-av-Svenska-landslaget-mot-Island.html for example.
In header i have this code:
<meta property="og:site_name" content="Viralsport" />
<meta property="og:title" content="Crazy mål av Svenska landslaget mot Island" />
<meta property="og:description" content="Ett av de märkligaste målen Svenska landslaget har gjort" />
<meta property="og:url" content="http://www.viralsport.se/4-Crazy-mal-av-Svenska-landslaget-mot-Island.html" />
<meta property="og:image" content="http://gfx2.aftonbladet-cdn.se/image/10714609/485/normal/483e194e3fdfc/Ska+inte+till+aik" />
<link rel="image_src" href="http://gfx2.aftonbladet-cdn.se/image/10714609/485/normal/483e194e3fdfc/Ska+inte+till+aik" />
When I share on Facebook as it selects a completely different picture and no text at all.
What have I done wrong?
Thanks in advance
I refreshed the info in the debugger, now the correct image shows up. Just enter the URL in the debugger and you will see a button called "Fetch new scrape information" next time it does not use the correct data: https://developers.facebook.com/tools/debug/og/object/
Also, make sure the og-image follows the specification about size and aspect ratio: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
I have incorporated facebook like button in my application
Suppose you like this page
https://developers.facebook.com/blog/post/397/
Then, when you go to your facebook wall, you will see "fb_account_name" likes an article on developers.facebook.com.
I want my like to work in this way. My like button is not working in this manner, it does not show my website name with sentence like "fb_account_name" likes an article on
I have get my code from here https://developers.facebook.com/docs/reference/plugins/like/
What should i do ?
The open graph protocol
In your page head tags, Add:
<meta property="og:site_name" content="Site Name" />
<meta property="og:title" content="Page Title" />
<meta property="og:type" content="article" /> // site type (og type)
<meta property="og:url" content="http://example.test/" />
<meta property="og:image" content="http://example.test/og_image.png" /> // can be .jpg, too
<meta property="og:description" content="A sentence describes your site purpose" />
Those above will help Facebook to understand "How to publish the user action on their timeline" when hits the "Like" button
<div class="fb-like" data-href="http://example.test/myPage.html" data-width="450" data-show-faces="true" data-send="true"></div>
And remember to include Facebook JS
I have a website with many video pages. There is only one video on each page.
When i share a link of one of these pages on facebook, it is not considered as a video, but only a standard article.
Thumbnail, Title and Decription are well displayed. But instead of displaying the thumbnail, i would like Facebook to display the video.
I'm using videoJS as video player.
Here is my html header:
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page Description" />
<meta property="fb:admins" content="ADMIN-ID" />
<meta property="fb:app_id" content="APP-ID" />
<meta property="og:image" content="/path/to/the/thumbnail.jpg" />
<meta property="og:type" content="video" />
<meta property="og:url" content="www.domain.com/video.html" />
<meta property="og:video" content="www.domain.com/video.mp4" />
<meta property="og:video:type" content="video/mp4" />
And my video :
<video id="video_1" class="video-js vjs-default-skin shadow" controls preload="auto" width="686" height="386" poster="path/to/the/poster.png">
<source src="path/to/the/video.mp4" type='video/mp4' />
</video>
Here are the Facebook Debug Tool informations :
{
"url": "http:\/\/www.domaine.com\/video.mp4",
"type": "video\/mp4",
"width": 686,
"height": 386
}
and
status :
Video embedding on Facebook enabled
Thanks for your help and your comprehension, i'am a newbe in Facebook API.
Do you have HTTPS URLs for your video files in the OG meta tags as well?
You will need HTTPS sources as well, since most Facebook users surf over HTTPS already (and Facebook is in the process of getting the rest of them there).
I developed a landing in a site with an addthis tool to share a dynamic content to Facebook.
For example, in this page the dynamic og content is as follows:
<meta property="og:title" content="Pequeña gran heroína – Ingresá a dermaglos.com y participá por importantes premios.">
<meta content="Mi pequeña gran heroína es: Prueba Heroina sin img - Lorem ipsum dolor sit amet, consectetur adipiscing elit." property="og:description">
<meta content="http://www.dermaglos.com/DesktopModules/Repository/MakeThumbnail.aspx?tabid=466&mid=1941" property="og:image">
<meta content="http://www.dermaglos.com/Mes-de-la-Mujer-2013/Galeria.aspx?id=17440" property="og:url">
When I use a debugger to test the working of the meta information, it doesn't show me errors:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.dermaglos.com%2Fmes-de-la-mujer-2013%2Fgaleria.aspx%3Fid%3D17440
But when a share the page, the FB posting ignores the og:image and shows all the images of the og:url.
What is happening?
Thanks a lot
Look at this page:
og:image ignored when sharing link, although accepted in linter
and find in the debugger the following text:
Tiny og:image: All the images referenced by og:image should be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that they meet the minimum specification (Read more on https://developers.facebook.com/blog/post/2013/04/03/platform-updates--operation-developer-love/).
While you post image use below property to display image
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
Note: Width and height can not be more than 200