公開日
2020-11-27
更新日
2020-11-27
WebflowのCMS機能を用いて作成したブログページにTwitterシェアボタンを追加する方法
目次
ブログページにSNSでのシェアボタンを追加したいと思うことは多いと思います。
今回は、Webflowを用いて作成したサイトのブログページに、Twitterでのシェアボタンを追加する手順について解説します。
ツイートシェアの埋め込みコードを取得する
https://publish.twitter.com/# にアクセスしてください。
カードをクリックした後に、シェアするボタンの種類を選択して、コードを取得してください。

今回、ツイート内容カスタマイズ後のコードはこちらになりました。
Webflow側でコードを埋め込み
Webflowの記事ページで、先ほどコピーしたコードを貼り付け、
タイトル部分(data-text属性)とシェアされるURL部分(data-url属性)の内容を、CMS内の値に応じて変わるように置換します。CMS内の値を入力する際は、右上にある「Add Field」をクリックして、挿入する項目を選択します。
※その他の箇所も必要に応じて変更してください。

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