1. Setting the Default Thumbnail Image for SB3 Websites
To change the layout of any slide:
Right click on the slide and scroll down to layout
Choose the appropriate layout option
If images and text need to be reset, right click and choose Reset Slide
Prepared By: Christopher Clayton
04/04/2016

2. Introduction:
Sometimes customers reach out to us asking that we change the default image that is displayed when their site is shared on Facebook. In some instances, we have had to advise these customers that this is not possible (since Facebook seem to just pull a random image from the site). I recently found out that there is a way to “force” Facebook to always use a specific image whenever the site is shared by someone. This is done by adding a line of HTML coding to the site. The steps to do it will be discussed in this presentation.
Slide Name: Title and Content
Use this slide layout when using bulleted lists, tables, charts, graphics or video – or to compare or contrast
Bullets:
Click on bullet 1 and start typing
Hit enter for next bullet
Hit tab to create sub-bullets
Tables:
Click on the Insert Table icon
Enter number of columns and rows and hit ok
Navigate to the design or format tab under Table Tools to customize
Charts:
Click on the Insert Chart icon
Select chart type, style and hit ok
Enter your data in the excel document that pops up
Navigate to the design or format tab under Chart Tools to customize
SmartArt:
Click on the Insert Smartart Graphic icon
Select type, style and hit ok
Pictures and Video:
Click on either the Insert Picture From File, Clip Art or Insert Media Clip icons
Navigate to the file location on your computer/network and hit insert
Navigate to the format tab under Picture Tools to customize

3. The Magic Code
Before we begin, let’s break up the code and look at the different parts:
<link rel="image_src" href=" name/image name.image extension"/>
A – This portion of the code tells Facebook you want this image to be your main thumbnail for the site
B – This is the domain name for the site being shared on Facebook (ensure that the “ is added).
C – This is the name of the image you want to show up on Facebook when site is shared
D – This is the file extension for the image (.jpg, .png or .gif extensions are supported by SB3)
With this code added to the site, the random preview image is overridden by the image that you specify. A B C D

4. Locating the Name and Extension of the Image
To locate the name and extension of the image, double click on any image module. This will display all uploaded images under the “My Images” tab.
The name and extension of each image is displayed
below it. (draw.png).

5. The Default Thumbnail Image
As mentioned in the introduction of this presentation, Facebook seem to just pick a random image from the site to use as the thumbnail. Before adding the code, lets look at the one that is displayed for the site we will be using for this presentation.
As you can see, the default image is currently a sketch pad

6. Adding the code to an SB3 Site
The code can be added to the body or footer of the website (nothing will be displayed in the spot where the code is when site is published)
Steps:
1. Click on “Other” at the bottom of the website builder then drag the HTML module in the area of the page that you would like to add the code (remember this will not show on the published version).

7. 2. Double click on the HTML place holder that appears and paste the code in the box then click on save changes.

8. 3. Publish the website.

9. The Facebook Debugger Tool
Once the code has been added and the site is published, its time to run the domain through the Facebook debugger tool. The purpose of this is to clear Facebook’s cache of any previous thumbnail images it had of your site. The link to this tool can be found below:
1. Enter the domain name then click on “Debug”

10. 2. Click on “Fetch new scrape information”

11. Run a test to confirm the result
Share the site on Facebook to confirm that image has been updated.
As you can see, the thumbnail is now updated to reflect
the image specified in the code (draw.png).