Icarus User Guide - Share Buttons

This article covers share buttons supported by Icarus 5.

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.

AddThis

Some AD blockers may block this share button service. Use it with caution.

The Baidu share button service is no longer available. Use other services as alternatives.

Installation GuidePreview

1. Register for AddThis. Select the “Share Buttons” on the “Select a Tool” page after submitting the registration form.

   
   

2. Select the style and buttons on the “Select a Tool Type” page and click “Continue”.

   
   

3. Make further customizations on the next page and click the “Activate Tool” button when finished.

   
   

4. Find the HTML code from the “Get The Code” page, copy the URL in the src attribute to the share button configuration.

   
   

   For example, the URL in the following AddThis code:

   AddThis Code

   <!-- Go to www.addthis.com/dashboard to customize your tools -->
   <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxx"></script>

   maps to the following theme configuration:

   _config.icarus.yml

   share:
       type: addthis
       install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxx

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 is provided by ppoffice/hexo-component-inferno, you need to copy the layout file (src/view/share/addtoany.jsx) of AddToAny from this repository to <icarus_directory>/layout/share/addtoany.jsx. 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...

Baidu Share

Some AD blockers may block this share button service. Use it with caution.

The Baidu share button service seems to be no longer maintained. Use other services as alternatives.

Installation Guide

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

   _config.icarus.yml

   share:
       type: bdshare

Share.js

The Share.js button service is no longer maintained. Use other services as alternatives.

Installation GuidePreview

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

   _config.icarus.yml

   share:
       type: sharejs

2. (Optional) Please refer to the customization steps in the AddToAny section and the share.js homepage for information about customizing the share buttons.

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:

   AddThis 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

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