{tocify} $title={Table of Contents}
SNSシェアボタン用URL
SNSシェアボタン用URLを自動生成できる無料ツールはこちらを利用します。Full Link URLの箇所に自社サイトのリンクを入力するだけで自動で共有URLを作ってくれます。
記事下にあるRedditのシェアボタンはこのツールを参考にしたおかげで実装できました。
 |
| Social Media Share Link Generator |
<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はこちらの無料ツールで取得できます。シェアボタン用のコードも作ってくれるので便利です。当サイトの場合は以下のリンクを適用するつもり。
追記(2024年9月)：Blueskyのシェアリンクが公式ドキュメントにて提供されています。当サイトはBloggerなので以下のリンクを使ってシェアボタンを設置しました。
ちなみにマストドンのシェアURLはこちらの無料ツールで取得できます。シェアボタン用のコードも作ってくれるので便利です。当サイトの場合は以下のリンクを適用するつもり。
https://mastodonshare.com/share{codeBox}
追記(2024年9月)：Blueskyのシェアリンクが公式ドキュメントにて提供されています。当サイトはBloggerなので以下のリンクを使ってシェアボタンを設置しました。
https://bsky.app/intent/compose?text=" + data:post.url.canonical + "&text=" + data:post.title{codeBox}
シェアしたときにリンクだけじゃなく、記事タイトルも自動で入力される仕様です！
以上、SNSシェアボタン用URLを自動生成できる無料ツールを教えました。
筆者のように独学でHTML&CSSの知識を身に着けたい方におすすめの書籍があります↓
最後に
以上、SNSシェアボタン用URLを自動生成できる無料ツールを教えました。
筆者のように独学でHTML&CSSの知識を身に着けたい方におすすめの書籍があります↓
