Thrive Knowledge Base

Adding a Social Share Badge to your Quiz Results Page

If you haven't already created your social share badge, then you should read this article first.

In this article, I will show you how to embed your Social Share badge into your Results Page using our live editor.

Editing your Quiz Results Page

The Social Share badge can only be used on the quiz Results Page. To edit the Results page, simply go to the quiz dashboard and click "Manage" on the "Results Page" card:-

You'll then be taken to the Quiz results dashboard.  

Then select the blue "Edit Design" icon:

You'll be taken to a Thrive Architect page to build your quiz results page.  

Inserting the Social Share Badge

Before you can actually start editing your Results Page, you will be given three types of templates to choose from: 

  • By using the "Results Neutral" template, you will have to add the Social Share badge manually, using the editor. 
  • The "Results Form" is normally used to get your users to subscribe on your mailing list through an opt-in form. If you want to also add a Social Share Badge, you should add an Opt-in Gate to your quiz, and add the opt-in form and the Social Share Badge on separate pages, specifically on the Opt-in Gate and on the Results Page.
  • The last template, which is the "Results Social", is the best way to go if you want to add a Social Share badge on the results page, because, it is added automatically and, if the badge is already customized, it will be displayed automatically.
  • Our recommendation is that you choose the "Results Social" template if you want to display your Social Share badge on the Results Page.

Below we are going to present, firstly, how the "Results Social" template works, and afterwards how you can the Social Share badge element in the Results Neutral / Results Form templates:

Using the Results Social template

By choosing the "Results Social" template, the Social Share badge element will already be added into the content of your Results Page:

As you can see, it says "Social Share Badge missing". In order to customize it you go back to the quiz page and create the Social Share Badge:

After the Social Share badge is created you can modify the way your social buttons are arranged. By default, using the "Results Social" template, the buttons are placed above the badge.

However, you can change that simply by clicking on the badge, and then selecting the "Change Template" option from the sidebar options: 

And then choose a different template for the buttons placement: 

You can find out more information about the items available on the "Social Share Badge Options" sidebar section, below on this page. 

Using the Results Neutral / Results Form templates

Using these templates you will have to manually add the Social Share Badge element:

You can either click or drag the "Social share badge" item into your content just like any other element.

You'll be automatically shown a lightbox that looks like the following:

You can choose where you would like the social share buttons to appear in relation to the badge. Having chosen your template, the share badge should be inserted into your page:

Important! -  You will need to have Social Share Badge set up in order for it to be displayed on the Results Page.

Social Share Badge Options

Just like any other element in Thrive Architect, you can click on the Social Share badge to load a few options on the sidebar editor.

Here is what that currently looks like:

The customization options are similar to the Social Share element that's already built into Thrive Architect.

Here's a quick overview of all the important options:

  1. "Change Template" basically lets you access the window where you can set up the position of the social share buttons on the page. 
  2. Choose what type of buttons you want to display.
  3. Choose from a list of button styles the one that fits your website's design.
  4. Customize the displacement orientation of the buttons: Horizontal or Vertical. 
  5. Set up the size of the buttons with a slider or simply by inserting an exact value.
  6. Specify what Social Network buttons you want to display - Your options are: Facebook, Twitter, Google, Pinterest, Linkedin and Xing.

  • Warning! - Facebook is the only network that allows you to display the Social Share badge on your wall. The "Twitter" and "Google Plus" social platforms do not support sharing images in a URL format. This way, the Social Share badge won't be visible, after the user has shared his final result through the Social buttons.
  • On Twitter, after you have clicked on the equivalent Social button, a window where you will be able to write a text that will be shared will pop up on your screen: 
  • On Google+ you will recieve a similar message. The difference is that it will show an image that is featured on your webiste, which you can choose if you want to display or not:

Display the Social Share Badge as an Image

The way you could display your Social Share badge on the Twitter / Google+ social platforms is to upload it as an image. 

This way, the Social Share badge has to be saved as an image, after the quiz is completed. So, simply right-click the Social Share badge and save it as an image on your computer:

The next step is to simply upload the image to Twitter or Google+, and in the description area add a short text about the quiz and also a link that will take the viewers directly to your quiz. For example, on Twitter, you could upload it this way:

And after the upload is completed the tweet, which is both the description and the image, will be displayed in a decent way:

In the same easy manner the Social Share badge can be uploaded to Google+ as an image along with a short description, and the viewers will be able to see the the Social Share badge and also a link that will take them to the quiz.

>