Did anyone know how to share image + link to social media? (example facebook).
I already try to share link and it works, but i cant find the way to share the full image.
Are you asking about the image share on facebook? If so, you need to link the image with meta tag
<meta property="og:image" content="http://example.com/lamb-full.jpg">
more info: https://developers.facebook.com/docs/web/tutorials/scrumptious/open-graph-object
Related
Hi All I integrated the Reddit sharing in my project.
While going to the Reddit share page image share option shown below is not coming.
I need that option along with other existing option as shown below.
Can anyone give an idea how can I fix this one.
You need to fill out meta tags, compatible with Open Graph Protocol. Read more on their website: http://ogp.me/
Sample code:
<meta property="og:image" content="URL" />
<meta property="og:image:type" content="image/jpeg" />
I'm attempting to set a custom thumbnail for when people share my website on Facebook. I followed this post here: How does Facebook Sharer select Images and other metadata when sharing my URL?
It seems this info may be outdated because I am unable to get it to work. Can anyone advise if there has been a change and how to handle this now?
I currently have this in my head but It is not working:
<head>
<meta property="og:image" content="http://placehold.it/350x150"/>
<meta property="og:image:secure_url" content="https://placehold.it/350x150" />
</head>
Figured it out. Facebook simply had not refreshed my images yet. I found this tool to help with this process:
https://developers.facebook.com/tools/debug/
I am trying to share a custom HTML/JavaScript player in Facebook. Is it possible?
I have tried with
<meta property="og:video" content="https://***/player.html">
<meta property="og:video:type" content="text/html">
<meta property="og:video:secure_url" content="https://***/player.html">
<meta property="og:video:width" content="500">
<meta property="og:video:height" content="500">
What I want to do is a system like the Twitter player cards. I wish to have my player embed in Facebook in an iframe (like Twitter). This way I can have a custom skin for my player and control it the way I want.
The code above is working if I link an MP3 file in secure_url & video but not when I link the player (example of link: https://***/player.html)
When shared on Facebook I have my link in a "video" element with the source set to my link.
well, youtube and soundcloud use html players for sharing. "https://www.youtube.com/embed/xPR-Ej-ENbk". So it should be possible, I am working on the same issue here, but when rendered on facebook am getting a div with class name "me-cannotplay", and am still trying to figure out if this something related to getting white listed by facebook or if there is something wrong with the html player i am using.
As #WizKid said, a simple answer is that you just cannot embed any javascript in facebook story.
When I click the share button for one of my wordpress posts, a popup window successfully opens. It displays the correct thumbnail image, and the title and summary text are correct as well.
However, when I actually go and look at the share on facebook, the thumbnail is not correct. For some reason facebook always shows the thumbnail for the first share I ever made for every single share I make.
What's weird is the title and summary are always correct, but I just can't get the thumbnail to work properly.
Here is the code I use for my Facebook share buttons:
<a class="facebook" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&p[title]=This Is The Title Of My Post&p[summary]=This is the summary of my post.&p[url]=http://www.mywebsite.com/individual-wordpress-post/&p[images[0]=http://www.mywebsite.com/images/this-is-my-thumbnail-image.jpg" target="_blank"><img class="size-full wp-image-96 alignleft" alt="shareonfacebook" src="http://www.mywebsite.com/images/this-is-my-facebook-share-button-image.jpg" /></a>
I put this code together after reading the following answers here.
Any ideas why the title and summary are always correct, but the thumbnail is never right? Remember, when I click the share button, the thumbnail is correct in the popup window but not the same when I go and look at the share on facebook.
Thanks for the help I really appreciate it.
Facebook uses the Open Graph protocol to determine what information is displayed when sharing a web page. The problem is more than likely not with your link but with missing Open Graph tags.
To debug the problem, copy/paste the URL you're testing into the Facebook Open Graph Debugger and press the 'Debug' button. The debugger will display the information Faceebook will use when sharing that specific URL.
As an example, the Open Graph tags for the home page of Stackoverflow are:
<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="Stack Overflow" />
<meta name="og:description" content="Q&A for professional and enthusiast programmers" />
<meta name="og:url" content="http://stackoverflow.com/"/>
The output for the Open Graph debugger is shown below.
To resolve your problem, you can:
Change your Wordpress theme to output the Open Graph tags on each post/page.
Install a plugin to output the Open Graph tags. Facebook have an official plugin or you can use Wordpress for SEO which will output Open Graph tags and also meta-data tags for Twitter.
To solve this problem you need just to edit your theme header.php and set this code below the tag:
<?php
if ( has_post_thumbnail())
{
$fb_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
}
?>
<meta property="og:image" content="<?php echo $fb_image[0];?>" />
In some websites like facebook, when we post some link it show us thumbnails from that website, Like this in Picture below:
How to do that?
you need to fetch that URL and read the meta tags which will give you some information such as title, description etc. If you need to fetch the image weather read the image meta tag (exists if any) or read the first available image from the web page.
It's just a post/comment like any other. Only thing you need is info about that page. You can use curl for example to fetch page's data. Info you are looking for are in head of document in meta tags.
<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="Post a link and show thumbails from that link - php" />
<meta name="og:description" content="In some websites like facebook, when we post some link it show us thumbnails from that website, Like this in Picture below: How to do that?" />
Take those info and make your post/comment/whatever.
EDIT:
You don`t even need curl, you can use file_get_contents check out this answer