Step 1: Add the Twemoji library to your <head> tag.
<!DOCTYPE html>
<head>
+ <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
</head>
...
Step 2: Add the parser script after the closing <body> tag.
...
</body>
+ <script>
+ document.getElementsByTagName("body")[0].innerHTML=twemoji.parse(document.getElementsByTagName("body")[0].innerHTML)
+ </script>
</html>
Step 3: Adjust some CSS to fix the large emoji issue. Adjust as needed.
img.emoji {
height: 1.1em;
width: 1.1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
Tweemoji is now installed on your site! Enjoy!
Note: Emoji’s will only be parsed in the <body> tag so it does not mess up stuff like metatags.
Demo: https://awesomenotebook.glitch.me/posts/2020-11-4-twemoji-support-test/
6 Likes
Noobs looking at this, you don’t need to include the plus signs.
6 Likes
Not good, but still works:
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script><script> document.getElementsByTagName("body")[0].innerHTML=twemoji.parse(document.getElementsByTagName("body")[0].innerHTML) </script><style>img.emoji {height: 1.1em;width: 1.1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;}</style>
I would not recommend doing this because the script tag is usually supposed to be loaded first and HTML goes from top to bottom, so the library could be loaded/cached earlier. Then, at the end, twemoji parses the body tag so no unsupported emoji’s are seen.
This could be used as a bookmarklet, with a little bit of modifications!
2 Likes
I made a bookmarklet
javascript:(function()%7Bfunction%20callback()%7B(function(%24)%7Bvar%20jQuery%3D%24%3B%24(document.body).append('%3Cscript%20src%3D%22https%3A%2F%2Ftwemoji.maxcdn.com%2Fv%2Flatest%2Ftwemoji.min.js%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%3Cscript%3E%20document.getElementsByTagName(%22body%22)%5B0%5D.innerHTML%3Dtwemoji.parse(document.getElementsByTagName(%22body%22)%5B0%5D.innerHTML)%20%3C%2Fscript%3E%3Cstyle%3Eimg.emoji%20%7Bheight%3A%201.1em%3Bwidth%3A%201.1em%3Bmargin%3A%200%20.05em%200%20.1em%3Bvertical-align%3A%20-0.1em%3B%7D%3C%2Fstyle%3E')%7D)(jQuery.noConflict(true))%7Dvar%20s%3Ddocument.createElement(%22script%22)%3Bs.src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.1%2Fjquery.min.js%22%3Bif(s.addEventListener)%7Bs.addEventListener(%22load%22%2Ccallback%2Cfalse)%7Delse%20if(s.readyState)%7Bs.onreadystatechange%3Dcallback%7Ddocument.body.appendChild(s)%3B%7D)()
Select and drag to bookmarks bar
4 Likes
aw heck yea!!
Now let us me use Twemoji everywhere I go
But literally every site has a body tag…
but ok I guess
Some HTML compressors will auctally strip out the body tag for some reason
aboutdavid:
Not every site.
Wait, what? Having a body tag is standard HTML. In most browsers like Chrome and Firefox, they’ll automatically add it to the page.
2 Likes
I’ve seen many people put their site content in the head tag.
I don’t even know. Like I don’t even know.
2 Likes
Mkay, that’s quite bad…
and the bookmarklet you made @mayank1234cmd is quite cool
1 Like
things like glitchypastepen will automatically throw errors if you put non-head stuff in the head tag and non-body stuff in the body. I guess these are super old sites?
Anyways one possibility is to get an extension like dark mode, which always injects a link tag. and then append all this to the link tag (which will be in the head)
Whoops, the connotation was supposed to be “no text in head” and then (in reference to sites without body tags) must be super old?"
1 Like
