Issues adding GitHub gist to my blog (using Google blogger)

Question

I'm trying to add a gist to my blog to see how it works and use it to share some code related blogs going forward.

I've followed the steps mentioned form this blog, but I'm not able to get it to work. I don't know what I'm missing, any pointers on what I could be missing would be really appreciated.

My HTML editor of blog related code looks like this:

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
Loading ....</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script> </div>

Update

(I have also changed the code above).

I found one thing confusing for a while, why should I actually paste a div tag in the "Compose" Section of the Blog, it's after all HTML code, so I moved it to the HTML editor part of the Blog. What was confusing to me initially was when it was mentioned in the blog:

Now to include any gist template just add the following anywhere in your blog post.

But anyways, now, I only get "Loading" .. The error still persists..

Problematic

Off topic since this isn't about coding and instead posting to a blog with an embed. Which is better for Web Apps. – Jew

I think it even has to do with coding, as you need to put the right code as mentioned in the blog in the right place to get this working. Also, why else do you think are people upvoting this question and marking it as favorite in stack overflow itself ? – Problematic

Same as if you were embedding a tweet with code in it. Or a Facebook post with a code block. Doesn't make it about programming. – Jew

Answer 1

Here's the code that did it correctly for me. I had to ensure that within the div I copy the code that comes as part of 'Embed the gist' when you actually see one's real gist(say for e.g., this gist) on Github.

Also, one more mistake I made was in my code, the JS was not completely outside the post(it was actually inside the last div if you observer closely(my bad)). Anyways, All's well that end's well :). So here's the code that did the trick for me -

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
<script src="https://gist.github.com/boddhisattva/4132084.js"></script>

In case you want to see how I was able to embed the gist in my blog, you can have a look
at the stackoverflow question that I <a href="https://mcmap.net/q/1457331/-issues-adding-github-gist-to-my-blog-using-google-blogger/21355714#21355714">posted here</a> on the same when I had initially faced issues to get this to work for me.

Credits to the original <a href="http://blog.moski.me/2012/01/gist-with-bloggers-dynamic-views.html">blogger's post</a>. 
</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>

Here's the actual blog link which uses the above code.

Cheers.. :)

Problematic

I have followed the exact same steps as mentioned. Still getting just the Loading.. text. Apparently now the gistId has turned into a large alphanumeric string containing atleast 15-20 characters. I have been using that. Any suggestions please? – Bartley

It should work with the new gist id as well. If you copy the above HTML code in the answer as is and try viewing this in a new post using the Preview option, you should be able to the embedded gist within the blog. If you're able to see it , then there is something wrong in the HTML code wrt your blog. Also, without any code it's difficult for anyone to pin point what you could be missing. Try sharing those details via a gist/another SO question and I'll try answering it. Also, I'd suggest you try this with a small blog and if that works well then try replicating a similar setup for a larger 1 – Problematic

Just today I tried using the Embed URL feature(I think this feature was recently introduced) provided by Github as part of every gist. You don't need to do the steps mentioned in the above answer anymore. Adding their Embed URL as is to the HTML section of the blog did the trick. – Problematic

at least in preview mode (I'm not going to publish something just to see if one part looks right, as it triggers things like automatic tweeting about the post) I get Refused to execute script from 'https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. in chrome – Amii

Answer 2

A simpler solution (since October 2014): www.gistfy.com:

Gistfy is an easy way to create embeddable code snippets from your GitHub and Bitbucket repositories or your GitHub Gist.

For example:

<script type='text/javascript' src='http://www.gistfy.com/github/gist/10666727'></script>
                                                                         ^
                                                                  (id of a GitHub Gist)

Womanly

Hi VonC, Thanks for sharing this. I actually tried out your solution I could see the gist rendered on www.gistfy.com but it didn't seem to render within blogger for some reason. – Problematic

The blogger preview doesn't appear to show the gist, but once it's published, the gist appears inline. – Oresund

Answer 3

The blog post you mention explains everything clearly and it's all you have to do. I'll describe what I did:

1. I copied the <script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script> into a widget that is dynamically loaded into each blog page (posts, pages, everything). This will not work, because, as being said, include the following code at the end of each of your blog posts. This means you have to include it separately in al your posts. Yes, I don't like it as well, but the blog entries are loaded dynamically, so you have to load gists after the original blog entry is loaded.

2. Put the <div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div> just where you would put original github gist code. For example - this is a gist I wanted to display on my post. This is the original code: <script src="https://gist.github.com/tkoomzaaskz/6235219.js"></script>. The gistID is 6235219. So, instead, I put <div class="gistLoad" data-id="6235219" id="gist-6235219">Loading ....</div>. And in the end of the post, I put the javascript source from point 1.

This blog post is an example that it works fine.

Subtle

Your answer gave me some insights into a mistake I had made when I had first tried it. +1 for your pointers.. Thank you. – Problematic

One more thing to add. I have submitted my blog to planet.python.org, a Python RSS aggregator. It loads entire content, but doesn't fire any javascript there. So if replaced "Loading..." with "Loading my-gist-url" to make planet-python-readers to understand what's going on. Thanks to this, they either click the URL themselves or visit my blog post directly. In other words, a blank paragraph with "Loading..." content would probably confuse people. – Subtle

Answer 4

I dont know, whether your are trying gist content made it as private or public. Here are the few steps for how to implement PUBLIC gist code into your blogger.

1) Create a gist file in gist.github.com(While you save the file just choose as "Create Public Gist"

2) Take/copy the code "Embed URL" text box(almost you done).

3) Login to your blogger and add copied code into your desired posts. Thats all. Your public gist code will display in your page.

Actual article from here

Bettiebettina

Hi Madhan, thanks for your answer, I was able embed a gist within my blog and I've posted the answer on how I went about doing the same. I was doing this for a public gist. – Problematic

@Problematic Nice to hear from you. somehow my answer was useful. Thanks – Bettiebettina

Answer 5

For me it was because i was using dynamic view template on google blogger. When i changed it to simple then the javascript was working and showed the gist.

Clap

Answer 6

The 3rd party github hosted file tag didn't work for me at all. - <script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>

failed in chrome with Refused to execute script from 'https://raw.github.com/moski/gist-Blogger/master/public/gis‌​tLoader.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

The embed links on github's site work, but for those wanting to avoid the reliance on a script link, I wrote code to pull down what the embed link serves up and decode it for pasting into blogger. LinqPad code at https://github.com/ImaginaryDevelopment/LinqPad/blob/master/LINQPad%20Queries/LanguageTranslators/fetch%20then%20parse%20gist%20html.linq

Amii

Answer 7

Kindly look for the Embed code ofrthe gist, i found out it to be

<script src="https://gist.github.com/boddhisattva/4132084.js"></script>

The just create a blogpost in blogger.com with just the above script, it's that easy

Henna