たった1行のHTMLコピペで実現するTwitterシェアボタン

Twitterシェアボタンをたった一行のHTMLだけで導入する方法です。HTMLといっても実際はたった１つのbuttonタグをコピペするだけです。タグの編集も不要、外部ライブラリ不要、JavaScriptコーディング不要、さらにはWebページごとに異なるコードを仕込む必要もありませんので、とても簡単に導入することができます。

TwitterシェアボタンをWebページヘ

以下のコードをWebページのどこか好きな場所にコピペするだけです:smile:

<button onclick="window.open('https://twitter.com/share?url=' + encodeURIComponent(window.location.href) + '&text=' + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');">Twitterでシェア</button>

仕様

クリックすると「Twitterでリンクを共有する」画面が開きます
ブラウザで現在開いているページのURLとタイトルをTwitter共有メッセージとして自動的にセットします

メリット

HTMLファイルへのコピペだけで済むので、サービスの本質とは関係ないこの手のロジックをフロントエンドのJavaScriptコードから省くことができます。

おまけ: BootstrapとFontawesomeでもう少しだけかっこ良く

BootstrapとFontawesomeで少しだけ見栄えを良くするとこんな感じになります:

<button onclick="window.open('https://twitter.com/share?url=' + encodeURIComponent(window.location.href) + '&text=' + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');" class="btn btn-link" title="Twitterでシェア"><i class="fab fa-twitter"></i></button>

以上です。