Home > Kartra > Pages > Social Media Link Preview CSS Workaround

Social Media Link Preview CSS Workaround

At this time, Kartra does not natively support the selection of a social media preview image. However, we have a workaround that may help you achieve this goal!

Please note that because this workaround uses custom code that is outside of Kartra's native function, the Kartra customer service team is very limited in the support we are able to provide related to it. As with any custom code, we recommend you take caution when using it and consider testing the function on a cloned page before implementing on all your pages.

Here's how you do it:

1. Upload the preview image you want to use to the internet. If you have a Wordpress site, for example, upload the image to your media library.

2. Find the full web address of your image and either leave the window open for easy reference or paste the URL into a note on your computer. We're going to need it later in these instructions. The web address will look something like this: http://your-custom-domain.com/media/image.jpg

3. Open your Kartra page in the page builder and click "Styles" in the main menu. At the top of the configuration menu, click  "Custom Styles."

4. Copy the code below exactly and paste it into the bottom of the custom code area. Be sure to fill out the bold sections with your information


<meta property="og:image" content="http://www.your-custom-domain.com/media/image.jpg" />

<meta property="og:description" content="Your entertaining and descriptive copy here, if your meta description is good, use it." />

<meta property="og:title" content="Your eye-catching title here" />


IMPORTANT: If you are using custom CSS on the page, make sure you paste this code snippet at the very bottom of the code box. It should come after any custom CSS that you are using.

5. Replace the text indicated in bold with your image URL and descriptive copy. Remember to leave the quote marks in there, they're very important

6. That's it! Apply your changes and publish the page. Next time you share it on Facebook or another social outlet, it should automatically retrieve the image and descriptive content you specified in these tags.

If you're still having trouble getting the preview content to show correctly, it may be because Facebook has previously cached the preview for the page you're trying to share. 

To force Facebook servers to clear their cache, use the Facebook Url Debugger / Linter Tool (https://developers.facebook.com/tools/debug) to refresh the cache and troubleshoot any meta tag issues on your page. You may need to run this multiple times before the preview will show correctly.