Embed the latest XKCD, a particular XKCD, or a random XKCD
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.old
happs
lib
migrations
models
public
screenshots
search-engine
test/models
.gitignore
README.md
bookshelf.js
bookshelfer.js
config.js
config.json
knex.js
knexfile.js
package-lock.json
package.json
run_tests
upload
xkcd-embedder.nginx
xkcd-server.js

README.md

XKCD Embedder

A small bit of JS for embedding XKCDs. Embed the latest XKCD, a particular XKCD, or a random XKCD.

For sample usage see xkcd-embedder.fahmidur.us

Setup

In your header add the stylesheet:

<link rel='stylesheet' href='http://xkcd-embedder.fahmidur.us/css/xkcd-embedder.css'/>

At the end of your body place:

<script src='http://xkcd-embedder.fahmidur.us/js/xkcd-embedder.js'></script>

Usage

For the latest XKCD:

<div class='xkcd-embed' data-id='latest'></div>

For an XKCD with a particular ID:

<div class='xkcd-embed' data-id='1'></div>

For a random XKCD:

<div class='xkcd-embed' data-id='random'></div>

You can also set the maxWidth if you need it.

<div class='xkcd-embed' data-id='random' data-maxWidth='400px'></div>

Dependencies

None. This widget was designed to be embedded into someone else's webpage and it wouldn't be nice to impose any dependencies on the host page.

Screenshot when embedded

(Screenshot when logged in