良い記事をWebサイトに公開するだけで多くのユーザーが読んでくれる…そんな時代も今は昔。今では良い記事を書くことはもちろん、記事をユーザーに届ける工夫も併せて必要です。
記事をユーザーに届ける工夫はさまざまですが、記事下にSNSシェアボタンや記事保存ボタンを設置する方法は多くのWebサイトで行われています。弊社のWebサイトはノーコードWeb制作ツールの「STUDIO」で構築しており、シェアボタンや記事保存ボタンの設置には少し工夫が必要なため、当記事で解説します。
対象となるのは「Twitter」「Facebook」でのシェアボタンと、「pocket」「はてなブックマーク」での記事保存ボタンです。
Twitter シェアボタン
最初にTwitter用のシェアボタンを作成します。ボタンそのものの作成方法は当記事では割愛します。
次にシェアボタン用のボックスを選択し、画面右側のハンバーガーメニューを選択します。
この後、開いたメニュー内の「リンク」に文字列を入力していくのですが、先にTwitterシェアボタンをクリックした時に何を表示させたいか？を考えます。
弊社の場合、Twitterシェアボタンをクリックした時に以下の4つを表示させています。
記事タイトル
会社名
記事URL
Twitterユーザー名（@で始まるユーザー固有の文字列）
この時、メニュー内のリンクに入力する文字列は以下のようになります。
https://twitter.com/share?url=$url&text=title+%7C+%E3%82%A2%E3%83%AB%E3%83%86%E3%83%8A%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE&via=AltenasIncこの文字列を入力した状態でTwitterシェアボタンを利用すると、以下のようなTwitterのポップアップが立ち上がるようになります。こちらを元にそれぞれの要素を解説していきます。
以下の文字列はTwitterシェアボタンを作成する際、共通で必要です。
https://twitter.com/share?url=STUDIOではリンクの入力時にプロパティを選択することができます。「$url」はプロパティから選択しましょう。リンクにプロパティを入力すると、下画像のように背景色が変わります。
https://twitter.com/share?url=$url
加えて、記事タイトルと会社名を入れます。「&text=」と入力し、プロパティから「title」を選択しましょう。こちらもプロパティから選択しているので、上画像のように背景色が変わります。
https://twitter.com/share?url=$url&text=title会社名はエンコードする必要があるので、入れたい文字列をこちらのツールを使ってエンコードします。弊社の場合は記事タイトルの後に「｜アルテナ株式会社」と表示させています。
エンコードした文字列に「+」を加えて、上記の文字列に加えます。
https://twitter.com/share?url=$url&text=title+%7C+%E3%82%A2%E3%83%AB%E3%83%86%E3%83%8A%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BEその後、Twitterユーザー名を追加したいので「&via=」と、Twitterユーザー名に使われている@以降の文字列を追加します。弊社の場合は「AltenasInc」ですので、それらを加えると以下のようになります。
https://twitter.com/share?url=$url&text=title+%7C+%E3%82%A2%E3%83%AB%E3%83%86%E3%83%8A%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE&via=AltenasIncこれをTwitterシェアボタンのボックスの「リンク」に入力したら完了です。Twitterシェアボタンをクリックした際に、画像のようなポップアップが立ち上がったら無事設定完了となります。
Facebook シェアボタン
FacebookシェアボタンもTwitterと同様です。専用のボタンを作成し、画面右側のハンバーガーメニューから「リンク」を開きます。
リンク内に以下の文字列を入力します。以下の文字列はFacebookシェアボタンを作成する際、共通で必要です。
https://www.facebook.com/sharer/sharer.php?u=この文字列に加えて、プロパティから「$url」を選択しつなげます。
https://www.facebook.com/sharer/sharer.php?u=$urlリンクは下の画像赤枠のようになります。
Facebookシェアボタンをクリックした際に、画像のようなタブが立ち上がったら無事設定完了となります。
pocket 記事保存ボタン
pocketの記事保存ボタンもこれまで同様です。専用のボタンを作成し、画面右側のハンバーガーメニューから「リンク」を開きます。
リンク内に以下の文字列を入力します。以下の文字列はpocketの記事保存ボタンを作成する際、共通で必要です。
http://getpocket.com/edit?url=この文字列に加えて、プロパティから「$url」を選択しつなげます。
http://getpocket.com/edit?url=$urlリンクは下の画像赤枠のようになります。
pocket記事保存ボタンをクリックした際に、画像のようなタブが立ち上がったら無事設定完了となります。
はてなブックマーク 記事保存ボタン
はてなブックマークの記事保存ボタンもこれまで同様です。専用のボタンを作成し、画面右側のハンバーガーメニューから「リンク」を開きます。
リンク内に以下の文字列を入力します。以下の文字列ははてなブックマークの記事保存ボタンを作成する際、共通で必要です。
https://b.hatena.ne.jp/add?mode=confirm&url=この文字列に加えて、プロパティから「$url」を選択しつなげます。
https://b.hatena.ne.jp/add?mode=confirm&url=$urlリンクは下の画像赤枠のようになります。
はてなブックマーク記事保存ボタンをクリックした際に、画像のようなタブが立ち上がったら無事設定完了となります。
まとめ
STUDIOは日々細かなアップデートが行われているため、いずれSNSシェアボタンや記事保存ボタンのテンプレートが用意されるでしょう。現在、STUDIOを使われている方の中で記事やお知らせの公開に力を入れている方は、これらのボタンを用意して届ける工夫もできるといいですね。本記事がそんな方の参考になれば幸いです。
