ホーム
サービス
ノーコード相談サービスShopifyを用いたEC制作飲食店特化のWEB制作
ブログ一覧会社概要
採用情報
NEW
お問い合わせ
公開日 
2020-11-27
更新日 
2020-11-27

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で拡散されると多くの人に読まれることになるので、是非シェアボタンを追加して、人の目に触れる機会を増やしていきましょう!

Tweet
Tagged:
SNS
シェアボタン
阿部 紘凡
取締役 CMO/CSO
全てのブログを見る
人気記事
ノーコード全般
ノーコードでシステム開発費用はどれくらい安くなる!?
ノーコード全般
システム開発でノーコードを検討すべき事例5選とは
ノーコード全般
【サイト制作編】シーン別!ノーコードツールの使い分けを徹底解説
ノーコード全般
ノーコードでLP制作費用はどれくらい安くなる!?
Shopify
ECサイトを今すぐShopifyに移行すべき3つの理由
Tags
LP制作
SNS
アカウント作成
カゴ落ち
コーポレートサイト制作
サイト制作
シェアボタン
テンプレート
モール型EC
レスポンシブ
ローコード
一元管理
売上
外部連携
料金体系
施策
移行
購入率
開発
新着記事を受け取る
ありがとうございます。登録が完了いたしました。
登録に失敗しました。メールアドレスを確認し、再度お試しください。
Follow Us
Subscribe

新着記事を受け取る

ご登録ありがとうございます!
登録に失敗しました。
More Posts

オススメの投稿

ノーコード全般
ノーコードでシステム開発費用はどれくらい安くなる!?
2021-07-06
 by 
室伏 正裕
ノーコード全般
システム開発でノーコードを検討すべき事例5選とは
2021-07-06
 by 
室伏 正裕
Webflow
コーポレートサイト制作にオススメのWebflowテンプレート8選 - 無料&有料テーマ
2021-07-06
 by 
室伏 正裕
ノーコード全般
【サイト制作編】シーン別!ノーコードツールの使い分けを徹底解説
2021-07-06
 by 
室伏 正裕
ノーコード全般
ノーコードでLP制作費用はどれくらい安くなる!?
2021-07-06
 by 
室伏 正裕
Webflow
Webflowでアカウント解説からサイト公開までの手順を徹底解説
2021-07-06
 by 
室伏 正裕

我々は、お客様の成功をもってして
我々の提供物の価値が示されると信じています。

ホーム
ブログ一覧お問い合わせ
ブログ
ShopifyBubble
サービス
ノーコード相談サービスShopifyを用いたEC制作
© 2020 QED inc.