Change the Preview Image for Social Media

When you share your event on social media you'll see the AddEvent preview image by default. You can replace this image with a custom image, which is a simple way to personalize your event and help your users recognize your events when you share them.

To change the preview image of your event or calendar link, follow these steps:

Creating a Template

  1. Scroll down to the first sharing method, Event landing page. Create a custom event landing page template by clicking Custom Templates in the app and clicking + New Template. Add a name for the template.

Changing the Preview image

  1. To change the preview image, change the source URL for the open graph image ("og:image") shown in the screenshot in Step 2. You can use any publicly available link to an image to replace the preview image. You can also refer to the How to get a public image URL from the image manager help doc for steps on how to upload an image and link to that image within AddEvent. You can also grab the code below and paste in your own image links.

    <html>
    <head>
      <title>AddEvent</title>
      <meta name="Description" content="" />
    
      <!-- Open graph meta tags -->
      <meta property="og:title" content="{{title}}" />
      <meta property="og:description" content="{{description}}" />
      <meta property="og:image" content="https://cdn.addevent.com/customers/20220203165708.png" />
    
      <!-- Twitter cards -->
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content="" />
      <meta name="twitter:title" content="{{title}}" />
      <meta name="twitter:description" content="{{description}}" />
      <meta name="twitter:image" content="https://cdn.addevent.com/customers/20220203165708.png" />
    
      <meta charset="utf-8" />
      <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width" />
      <meta name="robots" content="noindex, follow" />
      <link rel="canonical" href="https://www.addevent.com/event/{{event-id}}" />
    
      <!-- Fonts and stylesheet -->
      <link type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" media="all" />
      <link type="text/css" href="https://cdn.addevent.com/libs/evt/css/events.landingpage.v2021.css" rel="stylesheet" media="all" />
    
      <!-- jQuery + jQuery UI + landing page script (DON'T REMOVE) -->
      <script type="text/javascript" src="https://cdn.addevent.com/libs/jquery/jquery-3.5.1.min.js"></script>
      <script type="text/javascript" src="https://cdn.addevent.com/libs/evt/js/events.landingpage.v20210916.js"></script>
      <script type="text/javascript" src="https://cdn.addevent.com/libs/general/qrcode.min.js" async defer></script>
      <script type="text/javascript" src="https://cdn.addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>
    
    </head>
    <body>
    
    <div class="wrap">
      
      <div style="clear:both;margin:0px 0px 10px 0px;">
        <img src="https://media.istockphoto.com/photos/group-portrait-of-a-creative-business-team-standing-outdoors-three-picture-id1146473249?s=612x612" alt="" style="display:block;width:100%;max-width:100%;" />
      </div>
      
      <div class="box">
    
    
  2. You can also choose to update the image for sharing on Twitter by changing the source URL for the Twitter image ("twitter:image") shown in the screenshot.

  3. Save the custom landing page template by clicking Save at the bottom of the page. From the event/calendar page, choose your new custom template from the dropdown, and click Set to apply it to your event or calendar and to see the new preview image

Tips & tricks

When you create an "Open Graph" image for your templates, you are recommended to follow guidelines for the social media channel you are targeting.

Best image sizes for Facebook

  • Horizontal (landscape) images: 1,200 x 630 pixels
  • Vertical (portrait) images: 1,080 x 1,350 pixels
  • Links with an image: 1,200 x 630 pixels
  • Facebook Stories: 1,080 x 1,920 pixels

Best image size for LinkedIn

  • Sharing horizontal images to a company page or personal profile: 1,104 x 736 pixels
  • Sharing links with an image to a company page or personal profile: 1,200 x 628 pixels

Watch this tutorial!