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 :)
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 have a form that I'm making in bootstrap but no matter what I do, I cant seem to get it to look how it looks in the tutorials. The label goes above the text box when it should be beside it, and the whole thing looks like it lacks any css formatting. Thanks for your help.
Here is the site that I'm working on and you can view the source code there:
aerofied.snbw.co/registration.php
bootstrap.min.js returns a 404 error and I believe this is the reason.
This is the URL that returns the error: http://aerofied.snbw.co/js/bootstrap.min.js
You should also read the Bootstrap documentation. You must use some specific classes for your forms.
I'm attempting to add a LinkedIn Share button to our content-driven website. I've generated the embed code using the button builder, but whenever I try to actually use the button, I get a generic error:
There was a problem performing this action, please try again later.
It's been doing this for several days (since I first added the code), so I don't know if the error is on the LinkedIn side or mine. Is there any way to get a more specific error message? The code they provide is just a script tag that you paste in:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share"></script>
Unfortunately LinkedIn's "support" forums are limited to the various API's; there's nowhere available to submit a question regarding the build-a-button functionality. I'm hoping someone else has used this function and can point me in the right direction.
Most likely the page you are trying to share is not web accessible (local, under htaccess password or something). It looks to me like LinkedIn tries to actually look at the page you are sharing, and if it can't reach it, it gives you this message.
Most likely the url which you are sharing is not encoded, try encoding that, also follow this article for more.
The easiest way to ensure the linkedin share button works properly, is to use
<!DOCTYPE html>
instead of other alternatives.
look at the data-url attrbute. Remove the "http://" and only use "www." for your website url. That fixed my issue at least.
I found this way for validate in xhtml:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
< script src="http://platform.linkedin.com/in.js" type="text/javascript">< /script>
< div id="linkedin">< /div>
< script type="text/javascript">
var po2 = document.createElement('script');
po2.type = 'IN/MemberProfile';
po2.setAttribute("data-id","http://www.linkedin.com/pub/luca-di-lenardo/11/4b7/3b8");
po2.setAttribute("data-format","hover");
po2.setAttribute("data-text","Luca Di Lenardo");
document.getElementById("linkedin").appendChild(po2);
< /script>
Remove the white space and it works!
If anyone is getting this error, and cannot figure out why, I recommend checking the URL of the page you're sharing with: LinkedIn Post Inspector.
So, for instance, if I were to check out how wikipedia.org looks when shared, I would visit and enter that URL, like so...
https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fwww.wikipedia.org%2F
And I see...
But there's a ton of information here, showing how everything is parsed, from the description to the title to the image selection for thumbnail display...
Warning: Add an og:image tag to the page to have control over the content's image on LinkedIn.
Title: Wikipedia
Type: Article
Image: No image found
Description: Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.
Author: No author found
Publish date: 6/1/2020, 6:39:59 AM
They even give you instructions on how to fix your page! Hey, got some advice for Wikipedia.org here!
Provide a metadata tag for the og:image in the page's head section. For example:
<meta name="image" property="og:image" content="[Image URL here]">
I'm looking for some tips to clean the code which is generated by WordPress and some plug-ins, because I'm not happy with the code generated by WordPress for two reasons:
The code isn't well formatted. I know, I know... It isn't important since that the browsers don't need to "parse" a well formatted code. However, I like to keep all codes well formatted and it includes HTML code generated by me or third-part systems.
Unfortunately, some parts of the code that WordPress puts on the <head> aren't well formatted and in some cases those parts aren't really necessary. By the way, I have no idea about how to clean-up it or how to hook the function which prints that code.
Is there some way to add tabs / spaces to the code generated by WordPress without change the core files / code?
Thank you!
Overlooking the overall ambiguity of your question, the file you need to edit to fix the <head> element is header.php. You will find it in your theme's folder in wp-contents.
I have a graffiti blog and i have a strange problem which is showing strange char page like this:
alt text http://amrelgarhy.com/ScreenShots/error.jpg
This page was showing when I opened my control panel admin page. It's also showing the same when I try to edit one of my previous posts. My problem is that i don't know what's the reason behind it.
I am not sure how to fix this. All my posts are in English and I always use Windows Live Writer to post.
Has anyone faced a problem like this before? Can you advise me on finding the cause of this problem, and any potential solution?
Looks like it might be an encoding mismatch. Are you opening UTF-8 (or some other Unicode)-encoded files in a tool that doesn't understand UTF encodings or vice-versa?
Try placing this in your master page:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Also, check that a virtual directory has been created.
There seems to be a problem with the content MIME-types. The weirdness you are seeing happens because the server offers content as binary (I'm guessing application/octet-stream) even though it should offer them as text/html. Images should be offered as image/<extension>, for example image/png.
You can manually set MIME-type handlers to certain filetypes. If you are using Apache, you could easily to this in a .htaccess file like this:
AddType text/html .html
If your content is something else than HTML the MIME-type is something different. If your web-server doesn't automatically do this you should probably add the handlers yourself.
All MIME-types can be found from here: http://www.iana.org/assignments/media-types/