Hexo 共有機能のPlugin Add Thisで動的なシェアボタンを追加

Hexoで生成したWEBサイトに共有機能を追加する手法を解説します。今回はAdd ThisというPluginで動的なシェアボタンを追加します。WEBアプリにも適用できるので覚えておくと便利です。HexoとGithub PagesでWEBサイトを作る方法はこちら

Add This

  • Add This
    • WEBページにコンテンツを追加するフリーのサービス
      • ex. シェアボタン,
    • サイトでポチポチ押しながらデザインを決めると、自動でソースを作ってくれるNo Codeっぽいサービスです

Add This

  • 注意点
    • 上記のサービスで生成した共有ボタンは、Adブロックサービスでブロックされる可能性があります

手順

Account設定

  • AddThisにアクセス

  • Make it Shareableより”Get Started”を押下
    image

  • Sign In

    • 今回はGoogleアカウントを利用します

Sign In

  • Create Account
    • Email AddressとCountryを設定
    • Registerを押下

Create Account

  • アカウントの設定画面が開きます
    image

シェアボタンを作成

  • 上部タブのTools⇒ADD NEW TOOLを選択
    • Share Buttonsを押下

Select a Tool

  • 用意されたデザインから追加したいシェアボタンをタイプを選択

    • PCとMobileでそれぞれどのように表示されるか確認可能です
  • Inline
    Inline

  • Floating
    Floating

  • Expanding

    • カーソルを合わせるとにゅっと出てくる

Expanding

今回はExpandingを使ってみます

  • Continueを押下

  • カスタマイズを行いActivateToolを押下

  • TutorialとCodeが表示されます
    Get The Code

  • 各記事のHTMLに以下を貼れば反映されるとのこと

    • Hexoの場合は設定ファイルに以下のsrc=以降のURLを規定するだけで全ページに反映してくれました
      1
      2
      <!-- 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-5ee8d1fc16b460fb"></script>
  • 設定ファイルを変更

    • Hexoディレクトリ直下の_config.ymlではなく、テーマディレクトリの_config.ymlに設定します
      1
      \your-blog\themes\your-theme\_config.yml
  • _config.ymlのshare欄に設定

    1
    2
    3
    4
    5
    6
    # Share plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
    share:
    # Share plugin name
    type: addthis
    install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXXXXX

以上で設定は完了

関連記事

参考

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×