github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
hexo-theme-icarus/source/_posts/en/Share-Buttons.md

7.9 KiB
Raw Blame History

title: Icarus User Guide - Share Buttons date: 2017-01-31 categories:

  • Plugins
  • Share tags:
  • Icarus User Guide language: en toc: true share: type: sharethis install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5e8fc96750876c7d
This article is also available in: 简体中文.

This article covers some share buttons supported by Icarus 3.

The share button feature of Icarus is provided by ppoffice/hexo-component-inferno. Please refer to it for a complete list of supported buttons and their configurations.

AddThis

This share button service may be blocked by some ad blocking browser extensions. Please use with caution.
Installation Guide Preview

  1. Register for AddThis. Select the "Share Buttons" on the "Select a Tool" page during your first registration.

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

  3. Make further style and behavior customizations on the next page and click "Activate Tool" button when you finish.

  4. Find the HTML code from the get the code page, copy the URL in the src attribute and fill it into the corresponding theme configuration option. For example, the URL in the following AddThis code

    {% codeblock "AddThis Code" lang:html %}

    {% endcodeblock %}

    is copied to this theme configuration

    {% codeblock themes/icarus/_config.yml lang:yaml %} share: type: addthis install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxx {% endcodeblock %}

AddToAny

Installation Guide Preview

  1. You can activate AddToAny without registering an user account

    {% codeblock themes/icarus/_config.yml lang:yaml %} share: type: addtoany {% endcodeblock %}

  2. (Optional) If you want to further customize the share buttons, please visit AddToAny official site and click on the "Get the Share Button" button. Then, select "Any Website" and complete the configuration of the buttons. Click "Get Button Code" after you finish. For example, this is the default code you can get from AddToAny:

    {% codeblock "AddToAny Code" lang:html %}

    {% endcodeblock %}

    Since the share buttons of this Hexo theme is provided by ppoffice/hexo-component-inferno, You will need to copy the view files in it to the corresponding directory under this theme if you wish to do the customizations. For example, we shall copy src/view/share/addtoany.jsx to themes/icarus/layout/share/ before we modify the file. Then, we need to correct the require path in the file and replace old HTML code in that file with the HTML from above.

    {% codeblock themes/icarus/layout/share/addtoany.jsx lang:diff %} 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 

    •        <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>

    •       AddToAny HTML code you just got
      <script src="https://static.addtoany.com/menu/page.js" defer={true}></script>
  </Fragment>;
      } }

    ...The following code is skipped here... {% endcodeblock %}

Baidu Share

This share button service may be blocked by some ad blocking browser extensions. Please use with caution.
The Baidu share button service seems to be no longer maintained. Please use to other services as alternatives.
Installation Guide Preview

  1. You can activate Baidu Share without registering an user account

    {% codeblock themes/icarus/_config.yml lang:yaml %} share: type: bdshare {% endcodeblock %}

Share.js

The Share.js button service is no longer maintained. Please use to other services as alternatives.
Installation Guide Preview

  1. You can activate Share.js without registering an user account

    {% codeblock themes/icarus/_config.yml lang:yaml %} share: type: sharejs {% endcodeblock %}

  2. (Optional) Please refer to the second step in AddToAny installation guide and the share.js homepage for information about customizing the share buttons.

ShareThis

Installation Guide Preview

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

  2. Select the type of buttons you need on the "Choose type of sharing button" page. You can also make advanced adjustments by clicking the "Customize your share buttons" link. Click "Next" when you are done.

  3. Select "HTML" and the "Next" button on the "Register and get the code!" page. Enter your email and password to finish the registration for ShareThis.

  4. Finally, copy the src URL from the HTML code fragment on the page and put it to the corresponding theme configuration option. For example, the URL from the following ShareThis code

    {% codeblock "AddThis Code" lang:html %}

    {% endcodeblock %}

    is copied to this theme configuration

    {% codeblock themes/icarus/_config.yml lang:yaml %} share: type: sharethis install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons {% endcodeblock %}

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