JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Gfycat2BBCode Bookmarklet</h1>

<h2>What?</h2>

<p>This is a bookmarklet that provides you with the BBCode for a linked thumb from <a href="http://gfycat.com">Gfycat.com</a> to post in forums or anywhere that takes BBCode.</p>

<h2>Why?</h2>

<p>Gfycat does not provide BBCode to copy. And, even if they did, this uses a small static thumb (og:image meta) with a link because some forums prefer that instead of the actual gif.</p>

<h2>How?</h2>

<ol>
    <li>Drag this to your bookmarks bar:<br />
        <a href="javascript:(function()%7B(function()%7Bvar%20metas%20%3D%20document.getElementsByTagName('meta')%2Cthumb%2Curl%3Bfor%20(var%20i%20%3D%200%2C%20ii%20%3D%20metas.length%3B%20i%20%3C%20ii%3B%20i%2B%2B)%20%7Bif%20(%20metas%5Bi%5D.getAttribute('property')%20%3D%3D%3D%20%22og%3Aimage%22%20%26%26metas%5Bi%5D.getAttribute('content').match(%2Fthumb100%5C.jpg%24%2F)%20)%20%7Bthumb%20%3D%20metas%5Bi%5D.getAttribute('content')%3B%7Dif%20(%20metas%5Bi%5D.getAttribute('property')%20%3D%3D%3D%20%22og%3Aurl%22%20)%20%7Burl%20%3D%20metas%5Bi%5D.getAttribute('content')%3B%7D%7Dif%20(thumb%20%26%26%20url)%7Bwindow.prompt('copy%20BBCode'%2C%20'%5BURL%3D%22'%20%2B%20window.location.href%20%2B%20'%22%5D%5BIMG%5D'%20%2B%20thumb%20%2B%20'%5B%2FIMG%5D%5B%2FURL%5D')%3B%7Delse%20%7Balert(%22Sorry%2C%20couldn't%20find%20a%20thumb%20and%20url%20on%20this%20page%22)%3B%7D%7D)()%7D)()" class="bookmarklet">Gfycat2BBCode</a></li>
    <li>Click the bookmark on the Gfycat page after you upload a gif</li>
    <li>Press Ctrl + c (or ⌘ + c) to copy the BBCode from the prompt</li>
</ol>

CSS

body {
  font: 100 normal 100%/1.5 sans-serif;
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
  color: #444;
}

h1, h2 {
  color: #000;
}

.bookmarklet {
  display: inline-block;
  padding: 0.5em 1em;
  margin: 1em 0;
  background: #0af;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 1em;
}

.bookmarklet:focus,
.bookmarklet:hover {
  background: #6cf;
}