WebflowのCMS機能を用いて作成したブログページにTwitterシェアボタンを追加する方法

ブログページにSNSでのシェアボタンを追加したいと思うことは多いと思います。
今回は、Webflowを用いて作成したサイトのブログページに、Twitterでのシェアボタンを追加する手順について解説します。

ツイートシェアの埋め込みコードを取得する

‍
https://publish.twitter.com/# にアクセスしてください。
カードをクリックした後に、シェアするボタンの種類を選択して、コードを取得してください。

今回、ツイート内容カスタマイズ後のコードはこちらになりました。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="STUDIOのフォームをGoogleスプレッドシートと連携する手順" data-url="https://www.qed-inc.co.jp/blog/studio-spreadsheet" data-hashtags="QEDブログ" data-lang="ja" data-dnt="true" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

‍

Webflow側でコードを埋め込み

‍
Webflowの記事ページで、先ほどコピーしたコードを貼り付け、
タイトル部分（data-text属性）とシェアされるURL部分（data-url属性）の内容を、CMS内の値に応じて変わるように置換します。CMS内の値を入力する際は、右上にある「Add Field」をクリックして、挿入する項目を選択します。

※その他の箇所も必要に応じて変更してください。

これでPublishすると、ツイッターのシェアボタンが追加されます。
ブログはTwitterで拡散されると多くの人に読まれることになるので、是非シェアボタンを追加して、人の目に触れる機会を増やしていきましょう！