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

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

The Magic Code Before we begin, let’s break up the code and look at the different parts: <link rel="image_src" href="http://domain 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 “http://” 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

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).

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

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).

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

3. Publish the website.

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: https://developers.facebook.com/tools/debug/ 1. Enter the domain name then click on “Debug”

2. Click on “Fetch new scrape information”

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).