SNSシェアボタン用URLを自動生成できる無料ツール

byNatchan -3/15/2023

0

SNSシェアボタン用URLを自動生成できるツールを見つけたので紹介します。自作の共有ボタンを作りたい人にぴったりのツール。忘備録としてなのであくまで自分用メモです。

{tocify} $title={Table of Contents}
Ads
無料体験で耳活！月額1,500円で12万冊以上の対象作品が聴き放題になる【Amazon Audible】

SNSシェアボタン用URL

SNSシェアボタン用URLを自動生成できる無料ツールはこちらを利用します。Full Link URLの箇所に自社サイトのリンクを入力するだけで自動で共有URLを作ってくれます。

記事下にあるRedditのシェアボタンはこのツールを参考にしたおかげで実装できました。

Social Media Share Link Generator

当サイトの場合は生成されたリンクをそのままコピペして使うのではなく、一部コピーして活用しています。参考までに全部で4つのコードを仕込んでいます。LinkedInを例にすると以下の通りです。

<li class='linkedin'><a class='linkedin btn window' data-height='520' data-width='860' expr:data-url='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url.canonical + "&title=" + data:post.title.jsEscaped' href='javascript:;' rel='nofollow' title='LinkedIn'/></li>{codeBox}

.social .linkedin a:before{
content:'\f0e1'
}{codeBox}

.social-color .linkedin a,.social-color-hover .linkedin a:hover{
color:#0077B5
}{codeBox}

.social-bg .linkedin a,.social-bg-hover .linkedin a:hover{
background-color:#0077B5
}{codeBox}

アイコンはFont Awesomeのユニコードを使用しています。Font Awesomeはサイト制作には欠かせないツールになっていますが、海外のサービスなので国内企業のロゴはまだまだ少ないのがデメリット。

LINEのアイコンは1つしかないし、はてなブックマークについてはゼロです。ただ、嬉しいことにMastodonはありました！

マスク氏の影響で今はツイッターの地位が揺らいでるので、シェアボタンは豊富にそろえたほうがブログのアクセスにいずれ貢献してくれるはずです。

ちなみにマストドンのシェアURLはこちらの無料ツールで取得できます。シェアボタン用のコードも作ってくれるので便利です。当サイトの場合は以下のリンクを適用するつもり。