Tuesday, May 17, 2011

Include MTG autocard popup in your website (even in Blogger)

If you want to include in your website a popup showing the card picture while passing mouse over a mtg link, this is your day.

mtg autocard sample

You only need to include these lines in your websites in order to trigger all links referring a concrete URL subdomain.

<script type="text/javascript">
     URL_START = "http://xxxx.com"; 

<script src="https://sites.google.com/site/themunsonsapps/mtg/autocard.js" type="text/javascript">

Replace http://xxxx.com with the url that you want. For example, if all of your magic links are like this:

Goblin Lackey, you should replace http://xxxx.com with http://gatherer.wizards.com/Pages/Card/Details.aspx?name= and see:

<a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?name=Goblin+Lackey" target="_blank">Goblin Lackey</a>

Goblin Lackey.

Tip: You can write URL_START = "http" to have all your links with popup. This is useful when you use several magic sources for your cards.

Another way to get the popup is with class styles. If you set the link address CSS style class to "mtgcard", you will get the pupup regardless the link destination, like in this case:

<a href="http://themunsonsapps.blogspot.com" class="mtgcard" target="_blank">Goblin Lackey</a>

Mox diamond

The last way to autocard is linking directly the card image that you want to use. Like this:

<a href="http://magiccards.info/scans/en/shm/222.jpg">Shusher</a>


This will trigger if you include the script in this way (as before, replace the url with yours):

<script type="text/javascript">
     URL_START_IMG = "http://magiccards.info/scans"; 

<script src="https://sites.google.com/site/themunsonsapps/mtg/autocard.js" type="text/javascript">

The params URL_START_IMG and URL_START are compatible, so you can include both if you want to have multiple choices, like in this blog or in magicnomola.

The code included in this blog is the code shown below:

<script type='text/javascript'>
  URL_START = "http://gatherer.wizards.com/Pages/Card/Details.aspx?name=";
  URL_START_IMG = "http://magiccards.info/scans/";

<script src='https://sites.google.com/site/themunsonsapps/mtg/autocard.js' type='text/javascript'/>

To include this feature in Blogger, you have two options to insert the script import:
  • Dashboard -> Template -> Edit HTML and insert the lines before the </body> tag (search it with Ctrl+F)
  • Dashboard -> Template -> Page elements -> add HTML/Javascript and insert the lines
If you use WordPress instead, you can have a look to this plugin WP MtG-Helper found at Distracted by squirrels.

If you prefer to host it, you can download it from https://sites.google.com/site/themunsonsapps/mtg.


Updated 14th January 2015: NON BLOGGER DOMAINS AND NEW CARDS

Try this other script for newer cards:

<script type='text/javascript'>
  URL_START = "http://gatherer.wizards.com/Pages/Card/Details.aspx?name=";
  URL_START_IMG = "http://magiccards.info/scans/";

<script src='https://sites.google.com/site/themunsonsapps/mtg/autocard_standalone_v2.js' type='text/javascript'/>

