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

リスト内商品50%オフセールと全品33%オフセールが開催中!

■ リスト内商品50%オフセール + 一定購入以上でデイリービタミン無料

・割引コードは JP50 です。

グルタミン 1kg:3,320円
クレアチン 1kg:1,100円
マルトデキストリン 5kg:1,540円
CLA 180錠:1,745円

■ 全品33%オフ! + 一定購入以上でデイリービタミン無料

・割引コードは JP33 です。

【WPC】Impactホエイプロテイン 5kg:7,363円
【WPI】Impact 分離ホエイプロテイン (アイソレート) 5kg:9,775円

スポンサードリンク

こんにちは!アイマーチャントの小川(@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の知識は完全にゼロです。先人たちの知恵を借りつつ、試行錯誤で何とかなりました。(笑)

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

リスト内商品50%オフセールと全品33%オフセールが開催中!

■ リスト内商品50%オフセール + 一定購入以上でデイリービタミン無料

・割引コードは JP50 です。

グルタミン 1kg:3,320円
クレアチン 1kg:1,100円
マルトデキストリン 5kg:1,540円
CLA 180錠:1,745円

■ 全品33%オフ! + 一定購入以上でデイリービタミン無料

・割引コードは JP33 です。

【WPC】Impactホエイプロテイン 5kg:7,363円
【WPI】Impact 分離ホエイプロテイン (アイソレート) 5kg:9,775円

太りたいガリガリ男子の方へ。筋トレを始める前に…

勢いだけで筋トレを始めても続きません。

「思考のインストール」・「食事と体重の関係性の理解」・「教わる人」の3つが必要です。

詳しくは解説記事をどうぞ!

→ 太りたいガリガリ男子が効率良く健康的に太る方法【筋トレを始める前に抑えるべき3つのポイント】

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

■ 今月の月イチセールはイチゴ味30%オフ!

・割引コードは ICHIGO30 です。

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

スポンサードリンク

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

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

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

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

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