FAQや記事のシェアに欠かせないSNSボタン!IBISEでの設置方法(Twitter編)
見出し画像

FAQや記事のシェアに欠かせないSNSボタン!IBISEでの設置方法(Twitter編)

こんにちは。IBISE note編集部です。
前回、IBISEで作成したFAQや記事をシェアする(してもらう)ケースを想定し、その際に必要となる「IBISEでOGP画像を設定する方法」について紹介しました。

2回に分けて、各FAQや記事ページにSNSのシェアボタンを設置する方法を紹介します。今回はTwitterのシェアボタンの設置方法です。

画像1

設置場所

上記のように、記事本文のすぐ下に設置する場合は
ポータル管理 > ページテンプレート(記事詳細ページ)
記事本文のソースコードの下(デフォルトのソースコードだと20行目)となります。
※その他の場所やボタンのカスタマイズ等が必要な場合は、HTMLやCSSの分かる方に作業を依頼されることをお勧めします。

Twitterのシェアボタン設置

基本のコードはこちらです。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>      

シェアボタンを押すと、下記のように表示されます。

シェア画面

基本のコードに、任意のテキストやユーザー名を追加することもできます。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
data-text="ツイートのテキスト"
data-url="WebページのURL"
data-via="Twitterユーザー名"
data-hashtags="ハッシュタグ"
data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>      ​

タイトル、ユーザー名、ハッシュタグを追加したイメージがこちらです。

シェア画面2

以上、今回はTwitterのシェアボタン設置方法を紹介しました。次回はFacebookのシェアボタン設置方法を紹介します。

ご案内

IBISEをご利用の企業さま
ご利用にあたって不明点、不具合等ありましたらこちらまでご連絡ください。
IBISEにご興味のある方
製品サイトをご覧ください。お問い合わせも本サイトより承ります。

最後まで読んでいただき、ありがとうございました。Twitterでもシェアしていただけますと、とても嬉しいです!

「スキ」ありがとうございます!
株式会社PRAZNAと申します。FAQページや問い合わせフォームを誰でも簡単に作成できるカスタマーサポートツール 「IBISE」(アイビス) を提供しています。 https://ibise.com/