Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
embed github gist to tumblr
<!-- Add the following lines to theme's html code right before </head> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/fpifyru/VCxlv9xwi/writecapture.js"></script>
<script src="http://static.tumblr.com/fpifyru/AKFlv9zdu/embedgist.js"></script>
<!--
Usage: just add <div class="gist">[gist URL]</div>
Example: <div class="gist">https://gist.github.com/1395926</div>
-->
@levigroker

This comment has been minimized.

Copy link

commented Jan 20, 2012

Rockstar! Thanks for this!

@maxjustus

This comment has been minimized.

Copy link

commented Feb 28, 2012

Yeah!

@marclove

This comment has been minimized.

Copy link

commented May 2, 2012

Thanks for this!

@mikeebert

This comment has been minimized.

Copy link

commented May 3, 2012

thanks!

@levigroker

This comment has been minimized.

Copy link

commented May 7, 2012

Interesting... this seems to be broken recently with Tumblr's new Facebook integration. I now get some Facebook OpenGraph code inserted in the comment at line 1, and removing the comment does not help (the gist link/content simply does not appear). Ideas?

@soemarko

This comment has been minimized.

Copy link
Owner Author

commented May 8, 2012

@levigroker, it's possible there might be some conflicting script (not likely, but still possible). I just connect my tumblr with facebook, and the script still working...

You can view the source for my code at: http://blog.soemarko.com/post/13373942149/embedding-github-gist-to-tumblr
WriteCapture: https://github.com/iamnoah/writeCapture
jQuery: well you should know where that is...

@ernest-ns

This comment has been minimized.

Copy link

commented May 31, 2012

Thanks, it works!!

@Nek

This comment has been minimized.

Copy link

commented Jun 22, 2012

Thanks a lot! The only thing I miss is linking to single file from a gist. Maybe I fix it someday if it's not to hard.

@americos

This comment has been minimized.

Copy link

commented Jul 20, 2012

Thanks. Works like a charm

@mtheoryx

This comment has been minimized.

Copy link

commented Aug 10, 2012

I'm not getting any syntax highlighting for some reason. Any ideas? Here's the post:

http://imatotalgeek.tumblr.com/post/29136236829/embed-a-gist-in-tumblr-yep

@codenamev

This comment has been minimized.

Copy link

commented Sep 6, 2012

But what if I want to only embed one snippet of a gist? I modded your script to handle it:

https://gist.github.com/3656754

@yosiyuki

This comment has been minimized.

Copy link

commented Oct 12, 2012

thanks!

@shabdar

This comment has been minimized.

Copy link

commented Oct 13, 2012

Awesome, thanks!

@Ray4hz

This comment has been minimized.

Copy link

commented Nov 15, 2012

Thanks!

@Ray4hz

This comment has been minimized.

Copy link

commented Nov 15, 2012

Thanks!

@Ray4hz

This comment has been minimized.

Copy link

commented Nov 15, 2012

Thanks

@johngag

This comment has been minimized.

Copy link

commented Nov 30, 2012

<3 Thanks!

@chrishough

This comment has been minimized.

Copy link

commented Dec 10, 2012

works perfectly, thanks!

@edipofederle

This comment has been minimized.

Copy link

commented Jan 18, 2013

@suzel

This comment has been minimized.

Copy link

commented Jan 21, 2013

Thanks :)

@abbeycode

This comment has been minimized.

Copy link

commented Jan 22, 2013

My code looks like edipofederle's a couple posts above (whether I use this embed, or the embed provided on the Gist sidebar).

@mapio

This comment has been minimized.

Copy link

commented Jan 25, 2013

Perhaps a simpler solution can be obtained using the .pibb secret extension, instead of the .js one + writecapture… see for example https://gist.github.com/1395926.pibb

@likejazz

This comment has been minimized.

Copy link

commented Jan 30, 2013

thanks a lot!

@zmcartor

This comment has been minimized.

Copy link

