Icarus User Guide - Share Buttons

This article covers share buttons supported by Icarus.

This article is also available in 简体中文.

The following share buttons are provided by ppoffice/hexo-component-inferno. Please refer to it for a complete list of supported plugins and their configuration details.

AddToAny

Installation GuidePreview

1. You can activate AddToAny without user registration. Just put the following code to your theme configurations:

   _config.icarus.yml

   share:
       type: addtoany

Take the following steps if you want to customize the share buttons:

1. Visit AddToAny official site and click on the “Get the Share Button”.

2. Then, select “Any Website” and complete the configuration of the buttons.

   
   

3. Click “Get Button Code” after you finish.

   
   

4. Since the share buttons of Icarus are provided by ppoffice/hexo-component-inferno, you need to copy the layout file of AddToAny from the src/view/share directory of this repository to <icarus_directory>/layout/share/addtoany.jsx. Icarus uses a layout file in its layout/ directory instead of the one in hexo-component-inferno with the same path. Then, replace the AddToAny code in addtoany.jsx and fix the package import in the file header.

   For example, assume the following code is what you get from the last step:

   AddToAny Code >folded

   <!-- AddToAny BEGIN -->
   <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
   <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
   <a class="a2a_button_facebook"></a>
   <a class="a2a_button_twitter"></a>
   <a class="a2a_button_email"></a>
   </div>
   <script async src="https://static.addtoany.com/menu/page.js"></script>
   <!-- AddToAny END -->

   then you should make the following changes to addtoany.jsx:

   <icarus_directory>/layout/share/addtoany.jsx >folded

   const { Component, Fragment } = require('inferno');
   - const { cacheComponent } = require('../../util/cache');
   + const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
   
   ...Some code is skipped here...
   
   class AddToAny extends Component {
       render() {
           return <Fragment>
   -           <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
   -               <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
   -               <a class="a2a_button_facebook"></a>
   -               <a class="a2a_button_twitter"></a>
   -               <a class="a2a_button_telegram"></a>
   -               <a class="a2a_button_whatsapp"></a>
   -               <a class="a2a_button_reddit"></a>
   -           </div>
   -           <script src="https://static.addtoany.com/menu/page.js" defer={true}></script>
   +           <!-- AddToAny HTML code you just got... -->
   +           <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
   +               <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
   +               <a class="a2a_button_facebook"></a>
   +               <a class="a2a_button_twitter"></a>
   +               <a class="a2a_button_email"></a>
   +           </div>
   +           <script async src="https://static.addtoany.com/menu/page.js"></script>
           </Fragment>;
       }
   }
   
   ...The following code is skipped here...

ShareThis

Installation GuidePreview

1. Visit ShareThis and click the “Start with Share Buttons” button on the page.

2. Select the type of buttons you need on the “Choose type of sharing button” page. Don’t enable the “GDPR compliance tool” since it may cause issues. You can also make advanced adjustments by clicking the “Customize your share buttons” link. Click “Next” when you are done.

   
   

3. Select “HTML” on the “Choose your CMS platform” page and click “Next”.

   
   

4. Enter your email and password to finish the registration for ShareThis on the “Register and get the code!” page.

5. Finally, copy the src URL from the HTML code fragment to the share button configuration.

   
   

   For example, the following ShareThis code:

   ShareThis Code

   <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons" async="async"></script>

   maps to the following theme configuration:

   _config.icarus.yml

   share:
       type: sharethis
       install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons

Web Share

Web Share shows direct links to X, Facebook, Weibo, Telegram, and LinkedIn, plus a More button that opens the system share dialog, without loading a third-party SDK.

Installation GuidePreview

1. You can activate Web Share without user registration. Just put the following code to your theme configurations:

   _config.icarus.yml

   share:
       type: web_share

The More button is disabled in browsers that do not support Web Share.

Something wrong with this article? Click here to submit your revision.