code.Atomic8Ball.com

Add This Event instructions

Full installation instructions:
http://addthisevent.com/#install
(this page also allows you to generate a static landing link to include on a newsletter)

  1. jQuery

    Confirm or add the following snippet to the head tags <script type="text/javascript" src="https://code.a8b.co/js/addthisevent.js" defer="defer"></script>
    <script type="text/javascript">addthisevent.settings({ license: "a30d2d5sfz53fffh4mq7" }); </script>
    If you want to use a CSS package you also need to suppress the default styling by adding ", css:false" after the license key so that it looks like this: <script type="text/javascript">addthisevent.settings({ license: "a30d2d5sfz53fffh4mq7", css:false }); </script>

    If site has head.js implemented then your head tags will look like this: <script type="text/javascript">head.load("https://code.a8b.co/js/addthisevent.js");</script>
    <script type="text/javascript">head.ready(function(){addthisevent.settings({ license: "a30d2d5sfz53fffh4mq7" }); });</script>

  2. Default appearance
    Default Appearance
    Add this HTML snippet where you want your add to calendar link to appear: <a href="http://example.com/link-to-your-event" title="Add to Calendar" class="addthisevent">Add to Calendar
      <span class="_start">DATE TIME</span>
      <span class="_end">DATE TIME</span>
      <span class="_zonecode">15</span>
      <span class="_summary">Summary of the event</span>
      <span class="_description">Description of the event</span>
      <span class="_location">Location of the event</span>
      <span class="_organizer">Organizer</span>
      <span class="_organizer_email">Organizer e-mail</span>
      <span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
      <span class="_all_day_event">false</span>
      <span class="_date_format">DD/MM/YYYY</span>
    </a>

    Pick the appropriate zonecode:
    3 Hawaii
    4 Alaska
    6 Pacific
    7 Arizona
    9 Mountain
    11 Central
    15 Eastern
    16 Indiana

    Notes:
    Replace the href with ="#" if there's no external link to the event.
    DATE = xx-yy-zzzz
    TIME = hh:mm:ss (in 24 hour time)
    Remove the facebook event if there's no link for it.
    Change all_day_event to "true" if it's an all day event.
    None of these fields are mandatory, but they'll provide more information into the event calendar if you fill them out.

  3. Customize Appearance (Optional)

    Flag the script with "css : false" per above.

    Banner Appearance
    Banner Apperance

    Link CSS file in head: <link rel="stylesheet" type="text/css" href="https://code.a8b.co/addthisevent/banner.css" />

    Use slightly different HTML block on the page: <div class="addthisevent">
      <div class="date">
        <span class="mon">MON</span>
        <span class="day">DAY</span>
        <div class="bdr1"></div>
        <div class="bdr2"></div>
      </div>
      <div class="desc">
        <p>
            <strong class="hed">EVENT TITLE</strong>
            <span class="des">Location: LOCATION<br />
            When: TIME - TIME</span>
        </p>
      </div>
      <span class="_start">DATE TIME</span>
      <span class="_end">DATE TIME</span>
      <span class="_zonecode">15</span>
      <span class="_summary">Summary of the event</span>
      <span class="_description">Description of the event</span>
      <span class="_location">Location of the event</span>
      <span class="_organizer">Organizer</span>
      <span class="_organizer_email">Organizer e-mail</span>
      <span class="_all_day_event">false</span>
      <span class="_date_format">MM/DD/YYYY</span>
    </div>


    Modern Appearance
    Modern Appearance

    Link CSS file in head: <link rel="stylesheet" type="text/css" href="https://code.a8b.co/addthisevent/modern.css" />

    Use the default entry, but add the arrow above the <span class="_start"> <span class="arrow">&nbsp;</span>


    Plain Text Appearance
    Plain Text Appearance

    Link CSS file in head: <link rel="stylesheet" type="text/css" href="https://code.a8b.co/addthisevent/plain-text.css" />

    Use the default entry.


    Icon Appearance
    Icon Appearance

    Link CSS file in head: <link rel="stylesheet" type="text/css" href="https://code.a8b.co/addthisevent/icon.css" />

    Use the default entry.
    Remove the "Add to Calendar" display portion of the <a> tag.