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>    

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

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>


Shusher

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>    

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


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:


<!-- MTG AUTOCARD BEGIN -->
<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'/>
<!-- MTG AUTOCARD END -->


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 19 October: READ THIS FOR NON BLOGGER DOMAINS

    24 comments::

    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.

    ivank 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

    "

    into

    & quot ; (no spaces)

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

    "

    into

    '

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

    Is this the problem?

    The Munson's Apps said...

    Hi!

    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:

    http://www.wizards.com/Magic/Magazine/Article.aspx?x=mtgcom/arcana/172

    ?

    thx

    Ivan Kirstein said...

    @Vance:

    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 Kirstein said...

    @Vance:

    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 Kirstein 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 Kirstein 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

    and:

    Links
    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 Kirstein 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 :)

    Ale Str said...

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

    My Site is

    http://www.slangersworld.com/index.php?page=magic

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

    Regards Alex

    Ivan Kirstein 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

    Ale Str said...

    Hi,

    it works now :)

    But the pictures are out of sight.

    See it by your own:
    http://www.slangersworld.com/uploadPub/testmagic.php

    I tried it with firefox.

    Regards Alex

    Ivan Kirstein 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?

    Regards,
    Ivan

    Ale Str 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:

    http://www.slangersworld.com/uploadPub/firefox.jpg

    On ie9 nothing happens


    Regards Alex

    Ivan Kirstein 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,
    Ivan

    Umarzuki Mochlis said...

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

    Ivan Kirstein 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

    Post a Comment