ウェブサイトをTwitterでシェアしてもらうことは、認知度拡大へ非常に重要だ。

動的サイトの場合はJavaScriptでシェアボタンを実装すればよいが、シングルページ(ランディングページなど数ページのみのサイト)の場合は公式が出しているコードをコピペするだけで良い。

こうすれば、『何も考えずコピー&ペースト』するだけで、ウェブサイトのシェアボタンが実装できる。

この記事はTwitterについて解説しているが、Facebookもほぼ同様。ソーシャルプラグインから設定するだけだ。

Twitterのシェアボタンを設置

まずは、以下のURLにアクセスする。

↓のようなページが表示されるはず(執筆時期と閲覧次期が異なる場合は違うかもしれないので)。

シェアボタン

画面を下へスクロールし、『Twitter Button』を選択する。

シェアボタン

いくつか候補が表示されるので、『Share Button』を選択する。ほかは、フォローを促す『Follow Button』やハッシュタグを見てもらう『Hashtag Button』となっている。

シェアボタン

つぎに、『set customization opitions』をクリックする。ここで、シェアしてもらうURL、タイトル、ハッシュタグ、ユーザー名、サイズなどを調整していく。

シェアボタン

英語に拒絶反応がある方は、Chromeの翻訳機能を使ってしまうと良いだろう。

一番上が、タイトルだ。このウェブサイトで言えば、『Keisuke Kuribara | 金融、ブロックチェーン、大麻、テクノロジー、心理など』と記入する。

シェアボタン

以下のような感じ。それぞれ、自分の設定へ適用するように設定する。

シェアボタン

ここまでできたら、『Copy Code』をクリックし、該当のコードをクリックするだけ。あとは、表示させたい箇所へコピーしたコードをペーストすれば良い。

シェアボタン

このウェブサイトを例として、シェアボタンを作成したみた↓

上記のボタンをクリックしてみてほしい!

たった、これだけでシェアボタンを実装できてしまう。ほか、JavaScriptで作成する際も、シェアURLを『https://publish.twitter.com/』で作成すると非常に楽である。

You May Also Like
シンタックスハイライト
続きを読む

【3行のコードだけ】手軽にシンタックスハイライトを導入できる「highlight.js」の使い方

テック系でブログを運営している人は、記事内にコードを記述するとき、何か味気ない感じがした経験はあると思う(プログラムの事を書く人)。 そんなとき、シンタックスハイライトを導入すれば、見栄えが良くなることをご存知だろうか。…