I am building a site that lets users browse 3d images. I have added a facebook share button. That button works, but it shares the URL and only a small thumbnail (the thumbnail only works sometimes).
Is it possible to create a button that shares a large custom image, in the same way that you upload a photo to your own timeline?
I cannot use meta tags, because the images change through javascript.
I also cannot let facebook find the image automatically, because it is rendered in a canvas 3d viewer on the webpage.
Thanks in advance!
Related
I'm using FB.ui share method to share links on Facebook.I have to use this method since I want to tag friends on my post.
window.open(
'https://www.facebook.com/v2.1/dialog/share?app_id=&display=popup&redirect_uri='+encodeURIComponent(REDIRECT_URL)+'url='+encodeURIComponent(SHARE_LINK),
'facebook-share-dialog',
'width=750,height=393');
Even though my og:image has the right size, i.e 1200x630px when shared on Facebook the shared link is displayed with small thumb.
When I change the method to FEED dialog or SHARE using facebook/...//sharer.php URL large thumb is shown for the shared link on Facebook.
window.open(
'https://www.facebook.com/v2.2/dialog/feed?app_id=&display=popup&redirect_uri='+encodeURIComponent(REDIRECT_URL)+'&link='+encodeURIComponent(''),
'facebook-share-dialog',
'width=750,height=393');
return false;"
IS there any additional parameter that I need to add TO https://www.facebook.com/v2.1/dialog/share so my image is displayed correctly I.E with large thumb on Facebook?
Thanks.
I had the exactly same issue. I was using "/sharer/sharer" for sharing links and everything was working well. And when I try to use the "/v2.1//dialog/share" I noticed that on desktop, images are big (1200 width) but on mobile (web and iOS App), the share is displayed as a small square.
I think it is because when you use "/v2.1/dialog/share", Facebook assume you share a story through your Facebook App and on mobile UI, story are displayed with small square image :-(
When you use the /sharer/sharer, there is no association with your app and Facebook will just assume user share a link in his feed. And it is the only type of share that display large image on all platform (desktop, mobile and iOS app)
So basically I don't think you can force FB to display large image :-(.
The Facebook doc say that providing big image will result in big image display but it looks like it is only the case for desktop. And for mobile only link status are displayed as big image.
I often link to my podcast on Facebook and when I post the link I want our podcast logo to show as the link picture.
Through much trial and error and using the Facebook debugging tool, I eventually got all the Open Graph tags set and set my Open Graph image. Here's my problem:
iTunes wants a 1400x1400 image. However, if I use that image, then when I post the link on Facebook, the link picture appears as a larger rectangular banner above the link and only displays part of the (square) picture.
If I instead use a 300x300 Open Graph image, it looks great on Facebook, but does not meet the iTunes standard of needing to be 1400x1400.
Is there any solution to this? Any way to somehow make Facebook and iTunes use separate images or have FB resize my image and display it properly?
iTunes reads the cover image (recommended size 1400x1400px) from the RSS feed. This image is specified (in the XML containing the podcast feed) by the tag <itunes:image href="hereGoesTheURL" />
On the other hand, Facebook reads the image (recommended size 300x300px) specified through the open graph tag <meta property="og:image" content="hereGoesTheURL" /> which has to be placed in the head section of the html code of the page containing your episode (i.e. the page that you post on Facebook).
Therefore, in principle, if you specify the iTunes cover in the RSS feed and the open graph image in the code of your website, the two images can be different and won't interfere with each other.
When you share a photo from a Facebook album it gets diplayed "full width" layout in the timeline (about 567px wide) with a caption below.
I also noticed that shared images from pinterest get shown im a format with an image and caption underneath.
But when I share a photo from elsewhere using the "picture" property of the feed dialog, or a page containing an og:image tag, it always gets displayed in thumbnail (116x116)|text layout.
The images from pinterest are posted as actions, so that may be a clue.
Feed dialog will not get you this customization you will need to use Open Graph actions.
https://developers.facebook.com/showcase/pinterest/
Also for full width photos from applications, the user must have generated the photo from the app so that you can utilize "User Generated Photos"
For example the following is from the Tumblr application
https://developers.facebook.com/docs/opengraph/howtos/adding-photos-to-stories/
The site I am working on is on WordPress.
I am trying to create a picture gallery now but I would like that each image will have its own URL and social buttons.
It means that you will be able to see an image, like it, see it posted on your wall with the correct thumbnail and redirect to the correct page in the gallery again.
I tried with the simple WordPress gallery and with NextGEN gallery, until now. Unfortunately I didn't get a good result yet.
Here is what I could do with NextGEN until now:
Gallery Main Page
Gallery Image Page
Problems I have there:
When I like an image, the thumb that appears in Facebook is wrong.
Same about the redirection URL from Facebook that takes me to the main gallery instead of the specific image that I liked.
Same with Twitter.
This is the code I am using on the image pages:
http://jsbin.com/ujahex/watch
Many thanks!
How do I enable visitors on my website to like/share an image on my site and have a large image appear on their wall ... the same size as if they were to like/share a wall photo (300px wide) ... instead of the thumbnail (90px wide).
I can get the thumbnail size to appear using the basic like/share button, but I want the larger wall-size photo to appear.
This is not possible with the current plugins. You should file a bug with Facebook at http://developers.facebook.com/bugs so it can be added to the wishlist.