When a builder creates a web form using GraceBlocks, the form will live on a URL that is hosted by GraceBlocks. This URL is designed to support the OpenGraph protocol so that when shared on the internet it can be nicely branded with an image that can align to your form. This article explains how to use the social share image feature, including:

• Generating the social share image for a web form
• Understanding the social share image elements (and where they are configured)
• Important notes about social sharing (Be sure to read these!)

Generating the social sharing image feature

By default, a web form has a GraceBlocks standard logo as the default social share image.  However, builders have the power to generate a branded image by completing the following steps.  

Step	Action	Visual
1	From any tab, hover over + Add new record, and click the dropdown option. Then, select Manage web forms. The web forms modal appears.
2	Find the form where you'd like to generate a social share image. Then click the Actions dropdown menu for that form, and select Edit form settings.   A form settings modal appears.
3	Scroll towards the bottom of the page to find the field to Social share form title. Ensure that this title is what you'd like to see reflected for the form when you share the form on social sites.
4	Click Save & go to designer.
5	Review the image and logo, and make any necessary image adjustments.  This image and logo are used with the configured title to generate your social sharing image.
6	Click Save & close.
7	Find the form where you'd like to generate a social share image. Then, click the Actions dropdown menu for that form, and select Generate social sharing image.   A new social sharing image is generated, reflecting the current configuration of the web form.
8	Share the URL for the form on the internet. Example of a social sharing image in action - ->   Key attributes of note: The title comes from settings, as you have configured it. The image is used as the background canvas for the image. The logo is used at the top center. If powered by GraceBlocks is present on the form, it is also present on the social share image.  The form accent color is used if the image is not provided, or if the image height does not cover the full space allotted for the image. To learn more about the features referenced here, see managing web forms.

Important notes about social sharing

🔔 The social share image must be generated to exist. If it has never been generated, a GraceBlocks default image is used instead. This is the default GraceBlocks image:

🔔 If you make any changes to the form designer or settings that impact the social sharing image, you must repeat step 7 above to generate a new image. The image must be generated to exist. When you share the URL, it uses the social sharing image that was configured when you last generated it (via step 7 in the procedure above).

🔔 Browsers cache images. This means once you generate the first image, seeing image updates can be tricky. Your browser will want to show you the original image that it has cached. You will need to clear your cache to fix this.  Alternatively, you can see image updates by using testing tools that are provided by Twitter or Facebook.  Paste your form URL into one of these pages to see a preview before posting it live on social.  Sometimes these tools also take time to update, so try again in a few minutes if an older image is still rendering: 

https://cards-dev.twitter.com/validator

https://developers.facebook.com/tools/debug/

🔔 TEST BEFORE YOU POST. The internet also caches images! Be sure you have your image defined the way you want it before you post it. Once you share it on social, it's not easy to tell the internet that the image has been changed.

Paste your form URL into one of these pages to see a preview before you post it live on social media: 

https://cards-dev.twitter.com/validator

https://developers.facebook.com/tools/debug/

(Sometimes these tools also take time to update, so try again in a few minutes if an older image is still rendering.)