You can download a sample simple webpage here: https://sites.google.com/site/themunsonsapps/mtg/testsite.html?attredirects=0&d=1


    Steven said...

    any way to get this working on posterous? doubt it can but worth asking have several decks posted would like to add popup card info to.

    Ivan said...

    @Steven: I really don't know about posterous, but I've had a look at it and at the moment it seems that posterous doesn't accept javascript (see here).

    I've done a research and it seems that there are some tricks to include scripts in posterous. You need to host the html file containing the script and include it in your posterous site as an iframe. Here are two sites that explain it for other tasks: sample 1 and sample 2.

    I hope that this can be useful to you.

    sajarov said...

    You are a fckng master! thanx bro!

    Anominal said...

    I can't seem to get the autocard to work. I love that you're doing this, and I would appreciate some help.

    My site is www.mtgfiction.com

    It's a blogger site.

    I edited the html and inserted the code, but as soon as the code is saved, it changes every



    & quot ; (no spaces)

    In the first part of the script, and then it changes the




    in the second part of the script that searches for the script on your site.

    Is this the problem?

    The Munson's Apps said...


    quotes shouldn't be a problem. Where are you exactly inserting the code?
    It should go before < /body > tag or inside HTML/Javascript widget element!

    Which block of code are you inserting?

    VanceAnce said...

    sry that i spammed 2 times but now i tested out a bit

    1. could you clear this line and if other see my deletet comments those two also

    2. to add in the template - html part your script between the "/head" ending and "body" beginn it doesnt do anything ...had to replace in this comment < with " - just for note

    -> just add it in html style of a singe post and it works

    the meaning to add it in the template should be to avoid that writing it every single time in a single post ?

    3. is there a way to include the .js file directly in blogger ?

    didnt test your .js script just had a little overview and are those 4 files the ones who does the work / create the application ?

    is there a way to make this working - the directly one from WotC:




    Ivan said...


    2) It shouldn't go between the < /head > and < body > beginning, it should go inside the < body > tag, that's why say that it's easier to include it on the bottom of the body content, looking for < /body >.

    Regarding your second point, including it in the template or in the HTML/Javascript element avoids you to writing it on every post. It should work fine like in linked sites or this one.

    3) You can try copy/pasting the .js in the template or in an HTML/Javascript element, but I think it's quite simpler and easier to maintain if download it and upload it in your own server/Google site and refer to it.

    For the wizards script (I haven't used it, maybe is outdated), have you tried to put the < script > element in a Blogger HTML/Javascript element?

    VanceAnce said...

    first thx for your anser... i feel stupid now a bit that i didnt see the "/" before body :)

    hm i tried it now inside the body ... uhm function ?

    "body" otherstuff your-source "/body"

    butd didnt work either :( ? did i make sth wrong again

    sry im a noob in that

    mhm ok y think also it would be easier to link it to the .js files afert i read through them a bit :)

    ok - as soon i've more time i experiment a bit with the wizards script and generally get more into javascript :)

    thx again

    p.s. how did you manage to post < body ">"
    always i try that here i get an error :)

    Ivan said...


    It's so strange, it should work for you in the same way if you include it on the single post or on the template body. Maybe you're writing links wrong.

    This is the source code of my blogger template:

    < script type='text/javascript'>
    URL_START = "http://gatherer.wizards.com/Pages/Card/Details.aspx?name="
    URL_START_IMG = "http://magiccards.info/scans/";
    < /script>

    < script src='https://sites.google.com/site/themunsonsapps/mtg/autocard.js' type='text/javascript'/>

    < /body>

    Be careful with tag spaces. If you want, you can send me by mail your template and I'll have a look at it. You should also show me your post code, in order to know if the mistake is in the post.

    PS: You can post < > by using the HTML escaped chars: </body>. For the comments I use an space after the < that you have to delet to make it work! :-)

    Ivan said...

    Sorry, escaped chars for < and >: & lt; and & gt; (without space between & and the rest)

    VanceAnce said...

    thx again for your answer

    tried it agian and didnt work :(

    i tried those was:

    *put it after < /body> and nothing where else
    *put it after < /body> and in gadget java/html

    both didnt work

    just when i add it in the post itself

    hm...i feel "noobish" again - where can i find your mail/contact to send you my templet code :) ?

    when i place it at the end and before < /body> also the appearance of the blog changes a bit
    so i guess i do sth wrong :(

    Ivan said...

    You can find my email below these lines, just at the end of the website, on the attribution line.

    VanceAnce said...

    now i feel me even more stupid ...
    under your post i only can find this post section


    Create a Link

    Newer Post Older Post Home
    Subscribe to: Post Comments (Atom)

    Subscribe by email

    but no contact form or sth like that


    i hope i dont anoy you - sry for my many posts ^^
    but would be nice if i could get that working

    Ivan said...

    Don't worry Vance, but it's also strange that you don't see the Powered by blogger attribution.

    Try sending it out to themunsonsapps at gmail dot com

    Or if you prefer, share it with a hosted link and I'll have a look at it, just let me know.

    VanceAnce said...

    .... ok now i got it :D:D .... link didnt work cause i didnt config my mail client on my linux pc
    therefore i got a blank one ;)

    thx i mail it soon :)

    Unknown said...

    i can't make it run, please help me :)

    My Site is


    look at the source code, it is not verry complex ..

    Regards Alex

    Ivan said...

    @Ale Str,

    it seems that your site doesn't run the main code when loads the page, try putting it on a function and insert it on the body on load.

    I've run the main code on the Chrome console, and it came up. See this screenshot

    Unknown said...


    it works now :)

    But the pictures are out of sight.

    See it by your own:

    I tried it with firefox.

    Regards Alex

    Ivan said...

    Alex, I see pictures correctly with Chrome on your link (just as shown on my last post's screenshot). I made the script to displays cards starting on the right-bottom corner of the link, of course, you can modify your code to adjust it to your needs.
    If they're not displaying there, may I see a screenshot of your issue?


    Unknown said...

    Hi again,

    and merry christmas ;-)

    I tried it now with chrome, firefox and ie9

    On chrome everything runns fine..

    On firefox a made a snapshot, so you can see:


    On ie9 nothing happens

    Regards Alex

    Ivan said...

    I see Alex... I think it could be related to your server and the way it runs scripts depending on the User Agent.

    Have a look at this website, it runs the same script that I've shared and it works fine with every browser (at least on my computer).

    Try modifying the scripts by yourself adapting them to your needs.

    Regards and Merry Christmas,

    Umar said...

    does not seem to work on latest blogger template e.g.:
    Live on Blog

    Ivan said...

    It works with latest blogger template, this blog is an example. Maybe you're trying with a different domain. Could you share with us what you've tried?

    website design said...

    Great Post, I love to read articles that are informative and actually have good content. Thank you for sharing your experiences and I look forward to reading more.
    website design

    gwago said...

    This is great, I was frantically looking for a way to do this and found this blog by accident. Thanks!
    I do have one request: I'm trying to post up decklists in the usual format (three columns, with a card to the right that displays whatever is currently being floated over). Any pointers on how to do this?
    Thanks again for the script!

    The Munson's Apps said...


    that's definitely possible, in fact, we supported http://mtgdesignspain.blogspot.com on achieving it. How are your javascript skills?

    If you've opened the code, you should replace the div with the image on it. It should be straight forward, but feel free to mail us with your queries.

    Unknown said...

    Just wanted to say thanks guys, I read through your instructions and was able to get autocard installed on my blog pretty painlessly. It looks pretty cool right now I think.

    The only thing I have noticed is that cards from Journey into Nyx onwards don't show a picture, but those co-incide with all the cards which also show no comments on Gatherer. Don't know if that is worth mentioninng?

    Anyway, big thanks for the app, its great, and has made my blog http://confessionsofagamesmaster.blogspot.co.uk/ looks better for it.


    The Munson's Apps said...

    Hi Gareth,

    thanks for letting us know. We've added an update at the bottom with a new script, that should sort out the issue with new cards.

    Hope that helps!

    Unknown said...

    Hi guys,

    I have added the new script to my blog, but so far to no avail. Do I replace the previous script, or do i add the new one in addition?

    Thanks for the help

    The Munson's Apps said...

    Hi Gareth,

    sorry, file path was wrong. Can you retry now?

    Thanks and regards

    Unknown said...

    That is officially superb! Thanks very much, it is working like a charm, cheers for the support guys.

    Unknown said...


    Love the work. Thanks! However, I still can't get the popup to work on my site.

    1. I uploaded the autocard and gatherer helper files to my site.
    2. I added the 'new cards' script to my theme (view-source:http://www.galactictreasures.com/).
    3. I added the link to a post (http://www.galactictreasures.com/blogs/the-magic-buzz-feed/16484921-soulfire-is-here-to-reforge-your-fate).

    Not sure what I'm doing wrong. Can you help me?

    Kind regards,

    Luis Margarida said...

    I dont know where to add the script. Should I add HTML/javascript in the layout properties in blogger?

    I'm pretty lost...
    Have tried to make this work for months...

    Ivan said...

    Sorry for the delay replying!

    @garlicburp: I'm not able to open the provided link. Feel free to mail us with your query and we'll reply as soon as possible.

    @Luis Margarida: HTML/javascript widget in the layout section should be enough, is it working?

    Unknown said...

    Hi, does this code work on tumblr ? I'm sorry I am trying to improve my tumblr but I couldn't find a tutorial, thanks :)

    Ivan said...

    We're not sure about Tumblr, sorry for that!

    Nancy V said...

    I must say that's an impressive post.

    Cruz Adcox said...
    This comment has been removed by a blog administrator.
    Thallys Vieira said...

    Is it still working? For some reason I can't make it work. :/

    Ivan said...

    @Thallys could you share with us what you have done? is there any site that we can see?

    Unknown said...

    Hi Ivan,

    Thanks for your work!

    I suceeded in apllying the code in our blog page but for some reason it's not pulling the images from Amonkhet, the new edition, despite already being on gatherer.

    Have any idea why this is happening and what can i do to fix it? The page is here just for your reference http://guardian-adventure.blogspot.pt/


    Publish your passions said...
    This comment has been removed by a blog administrator.
    Project MTG said...

    Hi there! I'm hoping that you may be able to assist me in getting this to work on my Wix website. Here's the page it's on: https://www.projectmtg.com/single-post/2018/03/20/Standard-Deck-Tech---Grixis-Pirates.

    Here's the code that is in between body and /body:

    script type="text/javascript"
    URL_START = "http://gatherer.wizards.com/Pages/Card/Details.aspx?name=";

    script src="https://sites.google.com/site/themunsonsapps/mtg/autocard.js" type="text/javascript"


    It's like the .js isn't being called or something as I don't get a pop-up when I mouse-over Hostage Taker in the first paragraph. Here is the link code:

    a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?name=Hostage+Taker" target="_blank" data-content="http://gatherer.wizards.com/Pages/Card/Details.aspx?name=Hostage+Taker" data-type="external" rel="undefined">Hostage Taker/a

    Any help is greatly appreciated!

    Azeem said...

    There are certainly a lot of details like that to take into consideration. That is a great point to bring up. I offer the thoughts above as general inspiration but clearly there are questions like the one you bring up where the most important thing will be working in honest good faith. I don?t know if best practices have emerged around things like that, but I am sure that your job is clearly identified as a fair game. Both boys and girls feel the impact of just a moment?s pleasure, for the rest of their lives.
    metal slug 1

    Arya Steve said...

    I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. website development agency

    williamoliver172 said...

    Mesmerized article written on this blog with other relevant information. It is straight to the point that how we can improve our skills as well as how we can be represented to a new stream of professionalism. Soccer trading card game

    Themeringtones said...

    Thanks for sharing this very valuable information i enjoy to read your blog thanks for sharing this is very good post.
    christmas songs
    80s hit songs

    jamesharry521 said...

    I gained new knowledge from well written content of this blog. It is showing some different kind of strategy to keep work better and improve with every new assignment. Gracefully written blog Servidores Dedicados No Brasil

    Love Spells Canada said...

    Love spells have genuinely changed the lives of many humans, and you're only one step a long way from doing this as properly. Meet the experience of a better love existence. Here you may be able to discover some of spells so one can be able to assist in any situation that you are going through as well as assist you in all your desire to bring about something into your relationship or love lifestyles.

    tike mik said...

    When you take your Spanish holiday in La Manga, be sure to make time for peaceful and relaxing walks through the surrounding countryside.


    Kristen Brown said...

    My own perspectives are coordinating with creator and I have encountered such. Your blog is extremely instructive. Image Vectorizer Mac

    glory robert said...

    My husband left me for another woman after one year of our marriage. I needed him back desperately because i loved him so much. I became very worried and needed help. On this faithful day  as i was browsing through the internet, I came across a particular testimony about this good DR IROSI help get ex back fast and stop a divorce or breakup and so on , So I felt I should give him a try. I contacted him and he told me what to do and i did it then he did a (return Love spell) for me. 48 hours later, my husband came back to me crying and begging for my forgiveness. Today I’m so happy and i want to recommend this great spell caster to anyone that truly needs an urgent solution to his or her broken relationships and marriage email him at:(DRIROSISOLUTIONCENTER@GMAIL.COM) or call/whatsapp him via: +2348118829771..   

    arkseo said...

    I was reading some of your content on this website and I conceive this internet site is really informative ! Keep on putting up. blackmart apk latest _ APKForAll.Com

    arkseo said...

    Your website is really cool and this is a great inspiring article. blackmart apk free download 2016 _ APKForAll.Com

    Joseph Whitaker said...

    This is my first visit to your web journal! We are a group of volunteers and new activities in the same specialty. Website gave us helpful data to work. best android app creator

    Vicky said...

    Find best wishes quotes and messages for every occasion and events. Also use our poems, messages, wishes, and quotes to express your thoughts. Eid Mubarak , EId Mubarak 2020 ,  Happy Eid Mubarak ,
    Eid ul Adha Mubarak 2020 , Eid Mubarak Images , Eid Mubarak Images 2020 , Eid Ul Adha  Images , Eid Mubarak Wishes , Eid Mubarak Wishes and Quotes , Eid Mubarak Wishes 2020 , Eid Mubarak Wishes and Quotes 2020

    Mr Rahman said...

    Really Great Post & Thanks for sharing.

    Oflox Is The Best Website Design Company In Dehradun

    Unknown said...

    I read that Post and got it fine and informative. Website

    Post a Comment