![](https://www.tam-tam.co.jp/tipsnote/wpdata/wp-content/uploads/2015/12/susa2.png)
独自ツイートボタンでポップアップが2窓開く時の解決方法
![](https://www.tam-tam.co.jp/tipsnote/wpdata/wp-content/uploads/2016/04/eyecatch01-690x362.jpg)
公式のツイートボタンとオリジナルのツイートボタンを同一ページに設置した際に、オリジナルのツイートボタンをクリックするとポップアップが2窓開いてしまう現象があったので、その際の解決法をまとめました。
(他にもSNSのボタンを複数設置しましたが、ポップアップが2つ出てしまったのはツイートボタンだけでした)
ツイートボタンの設置方法のおさらい
A. 公式ボタンの設置
公式サイト(https://about.twitter.com/ja/resources/buttons#tweet)にアクセスして「リンクを共有する」を選択
![img01](https://www.tam-tam.co.jp/tipsnote/wpdata/wp-content/uploads/2016/04/img01-2-690x207.png)
「リンクを共有する」を選択するとこちらの画面が出てくるので
![img02](https://www.tam-tam.co.jp/tipsnote/wpdata/wp-content/uploads/2016/04/img02-568x362.png)
①「ボタンのオプション」を設定した後、②「コードのプレビューを見る」に記述されているソースコードをツイートボタンを設置した箇所にペーストする
<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ボタンのURL
http://twitter.com/intent/tweet
をhttp://twitter.com/share
にする - 独自ボタンの記述から「onClick=”window.open〜”」を削除する スマホでも2窓問題は発生するので、同じ様に対応すれば良いのですが スマホではタブで開けば事足りるので、「onClick=”window.open〜”」を「target="_blank"」に変更すれば別窓で開けるようになります。
参考
■ オリジナル画像のツイートボタンを設置する方法
http://edge.sincar.jp/web/original-tweet-button/
■ JavaScriptでwindow.openする自作ツイートボタンでポップアップが2つ出る問題の馬鹿みたいに簡単な解決方法
http://oshiire.org/2015/04/twitter_window_open/
■ 今絶対知っておくべき!!Twitterツイートボタンの設置・実装方法まとめ
http://blog.yuhiisk.com/archive/2015/10/12/twitter-share.html