This question already has an answer here:
How to show image like video in facebook
(1 answer)
Closed 7 years ago.
previously i believed an OG meta tag was what i should be looking into but now i'm really not sure. How do I share a video from youtube so that it will play on a users timeline (this doesn't happen on a phone). Please help I'm very confused
You should start reading the docs. This question is much too broad. To get started, have a look on my answer at
How does facebook select image to display on timeline
I would say that you would like to do something along these lines:
<head>
<meta property="og:video" content="video link"/>
</head>
then add a share button to share the page via a facebook share dialog.
When the shared page is loaded by facebook the og meta tags will tell facebook what information to show.
share on facebook
If you want to add meta data dynamically maybe use Jquery to fire off a function like this:
$('button').on('click', function() {
$('head').append( '<meta property="og:video" content="video link"/>' );
});
Related
We have been sharing our website pages and articles to LinkedIn for almost 4 years using
https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/page1/
Until recently, the share block would appear with an image, caption and summary. Just as in Facebook. But now, we find that the summary does not show. I know many have raised this same concern here. One solution I saw in this forum is to switch to forcing visitors to sign into our LinkedIn app and post the status via REST API. My question is, Is this really necessary. We don't have a login feature for our website and to force people to login to LinkedIn app just to show description which is already part of the og tags on the page. Surely someone from LinkedIn can respond to this issue since so many have raised it.
You can use Post Inspector (https://www.linkedin.com/post-inspector/) to preview how your posts will be shared on LinkedIn.
Alternatively, you can use the Share Plugin (https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin) to add a widget for users to easily share content on LinkedIn.
Just take a quick look at the Official LinkedIn "Making Your Website Shareable on LinkedIn" Documentation. I will bold areas of particular interest:
If you're the developer of your website, you'll need to make sure the source code complies with Open Graph Protocol (OGP) and certain image requirements specific to LinkedIn....
Below are the og: tags that must exist and their correct format:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
And the requirements...
Here are the image requirements specific to the LinkedIn sharing module:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
So, if you want to make sure your image displays correctly in the LinkedIn share functionality, make sure your webpage has the following...
<html>
<head>
<meta property="og:image" content="someweburl.jpg" />
</head>
...
</html>
Hope this helps!
I have a question that was initially asked here: Open graph og:video Meta Tags content in 2010, but the answer no longer works.
I'm trying to show a YouTube video in Facebook (and have it play inside Facebook) when a link is shared. The following og:video tag on the page doesn't work (it never really did):
<meta property="og:video" content="https://www.youtube.com/watch?v=ZH4YSF-i5dY" />
The solution proposed here https://stackoverflow.com/a/17811187/188740 in 2013 worked really well until recently. It was to change the og:video to something like this (notice the way the v query string value is represented):
<meta property="og:video" content="https://www.youtube.com/v/ZH4YSF-i5dY" />
That no longer works and Facebook completely ignores it.
Another option I tried is to put the YouTube URL in og:url:
<meta property="og:url" content="https://www.youtube.com/watch?v=ZH4YSF-i5dY" />
That approach instructs Facebook to scrape YouTube to get the thumbnail image, but clicking on the post sends the user to the original page that was shared. The click behavior is the right one (I want the user to go back to the originally shared page), but there's no way for the user to play the video.
Anyone know the solution to this problem?
Update:
Unfortunately, it's starting to look more and more like this is a change that Facebook made in August 2017 (and rolled out slowly across different regions over several months) and it's by design. In other words, there's no way to make this work. :-( If anyone has a workaround, it would be great for the community to know.
Relevant discussions:
https://developers.facebook.com/bugs/1963535797258090/
https://developers.facebook.com/bugs/364444227315183/
https://productforums.google.com/forum/#!topic/youtube/l69gPBlkXN0
I am working on a site where posts are made and I'd like to give visitors the ability to "share" a particular post that they link on their timeline. I have never done any social media integration, but I followed the instructions here and am still having problems. It's easier to show you than try to explain it. Go to http://www.badcustomerbureau.com/ and click on any of the Share links at the top of any post. Instead of sharing the post you clicked on, it tries to share a generic post with the same photo every time (photo of a dog). I used the code generator on the FB help site and it still has this issue. Please help!
The problem is in your meta tags. if you want your users to share any post to their timelines,then u have to give proper meta tags for each post.for eg: you have to pass the image name,title and description of particular post
<meta property="og:title" content="Worlds Worst Customer" />
<meta property="og:image" content="http://www.badcustomerbureau.com/uploads/evidence/62.JPG" />
OR
You can also call a javascript function onclick of your share button.like
<button type="submit" title="Share" onclick="Javascript:fbSharing('https://www.facebook.com/sharer/sharer.php?u=" + post_url + "');>
and add javascript function to your page
<script>
function fbSharing(post_url) {
var url = new String(post_url);
window.open(post_url , "share_dialog", "width=500,height=300");
}
</script>
I've seen it several times on my facebook timeline where the image of a shared link is not in the post itself. Example:
https://www.facebook.com/BarakaBits/posts/1065758210116791 - Image has text on it.
screenshot
Here's the post itself: http://www.barakabits.com/2015/01/beauty-moroccos-diversity-captured-stunning-photo-series
Is this a hidden image? I'm using a wordpress blog, how can I do this? Do I need a special plugin?
Thank you in advance!
Wil
I don't know exactly what this site is doing, but you can suggest that Facebook use a specific image (not necessarily one found on the page) by using the og:image Open Graph tag. For example, something like this would go in the <head> portion of your site:
<meta property="og:image" content="http://www.barakabits.com/wp-content/uploads/2015/01/Moroccos-faces-featured-6.jpg">
As you can see from the site you referenced, you can have multiple og:image tags, and the user will be able to choose which one is displayed in the post.
Here's Facebook's guide to Open Graph tags: https://developers.facebook.com/docs/sharing/best-practices
quick question:
one tiny prob i have is when i try to share a page from my site on facebook (for example:http://pent-house.co.il/index.php/sale/52-2013-12-12-13-41-40), i cannot see thumbnails for the gallery. i see only the logo :\
is there any way that i can share the photos throw facebook?
thank you very much and have a damm nice day! XD
i wanted to shar a pic but i dont have enough reputation
You have to set an og:image meta tag like this:
<meta property="og:image" content="THE LINK TO YOUR IMAGE"/>
In the <head> of your document otherwise facebook bot uses (usualy) the biggest images he can fin. On the example page you linked to the biggest one is the logo.
Once you have set the og:image meta tag don't forget to delete facebook's cache by entering your page url on this page so you can see the modifications you make.
More information about thos meta tags and open graph here