Twitterのシェアボタンを動的に変更するテク

とある運営サイトでTwitterのシェアボタンを設置したのですが、1つ問題が発生。
このサイトでは一覧・記事間でページ遷移の無い作りにしており、一覧ページで記事がクリックされると適宜必要なdata属性等の情報をjavascriptで拾って記事テンプレ部分に当てはめて表示、という処理を行っているのですが、テンプレ部分に設置していたTwitterのシェアボタンにも当然Twitter側の用意したjavascriptが絡んでおりボタンのパラメータを動的に変更というのがどうしても出来なかったのです。
で、解決策を探していた所以下の方法を発見しました。
https://qiita.com/itagakishintaro/items/b170ba1ba268d76aeace
やり方を引用すると、

・前につくったTweetボタンを削除
・テンプレートをclone
・cloneしたものからdisplay:none;を外して表示
・data-urlを新しいURLにする(この例では今のURLにしている)
・twitter-share-buttonにする
・空の領域に作ったTweetボタンを配置
・scriptを読み込み、Tweetボタンを設定する

という事らしいです。よく考えるなあ。。
この通り試してみると無事出来ました。これで一安心。

シェアボタンの参考リンク:
https://syncer.jp/how-to-setting-share-button

1 Star2 Stars3 Stars4 Stars5 Stars (まだ投票されていません)
Loading...

    コメント