Why is my anchor href path, appending to the URL? - html

I'm utterly baffled by the following situation I find myself in and truthfully, I have no idea why the following is occurring or how to solve the issue.
Here's what's happening;
I have the following anchor;
<a href=”https://www.google.com/intl/en/policies/terms”
rel="nofollow"
target="_blank">
Terms
</a>
If the user clicks this anchor it results in the following URL:
https://www.example.com/contact/"https:/policies.google.com/terms
Naturally I was expecting the following URL to be loaded;
https://policies.google.com/terms
At first I thought it might be a syntax error, somewhere, so pulled the anchors and checked the code. I can't see any errors anywhere. From there, I tested other links in the page. (All are working fine.) So I thought 'well if they are working, maybe it was a typo in the code?', I rewrote the anchors and the same issue still occurs (strange).
So my second thought was the URL has to be weird somehow, so I used a couple of substitutes,
www.google.com, www.youtube.com, and www.facebook.com. All URLs resulted in the same result. Is the target href="" simply being appended to the URL?
I'm not doing anything fancy with my URLs, or JavaScript so why is this occurring? Has anyone ever encountered this? Or maybe a better question would be: How would one debug something like this?

You used incorrect double quotation marks. Take a look very closely at the HTML tags below:
<p class="text-muted">We'll get back to you within 1-2 business days.</p>
<p class="small text-muted">(This site is protected by reCAPTCHA and the <br>Google
Privacy Policy and
Terms of Service apply.)</p>
The quote used in p tag is " and it is different with the one used in the a tag, which is ”.
You need to replace it with ".
<p class="text-muted">We'll get back to you within 1-2 business days.</p>
<p class="small text-muted">(This site is protected by reCAPTCHA and the <br>Google
Privacy Policy and
Terms of Service apply.)</p>

Related

Email Templates: Gmail ignores HTML u tag

RESOLVED: issue caused by HTML sanitizer
I'm creating an email template in JSON and I have an underlined word, e.g:
<ul><li><u style=\"text-decoration: underline;\"> Date:</u> Post must be shared on Instagram within one week of receiving your product</li></ul>
When I send myself my template and receive it in Gmail, the underlines are gone. There is no text decoration whatsoever. But my bolded text (using the tag) works great.
****NOTE: I tried adding inline-styling as suggested, but this does not work. I should also mention this text is in a list, so it has a parent li tag. Not sure why this would make a difference.
Has anyone run into this? I didn't see much on it while googling, which makes me wonder if there is a workaround.
Ok, I figured out what was happening, and it's non-gmail related. We're using an HTML sanitizer on the back end, and the tag was not included. Once I explicitly added it, my email sent without issue. Thank you to everyone who took a look.
You could add custom styling:
<u style="text-decoration: underline;"></u>

Search bar in HTML

I have a search form, which redirects to the result. If that page does not exist, I want to display a 404 error. How can I do that?
My code
<center>
<input name="txtSearch" maxlength="12" size="25" type="text" class="field" id="txtSearch" />
<div> </div>
<div class="button" style="display:inline-block">
<a onclick='window.location.href="" + document.getElementById("txtSearch").value;'>
Submit
</a>
</div>
</center>
Firstly, it appears, that there are some strong points that are wrong in your idea and possibly understanding of search. As your post and code shows, you only allow users to search for specific things. Correct me, if I'm wrong and your code operates in other ways, but..
Imagine this: a 10 year old boy from Kenya ends up on your site - how is he supposed to know what content your site contains? Or if he does, how is he going to try and find it? Yup, he uses search.
The first hit he gets, is a 404, because he searched for something that does not exist, and does not know that your site only allows to search for specific things, that exist. He leaves your site, unable to find the content he wanted.
This is not search's function. Search should allow you to search for everything, display a list of all possible results, and a polite error if none are found - definately not reditrect to a specific page immediately - instead, a generic page for all searches, or serve a 404 if said super-specific page does not exist.
I reccommend you look into Algolia or other similar products to facilitate search.
To fix your question's problem(s), however...
You have a missing quotation mark at the class declaration of the button div. Will edit the Q to fix that.
You really, really need to use indendation. It will make your code so much easier to read, and better and more appealing for others to help you. Will edit that aswell.
What you need, is a .htaccess file in your project root, with a defined 404 page, at the very minimum. Something like this, edited, to fit your 404 error page path and name. You will design and develop your 404 page as any other page. This will, hovever apply to ALL of your missing pages, so style and build it's content appropriately (see why a search results page is better, now?).
ErrorDocument 404 /404.html
If you happen to use nginx instead of apache, do this instead in your server configuration:
error_page 404 /404.html;
Alternatively, you could build a form around the search, and send the query string (which is a fancy word for the string the user searches for) to some PHP script of yours, which could determine if there are results to show, or not and display appropriate content - again, this could also be done with Algolia or similar - just parse and feed it your content in an appropriate form.