commented Mar 13, 2013

Receiving 'control-allow-origin' errors when attempting to load gists. Requests return 404 from Github, although it appears Chrome smacks them down. Any ideas or workaround ?
Gists are accessible when requested via GET in browser or cURL.

@neilvilela

This comment has been minimized.

Copy link

commented Apr 3, 2013

Thank you!

@soemarko

This comment has been minimized.

Copy link
Owner Author

commented Apr 3, 2013

For those having interface problems, they're caused by the inherited CSS from the theme.

In this case, inspect element is your friend. If the theme is done right, you should be able to override it from {CustomCSS}

@calvinmetcalf

This comment has been minimized.

Copy link

commented Jul 2, 2013

this really screwed up my page, gists are available as jsonp which means you can do https://gist.github.com/calvinmetcalf/5910196

@hamedqaderi

This comment has been minimized.

Copy link

commented Jul 20, 2013

It shows me just nothing. Why?

@kroneldo28

This comment has been minimized.

Copy link

commented Aug 15, 2013

Thank you. It worked for me.

@metasansana

This comment has been minimized.

Copy link

commented Sep 1, 2013

forking!

@otkrsk

This comment has been minimized.

Copy link

commented Nov 20, 2013

Awesome! Thanks for this!

@glennblock

This comment has been minimized.

Copy link

commented Jan 28, 2014

Cool! I took a slightly different approach and did this on the server. It requires a slight mod to posts.js.

https://gist.github.com/glennblock/8662218

The difference here is that it supports the terse Wordpress gist plugin model i.e. [gist id=xxxxxxx]

@davidmurray

This comment has been minimized.

Copy link

commented Jun 7, 2014

Awesome, thanks!

@djabif

This comment has been minimized.

Copy link

commented Jun 12, 2014

thanks!!!!

@btcrooks

This comment has been minimized.

Copy link

commented Oct 3, 2014

I rather use this than embed with prettify.js. Thanks for the work mate!

@lzubiaur

This comment has been minimized.

Copy link

commented Jan 6, 2015

Thank you. Works great!

@swbuehler

This comment has been minimized.

Copy link

commented Jul 20, 2015

This is awesome, guys; keep up the great work!

@ivanhjc

This comment has been minimized.

Copy link

commented Sep 11, 2015

How about Blogspot? I haven't found any way yet to embed code into posts. Please help!

@AbhimanyuAryan

This comment has been minimized.

Copy link

commented Oct 24, 2015

After I add this there .js links in my theme the post starts repeating over my blog "Same post appear twice". Please consider fixing it.

You can have look.

rubygemer.tumblr.com

@tryvin

This comment has been minimized.

Copy link

commented Nov 1, 2015

A little update to this code, as Tumblr Rich text editor kindas mess with the "div' tag

https://gist.github.com/tryvin/74c72bdae96f21e844a0

@acedubs

This comment has been minimized.

Copy link

commented Sep 17, 2016

:: nasa-mems.tumblr.com .C("foo", n=as.integer(5), x=as.double(rnorm(5)))
with fooz implemented as

void fooz(int *nin, double *x)
{
int n = nin[0];

int i;

for (i=0; i<n; i++)
x[i] = x[i] * x[i];
}

@zbroyar

This comment has been minimized.

Copy link

commented Apr 11, 2017

Using this I can see my gist embedded only for a second. Then it changes to the following message:
window['__document_write_ajax_callbacks__']['1']();
What am I doing wrong?

@raphaelyancey

This comment has been minimized.

Copy link

commented Jun 29, 2017

Works on desktop but seems to be broken on mobile: only the URL is displayed. Anyone else experiencing it?

Edit
It's Tumblr custom mobile theme that somehow break the gist. You must disable it in the blog appearance settings, under Advanced options at the bottom of the sidebar (where you can set custom CSS). But then the embed will take full width and break the page on mobile. To correct that : .gist-data { max-width: 90vw; }.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.