I am writing codes to share the page of my website into the facebook. I have used meta tags for open graphs. Previously, the images of the pages were stored in the server itself and I used to supply the link to that image in the meta tag as:
<meta
key="og:image"
property="og:image"
content={coverImage} // link to the image
>
While sharing on facebook, everything worked fine. The image was displayed properly along with title and descriptions.
Recently, I have changed the image store to amazon s3 instead of storing it in server. Now, the coverImage has the link of S3. I supply this link in open graph image tag but the facebook is not previewing the image. I clear the cache, scraped the url again, but the facebook shows the warning:
"Provided og:image, https://***.s3.ap-south-1.amazonaws.com/......*.jpg could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings."
This image is being previewed everywhere else and I have used ContentType :'image/jpeg', ContentEncoding: 'base64',. I am not really sure why this is being blocked in facebook.
I would be very grateful if anyone could help me resolve this thing.
Thanks in advance.
So, I added the S3 base URL to the App Domain section on "Facebook Developer Console" and it started working.
Related
I have an elearning website in which I want to share the certificate of completion on Linkedin.
Currently, I'm using React-share but if I'm adding page url then image is not getting displayed whereas if image link is shared then post url is pointing to image link.
Certificate page url - https://learning.recruitingmonk.com/certificate/boolean-mastery?credID=RMK-bm-0006-GSY8-aaa
Please let me know some way to share my page url with preview image of certificate over linkedin in reactjs.
You should use OpenGraph (og meta attributes) from Facebook.
Here is a QA answer from LinkedIn:
https://www.linkedin.com/help/linkedin/answer/a521928/making-your-website-shareable-on-linkedin?lang=en
The official documentation:
https://developers.facebook.com/docs/sharing/webmasters/?locale=en_US
https://ogp.me/
And a related question StackOverflow question too:
How to successfully implement og:image for the LinkedIn
We have an s3 bucket where we have multiple folders with different small projects that contain basic, static webpages with an index.html entry point.
The plan is to integrate those static pages within a react-app through an iframe. When we do that with an example page, the embedding of the HTML document works but none of the resources get loaded (image files + stylesheets), throwing the following error:
DOMException: Blocked a frame with origin "BUCKET-DOMAIN" from accessing a cross-origin frame.
When looking up that error I usually find people trying to control some parts of the document rendered within the iframe using the postMessage API. In my case however I only want to make sure that the iframe embeds the website as it is shown on the publically available link with all resources.
I've tried making the S3 bucket specifically serve just one static website, thinking that this might influence the way the embedding works. However it's still the same problem.
Pretty sure there's a very simple solution to this and something I'm overlooking.
One potential option would be to give the S3 bucket a subdomain on our site, but I don't see how that would work for example in local development.
If you bucket is public then you can access with your cdn link . Otherwise You will configure it with aws sdk. I think this link will help you
Access files stored on Amazon S3 through web browser
Based on my custom URL parameters I process, I am trying to modify dynamically a meta tag I have id'ed in index.html like so:
<meta name="og:image" content="http://example.com/someurl.jpg" id="ogImage"/>
The code below in my home.ts seems to be working
document.getElementById('ogImage').setAttribute("content", Media.ImageURL) ;
I can verify it is via the browser dev console/elements.
However, when I view from facebook via their ojbect graph debugger at
https://developers.facebook.com/tools/debug/og/object/
It appears to see the default
http://example.com/someurl.jpg
as if the index.html is shipped before my home.ts gets chance to make the update.
Perhaps, my understanding is flawed and there is better way to do this.
Thank you.
Note1: initially, I was thinking I had to make some angular binding between index.html and one of my services but I could not locate any sample code, the closest I came to was this post
How can I update meta tags in AngularJS?
But I don't know how to apply it for my ionic2/3 code, so I opted for the document.get approach.
Note2: the ultimate goal here is to share a link into a social media (web or app) like facebook, a messenger like viber/skype, etc... and have it resolve to meaningful images, title, description to drive the visit back to the site via browser, or app if the user clicking on the link is on a mobile device with my app version of the site installed on his device.
Note3: if you decide to point me to ionic deeplinking please provide code to match above, because I could not understand how to apply to my case.
If you are trying to implement dynamic open graph meta tags values in your pages, you will need a server-side scripting language like php. Such a script will run on the server, update the pages as needed, then the pages will be served to the requesting site or application.
client-side scripting (ie. JavaScript) is usually ignored when a site or app is merely visiting your site/link for the purpose of extracting (aka scrapping, parsing html) information such as the one provided by the open graph meta tags (og:title, og:description og:image...).
I have an angular app which is rendered for bots with prerender.io. The page is properly cached with an og:image tag and the cached pages also do have images visible. When trying to share the page, I cannot select any images.
example of website (escaped fragment)
When viewing the source, I can clearly see the meta tags.
page in the facebook open graph debugger
In the debugger I can not see any of my og-meta tags.
But when I checkout what the facebook crawler sees, I can see the og:image tag
Question:
Can the facebook crawler detect and render base64images?
Why are all my og meta tags not visible to fb?
No, the Facebook crawler cannot use data URIs for open graph tags.
I am trying to create buttons on a web page that allow users to share links to PDF documents on LinkedIn. LinkedIn loads a window without any errors but offers no link or preview of the PDF or any indication of what is being shared.
Here are the two methods I have tried. First the plugin method.
<script type="in/share" data-url="http://example.net/DocumentDownload.aspx?Command=Core_Download&entryID=114"></script>
And, secondly with a custom url.
TEST
Encoding the url makes no difference.
The above links are direct document links from a DNN web site using Document Exchange. If I change the urls to any html page it works fine and LinkedIn seems to be able to extract the useful information right from the page and use that for the share details.
Can LinkedIn handle this kind of thing? There is nothing to guide me on the type of links that can be shared. I can't find any information about it. There are no errors in the web console.
Not sure, but you should try to provide LinkedIn with the link that has .pdf at the end, like http://example.com/documents/file1.pdf. I guess LinkedIn just checks the URL if it has .pdf file at the end to decide if it is a PDF document or not.
I have no problem sharing pdf's on LinkedIn. Check it out...
https://www.linkedin.com/sharing/share-offsite/?url=https://www.revoltlib.com/anarchism/the-conquest-of-bread/view.pdf
Works perfectly fine. And view.pdf is a script, not a file, either, so, it's not looking for a PDF file to analyze, so much as headers that indicate you have a PDF file available to analyze, so, in PHP, at DocumentDownload.aspx, we would do...
header('Content-type: application/pdf; charset=utf-8');
This header let's the sharing app know that it can analyze the document as a PDF file and extract useful information from it, as you can see from the screen shot.