I am trying to post an open graph action with one of my objects.
Everything works fine except that I need the 'a' article used with my object, so I added the og:determiner meta tag as described in the docs:
<meta property="og:determiner" content="a" />
But when I check the post on my timeline I see that the determiner is not used at all and the sentence comes out strange.
What might be wrong? am I missing some definition in the dev app?
Related
For one of my websites I am using Open Graph to enrich posts shared from my website. But LinkedIn is not picking the image specified in og:image. The image is modified for the LinkedIn bot to be 200px X 200px by a simple PHP script.
I found some experiencing a similar problem (Linkedin not getting thumbnail image) but this problem is not yet solved.
I know it's old but this helped.
Linkedin caches link preview content for 7 days. You have to do the following to clear Linkedin Preview cache:
Step 1: Visit https://www.linkedin.com/post-inspector/inspect/
Step 2: Enter your url and click on Inspect, You will see the updated preview image
Step 3: Now try sharing your url on Linkedin
You might need to check linkedin post cache and refresh it for a specific link.
https://www.linkedin.com/post-inspector/
This question is a bit old but I ran into the same situation and got it solved so I just post my solution( or my understanding how it work) for others have the same problem.
(Thank you for #Justin Kominar, his answer in this question helps me.)
Make sure you have prefix="og: http://ogp.me/ns# in your tag, when you have iframe(s), make sure which page is calling the share function.
Make sure you set all four <meta> tags in you site and give the correct type to <meta property="og:type> (please go to ogp.me for more information)
Make sure you pass the correct url(the one you want to share, eg.https://news.com/this_news) to <meta property="og:url> especially when you use dynamic url
In the page you pass to og:url ( it is very important to understand linkedin will go to this page to look for the information not the page you call the share function, most of the time they are the same but sometimes that is not the case), you need to do step 1 and 2, set <meta og:image> AND MAKE SURE THE IMAGE LINK IS VALID AND THE IMAGE DOES EXIST
Hope it will help.
I faced with wrong image choosing by LinkedIn in my WordPress site. I found the problem by discovering URL by LinkedIn post inspector and saw that oEmbed tag was used dispite og:image tag is existed:
Does your code look like this?
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />
</head>
<body>
…
</body>
</html>
Also, check the documentation here:
https://developer.linkedin.com/docs/share-on-linkedin
Also, check your URL with Facebook Linter (it works with all OG tags):
https://developers.facebook.com/tools/debug/
Adding a garbage parameter at the end of my link, helped me force linkedin to get og:image again.
I found my solution on this post
Per #checkTek's comment, LinkedIn does not support .webp images for the og:image property.
Try to 1000x425 image. It works for me.
This answer is for the people who tried all the methods described in the above answers and still got no luck !!
I had this scenario and I fixed it by renaming the og:image.
I believe image with long name can trick the linkdin to prevent the image from scraping.
before the tag was
<meta property="og:image" name="image" content="images/meta-this-is-a-very-long-name.jpg">
I fixed this issue by renaming it to a smaller name.
<meta property="og:image" name="image" content="images/meta-image.jpg">
voila.. it worked !!
Warning - i'm using JavaScript
Check step
First of all, you have to check if your website/blog have all the meta tags correctly puted on tag of your HTML document. You can do this by just puting your website link on
https://developers.facebook.com/tools/debug and debugging.
But if you just get the wrong image no matter what on Linkedin post inspector but not on Facebook debugger (both use open graph tags) the problem is the Linkedin. So if this you can continue here.
My problem and the solution
I have my images on AWS, so i use 2 different links, one is for the service, the other is the link of the image.
The problem with Linkedin, is that he cannot read two URLs. So you have to encode properly.
My service is somenthing like this
https://d1muf25xaso8hp.cloudfront.net/[IMAGE_URL]?options
Now, you gonna see an example. I have a function that just get this two together. Take a look:
Example:
// The service -
https://d1muf25xaso8hp.cloudfront.net/[IMAGE_URL]?options
// Function Input -
https://s3.amazonaws.com/appforest_uf/imageID/200x200.png
// Function Output -
https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1643682361025x516549218825449500%2F200x200.png?w=&h=&auto=compress&dpr=1&fit=max
The function
const resizeS3Image = (s3_url) => {
let s3_clean_url = s3_url;
s3_clean_url = s3_clean_url.replace(/\//g, '%2F').replace(/\:/, '%3A');
const cloudFrontCompressedImage = `https://d1muf25xaso8hp.cloudfront.net/${s3_clean_url}?w=&h=&auto=compress&dpr=1&fit=max`;
return cloudFrontCompressedImage;
};
Things you may have notice
The second URL (the image) have some things replaced, like the slash ('/') and colon (':'), for the equivalent code on URL encode.
2 - How i did it ? using regex pattern and the .replace native JS constructor.
Tools and references that i used
https://www.w3schools.com/tags/ref_urlencode.asp
Remind to
When you're debuggin again your website on the Linkedin Post inspector, remind to add after the URL somenthing after '?' like https://yourwebsite/post/what-is-lorem-impsum?aaaa=912093090
That way, you gonna update the Linkedin SEO Cache.
I was using the LinkedIn Post Inspector and it wasn't finding my image. However, Facebook Debugger was showing it. Both platforms use Open Graph (OG).
In my case, the issue that was causing this to happen were spaces in the original image name (replaced in URL with +)).
This worked:
https://images.mywebsite.com/abc/name_of_image.png?auto=compress,format&rect=0,0,3600,1890&w=1200&h=630
This was failing:
https://images.mywebsite.com/abc/Name+of+Image+-+Test+-+4.png?auto=compress,format&rect=0,0,3600,1890&w=1200&h=630
For me the problem was the image size. Once I increased the size from 300px wide to 1200px wide it worked.
For LinkedIn:
The maximum file size allowed is 5MB.
The minimum image dimension should be 1200px X 627px.
https://dev.to/samuelorobosa/how-to-handle-linkedin-and-twitter-link-previews-23eg
However, the post inspector was finding smaller images around 750MB. So the true value is somewhere between 300:1200
p.s. gifs work on linkedin but are a single still frame on twitter
I've made an Add-on which is a custom field.
The style of the text in the field changes depending on the properties of an issue.
I check which style should the text have in the .java file and I pass the html class in a variable called $indicator to the velocity template:
#if( ${value} )
<span class="$indicator">${value}</span>
#end
It works perfect everywhere but in gadgets. When I add this field to a table showing issues in a dashboard, the html code is correct, but it doesn't find the css resource. This is because gadgets are inside an iframe.
How can I make the iframe have a reference to the stylesheet?
You did not say exactly which gadget you were using, but try adding the following context within your <web-resource> module:
<context>jira.webresources:issue-table</context>
The above should work for at least Assigned to Me, Filter Results, In Progress, Voted, and Watched in JIRA 6.1+.
If that does not work, you might also try:
<context>com.atlassian.jira.gadgets:common-lite</context>
If that general context doesn't work, you can look for which exact contexts are #requireContext'ed by the specific gadget you are trying to use, and then make sure that your web-resource is listed in that context. You can figure this out by looking at the gadget's XML and then searching for the #requireContext. (You can find the gadget XMLs inside $JIRA_DATA/plugins/.osgi-plugins/transformed-plugins/jira-gadgets-plugin-*.jar)
Starting with JIRA 7 the Answer of Scott Dudley is no longer working. #requireContext was replaced with a #requireResource within the Atlassian sources of this gadget.
As it affects our plugin, I created a Improvement Request to make that possible again
This is my first question, so sorry if I make any mistake in my explanations.
I created a website based on Wordpress that uses a Newsletter plugin.
I'm not using that plugin, I'm using it only to generate an HTML newsletter.
Here is how it goes : I got to a specific page in my back-office and there is dropdown selection where I can pick up articles from specific categories in my blog.
Once I selected what I want, I have my "Generate" button that :
Generate HTML code based on a php template I created
Show me a preview
To prevent any encoding error, I used the str_replace function with a lot of characters.
That works very well for my preview, but not for the generated code (that appears in a textarea).
So I was wondering how to fix this, because in the textarea I have "�" and some "Â" appearing in my content.
For your information, this is the only problem I have, on the website everything shows well, it's just on that Newsletter Generator that I have an issue !
Thanks for your help !
Have you tried placing the following in your header template? Within head, before the <title tag.
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
Thanks for your help and answers,
I finally solved it that way :
In the PHP file that output the generated HTML code (in the textarea), the outpu was generated that way :
htmlentities($newsletter);
And I replaced it by this :
htmlentities($newsletter, ENT_QUOTES | ENT_IGNORE, "UTF-8");
And now it seems to work like a charm !! I will come back if there is any more issue, but that way works for me and the generated HTML code is now well and don't show any weird character !
Thanks to all of you :)
I have read How to integrate Facebook's Open Graph in a Meteor application? and followed it closely, however, the og tags are still not registered):
I would just like to set several images to ensure that several thumbnails appear when u type http://bubble.meteor.com in facebook
Here are my codes:
(Updated)
<head>
...
<meta property="og:image" content="http://bubble.meteor.com/img/ogimage1.png">
<meta property="og:url" content="http://bubble.meteor.com">
<meta property="og:title" content="Emory Bubble">
</head>
Am I doing anything wrongly? Thanks!
First of all, an <html> tag does not belong inside the <head>. Meteor always uses the HTML5 doctype definition. Even if you would manage to change it to XHTML, you will probably end up with invalid XHTML, because extension packages that inject HTML assume HTML5.
Second, there is no need to declare any namespace for the OpenGraph tags. Strings like "og:title" are just opaque data inside a property and they do not affect the HTML parser.
UPDATE
I checked it using Facebook's debug page and it does not work indeed:
http://developers.facebook.com/tools/debug
This yielded an "Error parsing input URL, no data was scraped" error.
I also checked the page using the special escaped fragment URL that should trigger the spiderable package:
http://bubble.meteor.com/?_escaped_fragment_=
The resulting page contains no HTML content and the Javascript tags were still present, suggesting that the spiderable package does not work. Did you add that one to your project? (meteor add spiderable).
If you added it, it does not work. The spiderable package returns the normal page if running PhantomJS fails. You should check it on your local development version, use the above URL to trigger spiderable.
I also noticed that you are using 'school' as og:type, which is not a valid type as far as I know. Try 'website' instead.
UPDATE 2
Also checkout this screencast by Chris Mather about the spiderable package:
http://www.eventedmind.com/posts/meteor-the-spiderable-package
In this screencast he mentions a potential problem with subscriptions that are never marked as ready and make the spiderable package fail. Maybe this is causing your issues?
We're creating a Interaction design pattern website for a class.
We've been using google docs to create the patterns list during the classes, sharing it with the teacher for evaluation.
So the environment is this:
We've been able to fetch a single image from each presentation we want to display, such as: http://docs.google.com/file?id=dd2dpzk6_164zcwm3jgv_b
We've created an RSS feed for cooliris to open: (small example from it):
<.item>
<.title>e7_pattern_7.78<./title>
<.link>http://docs.google.com/file?id=dd2dpzk6_164zcwm3jgv_b<./link>
<.guid>dd2dpzk6_164zcwm3jgv_b<./guid>
<.media:thumbnail url="http://docs.google.com/file?id=dd2dpzk6_164zcwm3jgv_b" />
<.media:content url="http://docs.google.com/file?id=dd2dpzk6_164zcwm3jgv_b" type="image/png" />
<./item>
Sorry for the points in the middle of the tag is only for stackoverflow not to filter it.
So the problem is the following, the rss works correctly, as the cooliris opens all viewports for all images. But both the thumbnail and content remain black for all the pictures.
If you try to open them by the above url you can download them, with the type="image/png" if should work for piclens to open it.
Anyone got a sugestion or idea why we can't access the images from google docs via cooliris ?
The server needed a crossdomain.xml to allow cooliris. So we can't do it directly from google but we'll just download it a put on another server.
Try putting type="image/png" in the media:thumbnail tag too.. additionally, put your feed through an RSS validator, just to see if it checks out..