I'm posting a custom Open Graph object/action to Facebook successfully.
Our production and staging environments each have their own FB app, which are configured identically (except that in our production app, objects and actions are approved, as is our App Details page).
For some reason though, staging is posting with a larger photo with title/description underneath. Production posts have a smaller image with all text to the right.
I don't remember doing anything special on staging, but in the end, we want posts from production to look like they do on staging. Any idea which setting I need to tweak?
UPDATE: I've learned the stories with larger images are called "image-led stories." The only thing that's mentioned in the above link as to how to get this new layout is:
Larger News Feed story layout generated by an Open Graph post using an image size larger than 200 x 200px.
Using the FB debugger, you can see that both images scraped by FB are 600x600:
Story from production (small layout)
Story from staging (large layout)
Frustratingly, there is no setting you can tweak, and it's totally out of your control as to how your posts will display in someone's News Feed. If you want the "image-led" display style, your photos need to be >= 200x200, but other than that, Facebook determines how it's going to display something.
I found this out after a few days of banging my head and reading everything over the web and finally giving up. We shipped the feature and I just told my coworkers there was nothing we could do.
Then, in my News Feed, I saw a coworker's posts, and they were formatted with the small image. Later that day, she sent an email thanking me because she was excited about the OG integration with our site, and the screenshot she sent had her posts in her feed with the large image.
Same person, same posts, different display in two different feeds.
If someone is having this problem you can solve it by setting the following:
1) On open graph console inside action type mark this option --> User Generated Photos - Let users include photos taken with the camera on their device
2) On your SharePhoto setUserGenerated on true.
SharePhoto photo = new SharePhoto.Builder()
.setUserGenerated(true) // Necessary to post a big image
.setBitmap(shareItem.getImage())
.build();
Related
I hope someone can help - please bear with the explanation! I have 5 years of gallery photos, published here: https://www.girlsfly2.ca/past_events.html (redirects to https://www.girlsfly2.ca/past_events_2016.html).
Two main plugins are implemented - Packery bin-packs the photos into a gallery arrangement, LightGallery allows for individual slide-show and Facebook (and other social media) share.
The desired behavior is that a visitor is able to share a photo they like on their FB timeline - a preview of that specific photo, along with whatever comments they choose to make. Then, if one of their friends is interested by the photo, they can click on the photo - which is actually a link - and visit the source.
The initial problem I had was that FB would preview the source page, and not the individual photo. This is because the LG plugin uses a hash plugin to generate a "page" for sharing. The developer suggested a workaround was to pass an html link for each photo through the plugin, which worked and the photo previewed correctly.
This created a new problem in that when one clicked on the return link from FB one landed on the individual photo, with no way to navigate back to the main gallery since nothing else was loaded. This creates a frustration for the user, if they wanted to find out what the photo, and our initiative is all about.
The developer told me what I wanted was only possible if I created a complete HTML page for each photo (approximately 400 of them!). I had the bright idea to use server-side redirects in the interim - so that when one clicked on the image link it would redirect to the main gallery page of that particular year.
When I coded 2016 I tested functionality several times before implementing the redirects, and even though I didn't share each and every photo, FB seems to have cached the original links, not the redirects for all the photos.
I tackled 2013 and 2012 next but in this case the redirects were implemented in advance of publishing the respective pages and I discovered that FB is now previewing a default photo for all shares from each respective gallery. This is not ideal! I instantly had this problem when I created a batch folder redirect in 2016 which went away when I did individual redirects for all 207 photos, perhaps because some individual links were already cached.
Last night I played around with the FB scrape tool and disabled the 2013 redirects while I tested this. I'm wondering if I encourage FB to cache the individual photo links and then re-implement the server-side redirects if that will work?
Also, this is a very time consuming and cumbersome fix - and I'm guessing it won't be permanent either. Surely there is a better way through coding?
The bottom line question: Is there a way to force FB to preview the original html link, instead of it pinging the server, detecting the redirect and displaying a default image from the redirect gallery page?
Note that 2015 photos have not been redirected! The undesired preview behavior can be seen on the 2012 page, and at the time of writing the desired preview behavior is happening on the 2016 photos even the the coding style for both pages is the same. Also 2014 is not yet published so for the moment will yield a 404.
Sorry for the long explanation - I didn't see a way to shorten it. I really hope someone can help with this!
I've seen this is a common issue here on stack but it seems that the answer is always dependent on the specific scenario. I'm looking for a fellow coder to give me that "AHA" moment.
Problem: Ads posted to my website do not show the og:image content when shared to facebook until the ad is shared at least 4 times
I have thought about/ tried the following things
Checking the image size to make sure it's not large (128kb) is the norm. I compress all uploads.
Giving the ad some time to marinate before sharing (perhaps the fb crawler takes a while to cache the page)
I tried using the debug crawler tool on fb to see if I could reproduce the problem and I indeed could.
I tried sharing the ad to my own page regardless of the missing image to see if the image showed up on my wall. It did not.
The image will not show up on ANY shares until someone has clicked on the share icon on an ad at least 4 times. It seems to me like it might be some latency issue on facebook's part.
What could cause og:image to only show on subsequent share clicks?
Edit
Here's a test ad.
https://www.jdmxchange.com/Classifieds/Details/6ae72690-14d8-4bab-b039-3a2d79923794
Reading https://developers.facebook.com/docs/sharing/best-practices I found this, which might be just what you're looking for:
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
This means, if you set the width and height of your og:image with tags, the image will show straight away.
UPDATE
Actually debugging your URL shows like this URL is redirecting to another page, and then another. Which makes me suspect the Facebook crawler is not able to access the actual OG meta tags you're using.
As a random test, I would add OG metatags to that last URL and see if Facebook uses them. But the actual solution would be to use URLs which are actually reachable to FB (no credentials necessary).
I'm having issues when a user tries to share the URL to a Facebook tab app that I have setup.
When they paste the URL to the tab in their share window and then post their status update, the tab image is shown when viewed on their profile, however there is no image shown on the newsfeed version of the same post.
I've tried adding open graph meta tags to the app, but I believe that it is being ignored since it is located inside of the iframe, and the facebook open graph meta overrides it.
Does anyone know how to ensure an image is maintained when the tab URL is shared directly?
I've burnt a lot of time trying to solve this issue as well. The best I've come up with is that Facebook is going to chose to display the 111x74 app icon. Sharing this on a page's news feed makes it very pixelated and oddly offset, as it should be using a 1200x630 minimum image size, as dictated by the OG tag best practices, but Facebook has not allowed us to have that option in the app configs. It may be that your app icon is being offset enough to not appear like it's visible in the news feed.
So, from my research, we're out of luck until Facebook decides to fix this issue. Until that time, I don't think it's even worth trying to get the any image to work.
Someone feel free to prove me wrong.
I write movie reviews and share them on Facebook. At first the facebook thumbnails would show the pictures I wanted for my reviews, like the movie poster. However, now they only show my blogger profile picture every single time I post a link. It's very frustrating because I want to be taken seriously and I don't want my blogger profile picture showing up every time I post a link. I tried the facebook developers debugging tool and it did nothing. Does anyone have any other suggestions?
Thanks!
I don't know to what extent you can modify the HTML code of a Blogger blog, but you can use Open Graph tags to define the exact image you want Facebook to show, for example the tag you want is the following:
which must have a 100px x 100px size at least. Note that this tag goes into the Head section of the site.
It has taken some time, but I think I have worked out what is happening, thanks to Facebook Debugger. Put the post URL in and then scroll down to "OPen Graph Warnings That Should be Fixed". You may see something like this -
Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook.
Chances are your image is too small and that is why it is grabbing the profile image. I played around with my posts until I got it right, checking it through Debugger each time. It was a pain, but it worked.
I'm stuck with this problem for several weeks now and will try to give a short and detailed explanation below:
Situation
Users visiting the websites and has the option to generate an image with the GD-library. So every users generated a personal image. Simple... until now. After generating the image, the user gets the option to share this image to Facebook. This is done via the OpenGraph protocol.
What's working (Yeah!)
Generating the image is working perfectly fine. Sharing something to Facebook is working also.
Problem
Although the following code is used on sharing the image (fbrefresh=CAN_BE_ANYTHING). FB stills pulls an old image. Sometimes this is a really old image, sometimes it's a more current generated image. But never the just generated image.
And now?
As said I've already tried the fbrefresh=CAN_BE_ANYTHING. Also in de debug tool the right image isn't showing up, but this is probably because the generated image has an unique ID generated from the users cookie. So this id is only usable when the users clicks on generate and after that shares the generated image.
Is there any example on the internet that uses the same sort of strategy and is working? I've searched half the internet and didn't found it yet it's becoming more and more frustrating.
After generating the image, the user gets the option to share this image to Facebook. This is done via the OpenGraph protocol.
What exactly do you mean by the latter? Are you just uploading that image to the user’s wall/one of their albums, or are you publishing an Open Graph object with a user-generated photo attached? (Btw., user-generated photo is meant literally for OG actions – you should only do it with photos that the user has taken using f.e. their mobile phone camera while they where undertaking the action. I doubt if a GDlib-generated image fits into that description.)
Although the following code is used on sharing the image (fbrefresh=CAN_BE_ANYTHING). FB stills pulls an old image.
And by “pull” you mean what exactly, again? Do you upload the photo as an HTTP POST upload, do you upload it by URL, did you specify it as og:image for an OG object, or do you pass it as user-generated photo while publishing an action?
Now, usually the easiest way for resources referenced by a URL to get properly refreshed by the requesting client, is to attach a different value to the query string/as a GET parameter – f.e. the current unix timestamp: …/image.php?1984372634 or …/image.php?foo=bar&forcerefresh=1984372634
Since this value changes every second, it makes each of those URLs a different URL, and the requesting client absolutely has no choice but to request that resource, because he can not have it in its cache already.