This article will cover what social share badges are, why they're so powerful, how to create and edit your badges using our live editor.
Below you can see a video tutorial that will walk you through the entire process of setting up your Social Share Badge, using Thrive Quiz Builder:
What is a Social Share Badge?
A social share badge is a graphic that usually includes an attractive image and the result that the user has obtained. Here's an example of a social badge from a typing web site called 10fastfingers.com:
The main purpose of a badge is to attract social shares.
Why are social badges so shareable?
Firstly, they are usually designed to be colorful and attention-grabbing in order to garner attention far more than a simple text result. They include the personalized result that the user has obtained.
Finally, they also usually contain some kind of call to action or teaser in order to encourage the "friends" of the visitor to participate themselves. In the example above, the teaser is "Are you faster?"
How do I Create a Social Share Badge?
You'll be pleased to know that Thrive Quiz Builder comes complete with a fully featured live social share badge editor.
This means you can quickly and easily create these badges from within your WordPress website.
Here's how you do it:
1) Open the Social Share Badge Editor
The live social share badge editor can be accessed from the dashboard of any quiz that you've created:
Simply click on the section that says "Create a social share badge".
2) Select a Social Share Badge Template
A lightbox will appear asking you to choose a template:
You can either start from scratch by selecting the "blank" template or you can choose an existing template that is close to the style that you like.
The Thrive Live Social Badge Editor
Allow me to introduce you to the new social badge editor:
- You can add text to your social share badge by dragging and dropping this element onto the canvas;
- In the "Color Overlay" section, you can add an optional layer of color that sits above the background image. This can be useful if you add a bright background image and you want to make the foreground text more readable;
- In the background image section, you can optionally add your own background images by clicking "Replace image". You can also change the size and the position of the existing background image by clicking on the "Size & Position" button;
- If you click the "Preview" button, a lightbox will appear to give you a preview of your badge with a randomly generated result;
- The undo/redo buttons give you a safety net so that you can reverse changes that you don't want to keep;
- You can use the %result% shortcode in any text element - this will be replaced by the result that the visitor achieves at the front end of the quiz.
Changing the Background Image
The background image is probably the most crucial part of creating a good social share badge. You should choose an image that garners attention.
You can change the background image at any point by clicking on the "Select Background Image" button. This is labeled "Replace Image" if a background image is already set:
Setting the Size and Position of the Background Image
You can modify the size and position of your social share badge by clicking on the "Size & Position" button in the sidebar:
This will open up a lightbox with some new functionality:
- Here you can set the alignment of the background image relative to the canvas. Clicking the arrows will align the background image with the canvas edge. Note: The blue square border represents the canvas edges;
- The image size slider allows you to adjust the size of the background image as a percentage of its native size. Please note: We don't allow you to expand the image to larger than 100% to ensure high picture quality and no blurring;
- You can move the background image by dragging it into the position of your choice. You can also resize the image to your desired size by dragging the boxes in each corner. Note: The aspect ratio of the image is retained when resizing.
Modifying the Size of the Canvas
You can also modify the size of the canvas from the sidebar:
When you click on the "Set Custom Dimensions" button, you will be taken to the following lightbox:
Simply set the width and height of the canvas and hit the "Save" button.
The editor allows you to modify the look and feel of existing text as well as do things such as duplicate, move and delete it.
Hovering over an existing text element renders the following controls:
You can duplicate the text element by clicking in the top left corner and delete the element by clicking in the top right corner.
You can move the element by dragging on the middle icon.
Changing Text Style
Firstly click on the text element that you would like to change. This will load the text formatting control panel on the right-hand side:
First, you should highlight the text that you want to make formatting changes to. You can then modify the attributes from the control panel on the right-hand side:
- Foreground and background color
- Font face
- Font size
- Styles, such as underline, bold italic
- Line height
Loading a Different Social Badge Template
You can quickly and easily load a new social share badge template by clicking on the template button in the bottom right-hand corner:
Saving your Changes
All changes are autosaved, however, you should make sure that you click the "Save & Exit" button when you're finished with the editor. This will make sure that the badge is generated correctly on the server:
How to Add my Social Share Badge to my Results Page
See this article for a tutorial on how to incorporate the social share badge into the results page.