I want to share an infographic featured in an article, but the &picture= param in a facebook share url is being ignored and instead the image in the og:image meta tag is being shown. Need help ensuring that the facebook dialog box honors the picture parameter in the url.
I've tried using the Facebook Sharing Debugger, or a random image from another source but no difference.
My url structure is like the following:
In code:
const example = `https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&link=${encodeURIComponent(url)}&description=${encodeURIComponent(text)}&picture=https:${encodeURIComponent(img)}`
So I get something like this:
https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&link=https%3A%2F%2Fwww.example.com%2Farticle%2Fslug&description=Test%20Infographic%20Text%20Click%20the%20link%20to%20read%20more%20info!&picture=https%3A%2F%2Fimages.example.net%2FexampleImage.jpg
I expect that when a user clicks on the Article share button that the image used in the dialog box is the same as in og:image but when I click on the share button on the infographic the image used in the dialog box is the same as in &picture= url param.
Custom pictures are not possible anymore, you can only share with the og:image specified in the source.
Related
My requirement is very simple
From my website, I will share an article/page on facebook.
My article will appear on facebook wall.
On clicking my facebook article, my website opens in a new tab. Here
I am expecting to append some custom params like shown below.
Expected Result:
https://mywebsite.com/productdetail/id?utm_campaign=share&utm_medium=social&utm_source=Facebook
For this, I tried to append my fb sharing widget with params on clicking facebook share icon.This failed to append params and being trimmed on facebook wall. Please find the below-sharing widget url. Refer 1.png
Our code will produce sharing widget URL as:
https://www.facebook.com/sharer/sharer.php?app_id=123123123123123&scrape=true&u=www.xyz.com%2Fstore%2Fmywebsite%2FProductDetail%2FPartyAllNightEyeOpeningNoSmudgeMascara%2F_%2FAskusku920140.prod1000045.en__US.HXLT%3Fpdp%3Dtrue&utm_campaign=share&utm_medium=social&utm_source=Facebook
Also, I tried with og:url which was not working as expected and page loads normally(being referred from input URL i.e., article page) when I click from facebook wall. Refer 2.png
After sharing it on facebook wall, on hover of article on my wall.. URL is not appending my custom params.
None of the solutions helped us to achieve adding our custom params on facebook wall(article details).
On facebook wall, my utm params i.e., utm_campaign=share&utm_medium=social&utm_source=Facebook being trimmed by facebook. I need this to be as it is and when user clicks on facebook wall should open URL in a new tab with my utm params as well.
Can anyone help us achieving this functionality??
Also, when I tried changing my article landing page URL where facebook share icon being clicked, then few of my custom params being posted on facebook wall properly and appearing same when I come back from facebook wall. So, assuming facebook is retrieving/referring input URL instead of og:url or sharing widget URL.
Looking for a better solution without changing my landing page URL and to achieve custom params appending when we hit back from facebook wall using og:url or widget URL.
Thanks in advance.
Please refer below screenshots.
When you post a link on Facebook, it grabs an image from that page as a preview.
I'd like to be able to do the same! We're creating a link sharing website with Meteor, and want the user to be able to paste a link, and the image be rendered in the list.
Any ideas? Doesn't need to be Meteor specific at this stage!
To add an image when someone clicks on share/like etc, you can set the image for that page with
<meta property="og:image" content="http://yourdomain.com/link/to/image" />
When somebody shares it, it will use that image. You can also set titles and more:
https://developers.facebook.com/docs/opengraph/using-objects#selfhosted-creating
As indicated by Sarath in his comment you have to scrape the webpage and look for the information you need (title, META desc, an image) by using a regex for example.
I would suggest to look for META OG tags already used by many websites or, if not available, Schema.org micro data.
I think that some tools like PhantomJS could be helpful as it allows you to get the content of a webpage and even generate screen capture of this page.
Background: I have a site using a prettyPhoto lightbox to display photos. I've enabled social tools to display the 'tweet' and Facebook 'like' buttons on the lightbox, in hope to enable the ability to 'like' only the current photo being displayed to the one viewing it.
Problem: The Facebook 'like' button actually results in all photos in the same gallery being liked: all photos display the same number of likes in the lightbox; and on Facebook, the user's 'like' in their news feed or recent activity links to the gallery page rather than the actual photo that was liked.
What I've tried: I have tried editing the jquery.prettyPhoto.js file to add in the placeholder found in this answer: https://stackoverflow.com/a/11796964/2205165
I have also tried replacing 'location_href' with '{path}' to see if that used the photo's full path/URL, but it did not, or didn't appear to do so.
I've tried the above with 'deeplinking' enabled and disabled, with no avail.
Help: If anyone has a solution to enable Facebook liking and Twitter tweeting of individual photos from the prettyPhoto lightbox, I'm all ears. Even if it's to the degree of photos displaying the correct number of likes, rather than all having the same number: I'm not too fussed at this stage about linking back to the individual photo: linking back to the main gallery page will suffice for that.
Thank you!
In case anyone ever comes up on this again, This solution worked for me and it shares the image directly.
This is for images only, but there's no reason it wont work for the rest of the cases in PrettyPhoto.
In your PrettyPhoto parameters in prettyPhoto.js, switch out the facebook iframe to look like this with whatever params you want, all that matters here is that "{path}" is in the href spot of the iframe src:
<iframe id="fbiframe" src="//www.facebook.com/plugins/like.php?href={path}&width&layout=button&action=like&show_faces=false&share=true&height=21&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:26px;" allowTransparency="true"></iframe>'
Then around line 274 in the prettyPhoto.js file you should see this line:
$pp_pic_holder.find('#pp_full_res')[0].innerHTML = settings.image_markup.replace(/{path}/g, pp_images[set_position]);
Add another line just like it and replace the href for the src like below, again with whatever params you want, the point is that the href is replaces with the image location variable:
$('#fbiframe').attr('src', "//www.facebook.com/plugins/like.php?href="+pp_images[set_position]+"&width&layout=button&action=like&show_faces=false&share=true&height=26");
I can create a Facebook like button easily enough to like a URL but what I can't do is get it to like an item in a Facebook page.
So for example in this link (https://www.facebook.com/photo.php?fbid=347060885316097&set=t.540015414) is a picture and you can like it. But if I was to place that URL inside a LIKE button and click that I'm liking the page and not the item.
So any ideas on how to create a button to like an item rather than the link?
See the Facebook API:
https://developers.facebook.com/docs/reference/plugins/like/
Using their generated code will show you what is really required. They show you a link to an iFrame with parameters that you can use for the actual item being liked (the web page or the Url to the picture in each of those cases).
GL.
When I generate a feed post using the FB.ui function I find that frequently the image I attach to the post displays as a vertical gray bar. On the other hand, if I generate my feed posts using the direct https://www.facebook.com/dialog/feed url the image works 100% of the time. If I provide the Facebook Debugger it detects it as a Photo and displays the image at the bottom. When I click the 'See exactly what our scraper sees for your URL' it says that the 'Document returned no data'. I assume this is because my image is not an open graph object? I'm very much at a loss here.
maybe try to add a random parameter after the image src like http://www.yourdomain.tld/yourimage.ext?randomnumber if Facebook tried to load that image when it didn't exists it will cache a 404 error. With a random parameter, it forces Facebook to refresh your picture.
You shouldn't provide a direct link to the image.
Utilize OpenGraph tags, e.g. share link yourwebsite.com?image=12. Use backend script to generate OG headers, namely: og:image, og:description (see http://developers.facebook.com/docs/opengraph/ for more information). This way every time someone shares the content you know what image is being displayed.
The issue was our server, it was becoming inaccessible from the outside intermittently. This was causing Facebook to cache the broken links.