I am using facebook sharer.php for share posts with images. But when i click on share button facebook sharer.php dialog showing with image and text that i have set. see image below:
After i click on share button. Post will be show on my facebook timeline. But there is no image with post. I think it is bug. below is my code
<a href="http://www.facebook.com/sharer.php?s= 100&p[title]=Title here&p[url]=http://example.com&p[images]
[0]=http://www.ucmas.com/wp-content/uploads/2013/07/rm.jpg&p[summary]=I love cheese" target="_blank">Share post</a>
You can test thing in this post fiddle also.
Facebook Sharer not showing image thumbnail
Any help?
Thanks a lot.
Have you tried running your site through the Facebook debugger? Not only will it show you what's wrong in 99% of cases, but it will also, every single time, clear facebook's cache of your page. Go here:
enter link description here
Enter your url, and see if there are any errors. My guess is that Facebook cached the fact that it couldn't find any image of yours, so simply doing that is likely to solve your problem. If not, your image is probably not publicly accessible.
Use faceboot meta tags.
`<meta property="og:image" content="http://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>`
`<meta property="og:title" content="Facebook Open Graph META Tags"/>`
REF:
http://davidwalsh.name/facebook-meta-tags
Related
I am currently working on http://rightinfo.co.in
When I am trying to share this site on a FB page it is showing an image that I have not included in my site.
I have tried by adding ?v=1 to the url and url shortner services.
In facebook debugger also , the image is not showing. But in actual sharing , unknown image is showing.
Please help me to solve this
Thanks
You have issue with tags Please check this facebook debugger it explains alot Facebook debugger
It's because the og:image (see here) meta tag is set. This tag defines the image, which will be shown on facebook.
To change this image, try to edit this tag, take a look at the theme settings.
Another way is to change/delete the image itself, e.g. via FTP.
You can find it here: WEBROOT/wp-content/themes/Morpheus/img/portfolio/folio01-preview.jpg
Btw, I see you are using wordpress, I'd consider using a SEO plugin, which makes a proper use of the og-tags as explained here
I want to add Facebook share button to my site. But when I use the code given by Facebook, it doesn't show any FB logo image in button style & also doesn't count any share. Please help me figure out a better code.
Currently, I'm using:
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
Share on Facebook
</a>
The easiest way to add Facebook share button would be to visit http://www.facebook.com/share_partners.php and copy the code and paste it in your webpage after replacing the text "url" with the actual URL of the page you want to share. If it is dynamic content, you can use the variable or object name.
<script>
function fbs_click(){
u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<img src= "http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981" alt="" />
Take a look at the official documentation: Facebook For Developers: Share Button.
If you merely click the "Get Code" option on the Facebook Share Button Configurator & Generator, you'll see that the URL generated is rather simple:
https://www.facebook.com/sharer/sharer.php?u={yourURLhere}
At least it seems that way to me:
I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.
I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.
When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.
I am not sure what I am doing wrong here.
Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?
I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.
I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.
Could it be the XML namespace in the top HTML tag?
In the BuzzFeed article, it's:
xmlns:og="http://opengraphprotocol.org/schema/"
In your page its:
xmlns:og="http://ogp.me/ns#"
On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.
It may be required to include a filename in the links, especially if it's basing image detection on the file extension.
EG:
Buzzfeed:
<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />
Yours:
<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>
After some tests, I guess it's a caching issue.
Looks like the sharer is caching the graph, using the og:url as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url value.
Obviously, the debug tool don't use such cache.
If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url. Moreover, to ease the test, keep the new og:url equal to the new page location.
So funny story, I'm a developer at BuzzFeed and came across this while trying to figure out why our share dialogs suddenly stopped showing the thumbnail picker.
It looks like Facebook disabled the functionality. It briefly made a reappearance on 1/14/2014 but they introduced a bug that prevented sharing from any pages with multiple og:image tags defined. (See: https://developers.facebook.com/bugs/1393578360896606/)
They fixed the bug, but as of 1/22/2014 it still looks like the thumbnail picker is disabled.
The Sharer.php script on the Facebook site doesn't support all the OG tags as far as I know. The images are scraped from the page content itself, so if you want your three images to appear on the Sharer.php script, include them in your content.
Sharer.php has been officially deprecated by Facebook, so I wouldn't be surprised if certain functionality does not work with it. While it still works, it was always the simplest option and I'm guessing they never built the link image scraping from the og items into it.
I was able to find this article, which shows one way that you can specify exactly what images are available to the sharer.php share page. You can specify one (or multiple) images to share with a URL structure like the following:
http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary
I'm looking to share things on google plus but I need to be able to populate the snippet info myself as the pages I am sharing are loaded via ajax on my jquery mobile site.
So that being said I need to set the info either via the url (facebook sharer style) or via javascript.
If you are trying to change the rich snippet that appears, you should use the snippet tool to create schema.org that is then placed on your site. The share link would then be that page, which would contain the attributes set to how you want them to appear. You can specify the title, the image, and the description for the content that gets shared.
If you are trying to just create a link to share something, you can create direct links to the share dialog. For example,
Click to share
will create a share link to {your url}.
Because jQuery mobile is rendering a lot of the information on the actual client, you might need to generate a URL, similar to the one above, that would then point to another page that would with the right content in schema and a redirect to your site. When they follow the share link, a user would be redirected to the jQuery mobile page. When Google reached the page you're redirecting from, it would read the schema.org markup and correctly calculate the snippet. The following example works for me:
<html itemscope itemtype="http://schema.org/Article">
<head>
<meta itemprop="name" content="Example">
<meta itemprop="description" content="This is the most awesome thing ever.">
<meta itemprop="image" content="http://placekitten.com/250/250">
</head>
<body>
<script>window.location='http://istoocute.com/#kittens';</script>
<a href='http://istoocute.com/#kittens'>Click here if you're not redirected</a>
There's really nothing to see here, move along...
<img src="http://placekitten.com/250/250" />
</body>
</html>
https://developers.google.com/+/plugins/+1button/#configuration - shows you the configuration settings that you need.
I was able to just go ahead and use the schema.org in my situation. This worked because when you view one of my pages is "promoted" to the first page in the list of cached pages. So even if you were to start on page A and browse to page B and then share page B when google searched the url you have provided page B is now before page A and thus is schema.org meta data is used.
I have no doubts that writing your own redirect page and passing it some thing like this
?redirect_url=http://google.com&img=your_image.jpg&description=its great&title=a product
would work. The only thing to remember is that you will need to use a javascript redirect that way when google looks at the page it see's the page and does not get redirected (bots dont use js) but when a person hits the page it will redirect them to the real page.
when i press the button + google i have a thumbnail (picture of a site) randomly generated, Does anyone know how it specify which image to display ?
Google has a support answer for it. https://developers.google.com/+/plugins/+1button/#plus-snippet
Basically, it goes like Microdata, OpenGraph, Meta and, if all else fail, page content.
Facebook provided an open microformat standard about this and called it: OpenGraph.
I would find it strange if google ignored it altogether. Haven't tested that, though.
Opengraph uses an og:image attribute.
Try something like this:
<meta property="og:image" content="http://example.com/post/13371312/picture.jpg" />
in the <head> section.
If it doesn't work, I'd suggest also checking out on the Google Opensocial site. (if you didn't already)
It's a pretty labyrinthic site and more about apps and oauth interaction, but you could get lucky.
I believe Google hasn't provided a way to select the image that is going to be selected like Facebook does with the tag on the head of the HTML.