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



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='&quot;http://www.linkedin.com/shareArticle?mini=true&url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + 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はこちらの無料ツールで取得できます。シェアボタン用のコードも作ってくれるので便利です。当サイトの場合は以下のリンクを適用するつもり。


https://mastodonshare.com/share{codeBox}




最後に



以上、SNSシェアボタン用URLを自動生成できる無料ツールを教えました。

筆者のように独学でHTML&CSSの知識を身に着けたい方におすすめの書籍があります↓






 You may also like : 

Natchan

ゲームが好きなグラフィックデザイナー。複数のサイトを運営中。子どもの頃からPCゲームで遊んでました。1番最初に遊んだのはSecond Life。デザインとは飽きない程度に関わっていくつもり。詳しくはこちら

コメントを投稿

当サイトは広告を掲載しています