独自ツイートボタンでポップアップが2窓開く時の解決方法

HTML・CSS

公式のツイートボタンとオリジナルのツイートボタンを同一ページに設置した際に、オリジナルのツイートボタンをクリックするとポップアップが2窓開いてしまう現象があったので、その際の解決法をまとめました。
（他にもSNSのボタンを複数設置しましたが、ポップアップが2つ出てしまったのはツイートボタンだけでした）

ツイートボタンの設置方法のおさらい

A. 公式ボタンの設置

公式サイト(https://about.twitter.com/ja/resources/buttons#tweet)にアクセスして「リンクを共有する」を選択

「リンクを共有する」を選択するとこちらの画面が出てくるので

①「ボタンのオプション」を設定した後、②「コードのプレビューを見る」に記述されているソースコードをツイートボタンを設置した箇所にペーストする

<a href="https://twitter.com/share" class="twitter-share-button" data-url="【記事URI】" data-text="【記事タイトル】" data-via="【Twitterアカウント名】" data-lang="ja">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

B. 独自ボタンの設置

<a href="http://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow"><img src="【ボタン画像のパス】" alt="ツイート" width="50" height="50" /></a>

C. 独自ボタンの設置（Web Intents）

<a href="http://twitter.com/intent/tweet?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow"><img src="【ボタン画像のパス】" alt="ツイート" width="50" height="50" /></a>

独自ボタンだけが2窓開いてしまう条件

A / B のボタンを同一ページに設置：2窓開かない
A / C のボタンを同一ページに設置：Ⅲをクリックで2窓開く

結果として、公式ボタンとWeb IntentsのTwitterボタンを同一ページに設置すると2窓が開く現象が起こる事がわかりました

解決方法

Web IntentsのTwitterボタンのURLhttp://twitter.com/intent/tweetをhttp://twitter.com/shareにする
独自ボタンの記述から「onClick=”window.open〜”」を削除するスマホでも2窓問題は発生するので、同じ様に対応すれば良いのですがスマホではタブで開けば事足りるので、「onClick=”window.open〜”」を「target="_blank"」に変更すれば別窓で開けるようになります。