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

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

Try this other script for newer cards:

<!-- 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_standalone_v2.js' type='text/javascript'/>
<!-- MTG AUTOCARD END -->

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