✨ feat(ui): Add Social Share Buttons Using amp-social-share

[chriskyfung]

We need to enhance our AMP Jekyll theme by adding social share buttons to improve user engagement and content sharing. The amp-social-share component will be used to implement these buttons.

Tasks:

1. Include Required Scripts:

   • Add the following script to the head of your HTML:

     <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

2. Add Social Share Buttons:

   • Insert the amp-social-share component in the desired locations within your templates. Here are examples for different social platforms:
     • Twitter:

       <amp-social-share type="twitter" aria-label="Share on Twitter"></amp-social-share>

     • LinkedIn:

       <amp-social-share type="linkedin" width="60" height="44" data-param-text="Hello world" data-param-url="https://example.com/" aria-label="Share on LinkedIn"></amp-social-share>

     • Facebook:

       <amp-social-share type="facebook" data-param-app_id="YOUR_APP_ID" aria-label="Share on Facebook"></amp-social-share>

3. Customize Styles:

   • Optionally, customize the styles of the share buttons to match the theme's design:

     amp-social-share[type='twitter'] {
       background: red;
       background-image: url('datauri:svg/myownsvgicon');
     }

4. Accessibility:

   • Ensure each amp-social-share button includes an aria-label for accessibility.

References:

• AMP Documentation on amp-social-share