Twitter Follow button shows as text and does not work (CSP)


#1

Hello,
I’ve been trying to insert a Follow button on the following website but the button won’t render, will only show the Follow text and doesn’t link to anything.
https://www.advalo.com/ddm-conversion-omnicanal
(sorry this link redirects to a subscribe page so I’ll explain further for those who do not want to g through that step. If anyone does, I’ll unsubscribe you afterwards.)

I’ve tried adding the CSP meta as recommended by Twitter but nothing seems to help.

Can anybody please help with this ?
Thanks in advance.
I thought embedding a Follow button would have been easier…

For this I’ve used the stadard Javascript code provided by Twitter:

<a class="twitter-follow-button" href="https://twitter.com/AdvaloFrance" data-lang="fr" data-size="large" rel="me">Suivre @AdvaloFrance</a>
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</script>

My web console returns the following errors

and the following warnings also from widget.js


#2

You have 2 non-breaking whitespace characters in your html, one before href and one before data-lang. I believe if you change that to a white space and it should work right. The non breaking white space is messing with the browser’s html parsing.


#3

@indianburger, thank you so much for this. The button works fine now.
I would have never found this by myself.
Cheers.


#4