We have a PHP based real estate template and when we SHARE PAGE on Facebook, the resulting photos to choose from do not include the desired photo(s) to select from. IE we have 10-15 images on this page, and facebook only offers 3-4 as an option to share, none of which we want to share.
Suggestions?
Example http://kemptvillerealestate.com/listings/listing_body.php?id=118521
I have seen some cases that image size and/or aspect ratio did not satisfy Facebook's requirement and those images did not appear on users' wall, timeline or Facebook page.
The best practice is shown here and I think this is the latest one. As Facebook design including timeline, news feed and page changes this optimization practice changes accordingly. So be careful catching up the latest specifications.
So far the document describes as follows:
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.
We've also redesigned link page posts so that the aspect ratio for images is the same across desktop and mobile News Feed. Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.
And when you update images on your pages, make sure you visit Facebook Debugger and let Facebook crawler scrape your page again so they will get the latest version of your page content. Or you can do it programmatically as stated here:
This Graph API endpoint is simply a call to:
POST /?id={object-instance-id or object-url}&scrape=true
The response from this endpoint will be a JSON object that contains all the information about the object that was scraped (the same data returned when the Object ID is read from the Graph API).
Related
I have a xenforo forum that allows users to like or share pages to Facebook. I am having a problem getting og:image to be consistent. I have defined og:image yet there seems to be an inconsistency.
I am using the Facebook developer debug tool to scrape information from my site. The debugger shows the warning:"og:image could not be downloaded or is too small"
However, just a few lines below in the section titled: "Based on the raw tags, we constructed the following Open Graph properties" and it displays my og:image that is on my site.
Yet, when a user actually performs an organic share, no image is shared on Facebook. What should I fix? Thank you
Make sure the picture is accessible and you are using the correct size:
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
...
Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.
Source: https://developers.facebook.com/docs/sharing/best-practices#images
I have a application which builds an image pretty much and I want to allow the user to share this custom image on his/her timeline (just like a normal share dialog post). I can't seem to figure out what is the best way to do this.
I'm not sure if I need to use open graph or can I just share the image somehow or what?
One good way is to create a dynamic page for that image (picture.php?id=xxx), the page shows the picture and includes the necessary metatags: http://ogp.me/
og:image is the most important one, use the suggested size of 1200 x 630 pixels or at least 600 x 315 pixels: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
Another way is to actually upload the picture, but that would include User Authorization with a Facebook App with publish_actions permission and you would need to go through a review process with that one too...
I'm curious to know if multiple images actually show up in the feed. I know they're supported but in not one single case of testing have I seen multiple images show up on the feed. So what the point in having multiple images in the open graph object? Where do secondary, tertiary images go?
An image URL which should represent your object within the graph. The
image must be at least 50px by 50px and have a maximum aspect ratio of
3:1. We support PNG, JPEG and GIF formats. You may include multiple
og:image tags to associate multiple images with your page.
Doing a test with object debugger clearly shows that they're in there correctly (sans the image type property):
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fpluggin.it%2Fs%2FTI4o%2F
(http://pluggin.it/s/TI4o/ - note the OG tags only show up for Facebook user agent)
You may specify multiple images using this markup. The first image
matching minimum requirements is the default selection. A Facebook
user authoring a status update might select a different thumbnail
based on your explicitly-defined images. A hotel might include
multiple photos of the property as Open Graph protocol images,
allowing the person sharing the story to share a view of the pool or a
view of the restaurant.
Basically I know how to get images into the graph, but I can't seem to find where / how they are displayed in new feed. Are apps like Instagram putting images into photo galleries rather than using open graph? Is that how they display multiple images?
There’s always only one image in these feed posts.
“A Facebook user authoring a status update might select a different thumbnail based on your explicitly-defined images.”
When you give multiple images in your OG tags, the user making the post has the choice between them while making his post. He choses, he posts – and that image chosen stays the one image for that post.
In all of my testing it seems that Facebook treats Youtube & Vimeo's video embeds differently than our own. Specifically, when a video link/embed is shared to the Timeline and set to the full-width 2-column display, the image specified via og:image is still shown as a scaled-down thumbnail (as it does in the 1-column display mode), and the og:description occupies the rest of the space to the right.
This is in direct contrast to Youtube & Vimeo embed shares, which instead display the og:description above (full-width), and the scaled-up og:image below, also full-width.
I've tried to replicate as much as their Open Graph tags as possible, including similar image and video dimensions, ordering, etc, but in every instance it never seems to treat our embeds quite the same. I used the FB URL linter to break cache after each test, and to make sure it's pulling my OG tags properly.
Observations:
When the video dimensions are specified, FB tries to scale the video embed down as necessary to fit a smaller available space (Timeline 1-column display).
When the video dimensions are not specified, FB tries to scale the video embed up or down to fit the full available space (both 1-column Timeline and wider 2-column Timeline).
Listing multiple og:images of varying sizes (each with their own og:image:width and height specified) does not seem to have any effect on displaying differently based on context; FB always grabs the first one specified, and scales it up/down as needed for thumbnails, news ticker, timeline 1- and 2-column, etc.
Specifying the og:type as 'article' -- as Vimeo does -- does not seem to have any effect on the embed display. It displays it the same as if it was rightfully specified as 'video' or 'video.movie'.
Specifying image dimensions via og:image:width and height do not seem to have any observable effect (compared to not specifying them).
Anyone have any insights? It seems FB's implementation of Open Graph tags for video shares have changed quite a bit with the recent introduction of Timeline, but their documentation does not reflect the changes, nor how they are best used for display in the Timeline.
I've been asked to create a contest page for a radio station. The page should allow users to select a few of their Facebook friends that they want to participate in the prize event. After the friends have been chosen and confirmed the page should generate a collage of the friends' profile pictures.
I know I can get the 200px wide version of anyone's profile picture(assuming it's public) using the graph api. Is there any way to get the picture even if it isn't public? How about getting a bigger version of it?
I have no experience with the FB developer side, so I will appreciate any links to other useful resources.
Taken from the Facebook Graph API documentation:
You can render the current profile photo for any object by adding the suffix /picture to the object URL. For example, this will render your public profile photo:
<img src="https://graph.facebook.com/facebookid/picture"/>
You can specify the picture size you want with the type argument, which should be one of square (50x50), small (50 pixels wide, variable height), and large (about 200 pixels wide, variable height): http://graph.facebook.com/facebookid/picture?type=large.