Step 1: Enable Open Graph & Twitter Card Modules

1. From the admin panel, click on Manage » Extend.
2. Enable Metatag: Twitter Cards, Metatag: Open Graph, and Metatag: Facebook:
   
3. Clear your site cache using Shortcuts » SiteFarm Config » Clear Caches.

Step 2: Acquire a Developer account on Facebook

Configuring your content correctly for Facebook requires that you obtain an 'app id'. To do so, you will need to register your page per the Facebook Developer resources. This will take you to the developer.facebook.com page using the Get Started button in the upper right corner. Follow the instructions and note the 'app id' generated for your account.

Step 3: Configure Metatag Modules

[Updated October 2019]

1. If you would like, for reference only, you can open Manage » Help and then, under Module Overviews, click on Token to see a complete list of the available Tokens in SiteFarm. No changes to this page are necessary.
   
2. Go to the end of your site domain (example: https://sitefarm.ucdavis.edu/ or http://yoursite.sf.ucdavis.edu) in the browser field and type or paste in /admin/config/search/metatag/node. NOTE: make sure to include the square brackets indicated [ token ] as shown below.
   • Under BASIC Tags
     • > Page title add the tokens:
       [node:title] | [site:name]
     • > Description add the token:
       [node:summary]
   • Under ADVANCED
     • > Image add the token:
       [node:field_sf_m_primary_image:sf_landscape_16x9:url]
   • Under OPEN GRAPH
     • > Content Type add the text:
       website
     • > Page URL add the token:
       [current-page:url:absolute]
     • > Title add the token:
       [node:title]
     • > Description add the token:
       [node:summary]
     • > Image add the token:
       [node:field_sf_m_primary_image:sf_landscape_16x9:url]
     • > Image type add the token:
       [node:field_sf_m_primary_media:entity:field_media_image:sf_landscape_16x9:mimetype]
     • > Image width: 1280
     • > Image height: 720
     • > Image 'alt' add the token:
       [node:field_sf_m_primary_image:alt]
     • > Content modification date & time add the token:
       [node:changed:custom:c]
     • > Article author
       [node:author:display-name]
     • > Article section
       [node:ield_sf_article_type:entity:name]
     • > Article tags
       [node:field_sf_tags]
     • > Article publication date & time
       [node:created:custom:c]
     • > Article modification date & time
       [node:changed:custom:c]
   • Under FACEBOOK
     • > Facebook Application ID  add:
       the 'app id' provided in Step 2
   • Under TWITTER CARDS
     • Twitter Card type: Photo card
     • > Description add the token:
       [node:summary]
     • > Site's Twitter Account
       Your account details
     • > Title add the token:
       [node:title]
     • > Page URL
       [node:url]
     • > Image URL add the token:
       [node:field_sf_primary_image:sf_landscape_16x9:url]
     • > Image alternative text add the token:
       [node:field_sf_primary_image:alt]
     • > Image height: 720
     • > Image width: 1280 
3. Click Save to finish.

Step 4: Test your work

1. Go to Twitter Card Validator.
2. Enter the URL of one of your article pages you want to test.
3. Click the Preview Card button which will show you an example output. With the settings entered above, you will see your twitter account name, the article's image and title.

   

4. Go to Facebook debugger.
5. Paste in the URL of a piece of content shared to Facebook.
6. Go to LinkedIn's Post Inspector. Please note you'll be required to log into your account first.
7. Paste in the URL of a piece of content shared to LinkedIn.
8. Use Iframely's all-in-one debugger, which also include origin data outputs.

Important Notes & Troubleshooting

• If you make a change to your token and do not notice a change in the debug screen, try editing and re-saving your page in your SiteFarm site so the new token is applied.
• If you test your Twitter share button and the post isn't including a link to your article, make sure to provide a teaser sentence or two to the Summary field, which is located right next to the Body label above the WYSIWYG. If the Summary field isn't being used, the ShareThis module pulls an arbitrary amount of text from the beginning of your article, but that amount exceeds the allowable character count. Including your own Summary allows you to control the teaser, which is used through out your SiteFarm site and on social media platforms.