HOW TO ADD FACEBOOK OPEN GRAPH HTML TO WEBSITE


Screen Shot 2018-04-10 at 3.27.06 PM.png

1. Create image on Canva. Size 1200px x 630 px

You can use the "Pages open graph HTML" template in Inventive's Team Stream. 


 right click the image to copy image address. Make sure to click the large image and not the thumbnail

right click the image to copy image address. Make sure to click the large image and not the thumbnail

2. Upload image to social media test page/open graph images on SquareSpace

Once uploaded, right click the image to copy image address to add to the custom HTML injection (See step 3)


 Header code injection located in advanced properties of each page. In order to use  Facebook Insights  you must add the app ID to your page. Insights lets you view analytics for traffic to your site from Facebook. App ID was created by Erin Briskie, and licensed to 

Header code injection located in advanced properties of each page. In order to use Facebook Insights you must add the app ID to your page. Insights lets you view analytics for traffic to your site from Facebook. App ID was created by Erin Briskie, and licensed to 

3. Add custom Facebook Open graph HTML to header. (located in advanced properties of each page) 

To use Facebook Open Graph HTML, you need a Facebook Developer ID. Current Facebook App ID was created under Erin Briskie. It needs to be linked to a private users facebook page. Without this property listed you'll loose admin right on the Open Graph Facebook Page. It is easy to create a new ID if all hell breaks loose. 

Copy HTML. Bold script will need to be edited for each page.

 A list of common Open Graph Meta tags descriptions

A list of common Open Graph Meta tags descriptions

<meta property="fb:app_id" content="115942852446635" />

<meta property="og:title" content="What We Do" />

meta property="og:image" content="https://static1.squarespace.com/static/58c199cdebbd1a9d3cdb280f/5accc6da6d2a73d3a04b307b/5accd7e5575d1fd393a39e4e/1523374073893/WHAT+WE+DO+OPEN+GRAPH.png?format=2500w" />

<meta property="og:description" content="It's a noisy world out there, especially online, so we take a direct, simple approach to make sure your story and message rise above and stand out." />

<script> ga('send', 'event', 'main nav', 'click', 'what we do'); </script>

 

 

**Max Character Description Length: When the link is used in a Post, it's 300 characters Max. When a link is used in a Comment, it's 110 chars.

So you can either treat it as 110 max, or, write your descriptions to 300 max, but make sure the first 110 is the critical part and still makes sense when it gets cut off.

 


4. Preview the information that is used when it is shared on Facebook

Use the Sharing Debugger to enter URL https://developers.facebook.com/tools/debug/sharing/

Facebook SUPER CACHES EVERYTHING. You will need to use Facebook's own tool, Sharing Debugger, and press "Scrape Again". This button clears the cache to display the update. ** you may need to press button up to 3 times for changes to take effect.