Facebook Instant Articles error "The HTML element does not contain any text: Avoid including empty HTML elements"

In many of the articles imported from my development feed to Facebook Instant Articles I get the error "The HTML element does not contain any text: Avoid including empty HTML elements." It seems to be related to images in figures with no other content. Can anybody tell me what it is Facebook's complaining about? My markup seems to conform to Facebook's own example of a simple image inside a figure tag, so what's the problem?
Turns out the Facebook parser doesn't like a <p> tag wrapping an element if there's no text in it. When I edit one of the articles highlighted with the yellow warning icon in the Facebook code editor, there's an empty <p></p>:
When I delete the empty element the error warning remains in the code view. But this is just a glitch in the code editor. You can't always rely on the error highlighting in that. (That explains why there's a code error warning in the pic in my question even though I'd deleted the <p>.) In the article list the warning icon disappears:
And FB publishes the Instant Article.
You will also get this error if your markup contains stuff like <p><img src="..."></p>. FB expects all <p> tags to contain text.
Maybe try closing the <img > tag:
<figure>
<img src="https://test.files.wordpress.com/2015/07/selleck1.jpg?quality=60&strip=all />
</figure>
It could be that Facebook simply strips invalid XML (!), resulting in observed error message.
In the example at
https://developers.facebook.com/docs/instant-articles/reference/image
the - yet self-enclosing - <img> tag is closed (as in XHTML, rather than less restrictive HTML5).
PIA for wordpress sites, all it's content comes between tags and this eventually generates one <p> empty <\p>. For this you need to go through your post content and remove all these empty tags.
Just open the warning marked article in edit mode in and update. It will fix.

How do I stop Gmail from stripping the values out of URLs?

I recently learned that webmail clients like Gmail will do alterations on HTML emails, for example adding target="_blank" to <a> tags.
I've also discovered that other alterations happen as well. When I send an HTML email to Gmail (and possibly other web mail clients) from my PHP script, variable values included in the URL of any links are being stripped out. So, for example, this is the value I'm setting in my PHP code:
$mailContent = '<p><a target="_blank" href="https://example.com/confirmation.html?verification=x1x1x1x1x1x1x1x&email=yyyy#email.com">click here to go to the web site and activate your account!</a></p>';
But when the email is received in Gmail, the HTML code comes out like this:
<p><a target="_blank" href="https://example.com/confirmation.html?verification=&email=">click here to go to the web site and activate your account!</a></p>
The values x1x1x1x1x1x1x1x and yyyy#email.com have been stripped out from within the <a> tag.
How do I protect the values of the variables that I want to pass to the URL so that Gmail won't remove them?
Click View original/source on the message in Gmail to see if the URLs looks like they should then. If so you know that the problem is how Gmail is formatting the message for your viewing. If it's mutilated even in the source I was wondering if there's anything in your webpage/php/CMS (do you use one) that changes the code.
You should try URL-encoding as #Crisp said. Here's the W3 reference.
Emailing in html uses Quoted-printable Encoding. The problem with your $mailContent is that the "=" must be represented by =3D
Try adding this:
$mailContent = quoted_printable_encode($mailContent);
This may not be the perfect answer, but if your application allows for it, I have used URL shorteners a number of times.
http://goo.gl/ is my preferred because the API is super easy to implement and google is very fast. I have a function in a class and I just run my url through it and send the return wherever I need it to be.
Another non-perfect answer here but, my problem was that I was including an http url in the html body and apparently is not valid so I changed them to https. This was on a dev environment so no problem on production.
Here is more info about this:
Any URL's in the body of the mail which lead to insecure sites may also need to be removed. Use https://transparencyreport.google.com/safe-browsing/search to validate these links.. All links should be correctly prefixed with "https". https://en.wikipedia.org/wiki/HTTPS Google seem to be rejecting "http". Sometimes, but not always, removing links from any signature can help.

Facebook like buttons erroneously handled as one

I've implemented the like button on my WP blog, but for some reason some of them (not all of them) are interpreted as being the same button. If I press like, I will also like the ones that is interpreted as the same. I can't figure out why. There are several other problems with what is shared on Facebook, but I think those problems are connected to this one.
It worked great for a few days, then I started getting an error each time I pressed the like button. After fiddling with the og:type value the error disappeared, but instead now I get this strange behaviour.
My implementation is so simple, I can't really think of any causes:
<div class="fb-like"><fb:like href="<?php the_permalink();?>" show_faces="true" width="600" font="arial"></fb:like></div>
I've found that the behaviour changes depending on what og:type I define in the header section, but with no value producing the correct result.
the blog can be seen at http://blog.parkov.dk/ (in Danish, though).
Anyone has experience with this?
Remove the href parameter and instead use the Open Graph meta tags. I see that you are using them but some required tags are missing:
og:title
og:url
IMPORTANT NOTE:
For the homepage use blog as og:type!