Twitterのシェアボタンを押すとポップアップが2つ表示される場合の対処法

スポンサードリンク

こんにちは!アイマーチャントの小川(@ogawakenta)です。

このブログのテンプレートはOPENCAGEさんの「アルバトロス」という有料テンプレートを使っています。デザインセンスがまるでない自分でも綺麗なワードプレスサイトを作れるため、他の運営サイトでも愛用させていただいております。

非常に楽しくブログ運営をさせていただいているのですが、1つだけ困ったことが…Twitterのシェアボタンを押すとポップアップが2つ表示されてしまうんですよね。(上の画像の通りです。)

この問題を解決するために調査した内容と修正した個所をまとめていきます。

原因は「JavaScript」の干渉らしい…

Twitterのポップアップが2つ表示されてしまうのは、デフォルトの不具合ではありません。サイト上にTwitterの公式ウィジェットを設置している時にのみ、発生する問題です。

このブログで言えば、これですね。

公式のJavaScriptが「OnClick」イベントに何かを仕込んでいるらしく、一度のクリックで両方のポップアップが出てしまっている現象のようです。

公式のJavaScriptをいじれるはずもないので、テーマ側のコードを修正する必要があります。

OPENCAGEさんが公式で提示している修正方法

検索してみると、テーマを販売されているOPENCAGEさんが修正方法を記事にしてくれていました。

テーマファイル内の「parts_sns.php」と「parts_sns_short.php」の中からTwitterボタンコード部分を修正します。

onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"

この修正方法をやってみたところ、確かに2重ポップアップはなくなりました。

が!!

1つのポップアップと新たにタブを開いて「リンクをあなたのフォロワーに共有する」という画面が出てきてしまったのです。

確かにポップアップが2つ表示される現象は解消されましたが、これは僕がやりたかったことではありません。ポップアップを1つだけ出したいんですよね。

解決方法は簡単!Twitterの参照元を変えるだけ。

検索を続けた結果、下記の2つの記事を発見しました。

1つ目の記事を要約すると「公式のほうでポップアップの設定をしているから、コチラ側の設定を削除すればOK」ということです。OPENCAGEさんが推奨する方法(コードの削除)は、この考え方に基づいているはず。

2つ目の記事で学んだことは「【https://twitter.com/share】と【http://twitter.com/intent/tweet】の2つリンクによって、それぞれウィンドウが開いてしまう」ということです。(公式ボタンと独自ボタンが揃うとポップアップが二重になる原因のことです。)

この2つの記事を読んで試行錯誤した結果、「呼び出すツイートの元を同じにすれば良い」という解決方法に辿り着きました。

アルバトロスのTwitterボタンのコード部分は「<a target=”blank” href=”//twitter.com/intent/tweet?url=・・・」から始まっているのですが、その部分を「<a target=”blank” href=”//twitter.com/share?url=・・・」に変えるだけです。

これだけで解決しました。(テーマファイル内の「parts_sns.php」と「parts_sns_short.php」の両方で変えます。)

求めている動作をしてくれていることを確認して、修正は完了です!

注意点は2つあります。

この修正をする場合に注意することは2つあります。

1つはサイト内に設置している公式のウェジェットを外した場合、動作が変わる可能性があること。(ポップアップを指定するコードは消していないので、恐らく稼働すると思いますが、試せていません。)

もう1つは万が一に備えて、元に戻せるように注意しながら修正をすることです。僕は大元のコードをメモ帳に残しつつ、修正しました。

長い目で考えると、元のコードが必要となる可能性は非常に高いので必ず大元は残しておきましょう。以上に注意しながら、1つ参考にしてみて下さい。

※このブログのテンプレートは「アルバトロス」です。

なお、僕はJavaScriptの知識は完全にゼロです。先人たちの知恵を借りつつ、試行錯誤で何とかなりました。(笑)

下のシェアボタンからシェアしていただけると、非常に喜びます。今回の修正がきちんと動作しているかを確かめるついでに、シェアをお願いします。(笑)

マイプロテインのセール情報

■【期間限定】2017年6月21日~・初回購入割引が25%オフから30%オフになるキャンペーンを実施中!

→ 【速報】マイプロテインでの初回割引30%オフとJCBカードの利用について

■今月の月イチセールはチョコレート味30%オフ!・割引コードは CHOCO30 です。

・その他、週末セールや最大70%オフのお買い得商品も!

スポンサードリンク

【登録不要】プロテインに関する知識と経験の全てを1ページにまとめました!

筋トレをする上で欠かせないものはプロテインですが、日本で売られているプロテインの大元は全て同じだと知っていますか?中身が同じなら、コスパで選べば良いと思いませんか?

プロテインについて調べたこと、実践したことを全て記事にしてまとめています。(記事を書くのに掛けた時間には自信があります!)

「ビタミン・ミネラル」・「フィッシュオイル」・「BCAA」・「クレアチン」などなど、各種サプリについても情報を追加中です。

必要な情報を全てまとめる勢いで作成しているので騙されたと思って覗いてみて下さい!