I have a site in which the user creates a dynamic image, and would like the user to be able to post her creation on Facebook. The way I wanted to achieve this is via the standard "like" and "share" buttons ( using XFBML) - I dynamically change their URL to a page containing the user image.
The problem is that Facebook posts the correct URL but with a generic picture, and not the user generated picture.
In the past I used to give the image url - and then I would get the right picture. But this is not what I wan't now - I wan't the link to be to a full feature page.
The target page does specify og:img to the dynamic image - but it seems FB does not use it...
Any ideas how I can control the image FB shows on the post?
There are some restrictions on the image
the thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0
http://developers.facebook.com/docs/share/
Related
I want to be able to have a link on my website that upon clicking it opens a Facebook share dialog containing the image displayed with full size along with a custom text quote.
The 2 options that I tried with the Facebook share dialog don't achieve that result:
The first option is to use https://www.facebook.com/dialog/share?app_id=3xxxxxx334"e=Some%20quote&href=https%3A%2F%2Fwww.example.com%2Fsome_page, and use og:image tag on www.example.com/some_page with the image that I want to display
The problem with this approach is that the image is displayed cropped to match the aspect ratio that the Facebook uses (1.9:1) which is different than the aspect ratio that I use for the image (1.3:1)
The second option is to use https://www.facebook.com/dialog/share?app_id=3xxxxxx334&media=[%27https%3A%2F%2Fwww.example.com%2Fsome_img.jpg%27] with the link of the image that I want to display
This approach displays the image in full size in Facebook, however the problem is that it doesn't allow adding any text quote with the image, any use of quote or description query parameters seems to be ignored by Facebook
So my question is there a way to combine the 2 methods such that the image gets displayed with full size along with a custom text quote?
I've been working on facebook social sharing, and I have gotten it to work via 'dialog' & 'popup' modals.
My feed is Shared on Facebook feed with the newer Large display rectangle.
I've set up all the proper parameters such as:
method:
app_id:
name:
link:
picture:
caption:
description:
display:
my page renders meta-tags with og:image, og:image_secure_ssl, og:image:height, og:image:width, with their respective content="image/height/width"
I've used the facebook:debugger to freshly re-scrape/cache the url.
Using FB.ui(options...), there is no parameter for height/width to be sent to facebook. My images meet the correct sizes of 1200x800+, as well as their aspect ratio of 1.9:1
What I want to achieve in my preview-modal is this:
Go to this website, and click on the round black facebook share icon:
http://www.violetgrey.com/violet-files/top-flight/the-golden-eye?icl=section_1_hero_v2_1&icn=hero_image
The much larger preview
My current preview-modal display currently is more like:
Go to this website, and click on the facebook share blue button:
https://www.everlane.com/invite
The small square preview
I really like the bigger share modal preview, because it looks better imo.
Do you guys have any advice as to how I can proceed?
To get the large preview, you can either rely on the Share Dialog or open up the plain old https://www.facebook.com/sharer/sharer.php?u=(http://yourURL.com/) in a popup. They both use the Open Graph metadata you set in the head.
The Feed Dialog can be used to override the OG meta, so you can specify a title, description, picture, but there's no way to set the picture's dimensions or the layout of the dialog...
I want Facebook to ignore a particular image on a page. Is there any tag I can use that will hide an image from Facebook when users share a page?
We are using Joomla 3.4. The article pages that have an intro section that displays on category listing pages but is hidden on the actual article page. The intro section has a thumbnail 75 x 75.
In the main body of the article there is a larger image that we would like to display on Facebook but the og:image always selects the thumbnail first.
Is there any way I can add some parameter to the thumbnail so that it will be ignored?
Why don't you explicitly specify the larger image in your og:image tag? If you specify more than one og:image, as far as I know the first one is selected.
See
https://developers.facebook.com/docs/sharing/webmasters#images
https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
https://developers.facebook.com/docs/sharing/best-practices#images
I've got a Facebook App that I've created. I want it to be 760 px. wide however it seems to be stuck at 520 px. When I view the source generated by Facebook I see this.
<-- <iframe name="app_runner_fb_https4fa04becb1d045950954937" id="app_runner_fb_https4fa04becb1d045950954937" style="width:520px;height:800px;" frameborder="0" src="https://s-static.ak.facebook.com/platform/page_proxy.php?v=4#app_runner_fb_https4fa04becb1d045950954937"></iframe> -->
That seems to indicate that it is using 520. Yet, the settings seem correct in the Advanced Developer panel.
Using Google I see a bunch of reported problems from years ago with 760 px; however, the option is still in the settings. Does this option work? Recently Facebook moved pages to timeline which freed up the left nav-bar. My app looks stupid without that space taken. It sits in the center of the page with 100+ white pixels on each side.
That screenshot is a setting for the width of your canvas app (apps.facebook.com/something), and the options are fixed to 760 or fluid width (which is dependent on your own CSS too, of course)
However in your post you mentioned Timeline and Pages, which implies your app is a page tab app accessed as a tab on a Facebook page.
If that's the case, the width setting which applies isn't there, it's under Page Tab on the front page of App settings and can be set to either 520px or 810px
I am having an issue where the background image is cutting off to the right when you scroll left to right. This is happening when the app is hosted in the iframe for our business facebook page, not when you go to apps.facebook.com. I have changed the canvas width to fluid and it is not helping.
This is an example of what I am talking about, try scrolling to the right:
https://www.facebook.com/pages/TeleManager-Technologies-Inc/134181063301299?sk=app_241678922556190
This is the link for an actual app:
http://apps.facebook.com/irefill
As you can see in the second link, nothing is being cut off to the side. I tried playing with some css properties such as "overflow" and it still didn't help.
Thank you for your help.
I added a width to your body tag within side of the iframe body - {width:1000px;}
Because you hadn't declared a width on the , it was inheriting the width from the iframe it is nested in, which is 520px, the max-width for facebook page tabs.
Add on a width to your that is larger than the width of the image that is being cut off and you should be good to go.
You only have 520 pixel width to stay inside of on Facebook.
try limiting the
body{width:520px;}