フェイスブックでシェアする際にポップアップの警告メッセージが出てくるようになったのでSNSボタンのコードを変更しました

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

Facebookで自作のシェアボタンをクリックすると、【ポップアップがこのページで表示するには小さすぎます。より大きいポップアップを使用してください。】というメッセージが表示されるようになりました。
これがいつ頃から表示されるようになったのかはわかりません。それに伴い、当サイトで掲載しているオリジナルのSNSボタンのコードを変更しました。また、今まで直そうと思っていた細かい所も一気に修正したのでお知らせします。

8種のSNSボタン変更箇所

元になった記事は下記のものになります。元記事はすでにコード差し替え済みですので、お急ぎの方は↓こちらへ。

フェイスブックの変更を機に色々変えた部分があります。シェアの妨げになっては大変ですので取り急ぎ必要なのはFBの部分の変更です。

Facebookのシェアボタン変更部分

変更は以下のPC部分です。

<!--Facebookボタン-->      
<li class="facebook">       
<a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;"><i class="fa fa-facebook"></i>Facebook&nbsp; <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>

こちらは、height=800とwidth=1000へと変更しました。どうやらこの部分（ポップアップ窓のサイズ）が800以下だと上記のようなエラーメッセージが出てくるようなのです。

800*1000だと巨大な窓となってしまうので、

onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000’);return false;”

この部分を削除し、target=”blank”　にしてもいいかもしれません。そこはお好みでどうぞ。

ツイッターのシェアボタン変更部分

ツイッターもコードを最新のものに変更しました。今までのものでもシェアはできていたのですが、公式のボタンに準じたものにしました。

また、ツイート後にフォローしていないユーザーに対して、フォローを促すコードを付け足しました。※ツイッターアカウントを入れる箇所が2つになりました。

モバイル部分

<a href="https://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton&related="【●ツイッターアカウント名（＠なし）●】"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>

PC部分

PCはモバイルの部分にonclick～の部分を追記しました。ツイッターは以前勝手にポップアップが表示される仕様だったのですが、こちらもいつの間にか同窓で開くようになっていたので変更しました。

Attention

こちらの記事で紹介しているSNSボタンのコードはスマホでは同窓、タブレットからは別窓でサイトを開くようにしています。

<a href="https://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton&related="【●ツイッターアカウント名（＠なし）●】" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>

pocketのアイコンフォントを設置

Font Awesomeのアイコンフォントにpocketが追加されたので、こちらも対応しました。しかしFont AwesomeのCDNのヴァージョンが4.4以上である必要があります。こちらを最新のコードに差し替える必要があります。（今現在最新4.5）

STINGER5はheader.phpにコードがありますので差し替えてください。

Font Awesomeの最新版のCDNのコードはこちら

RSS

PCでのRSSに対してtarget=”blank”を追加しました。

SNSボタンのコード変更はこんなところです。

ツイッター数の取得に対して

ツイッターの仕様変更によりシェア数を取得できなくなったのはご存じのことと思います。WEBサービスを利用することによりシェア数を復活させる方法があるそうですが、こちらはまだ様子を見ている感じです。SNS Count Cacheで神対応があればいいなーなんて……。

widgetoon.js & count.jsoon | digitiminimi

ツイッターで＠が表示されない事例

ツイッターボタンにvia=【ツイッターアカウント名】と設置してあれば通常ですとシェアの際に＠〇〇さんよりと表示される仕組みになっています。

それが最近＠が表示されないというご指摘を頂きました。

おそらくなのですが、iPhoneからの投稿の場合にのみそうなっているようなんです。公式のツイートボタンでつぶやいている場合にも＠が付かない場合もあるのでiPhone(iOS？)の仕様なのかなー？と考えています。良くわかりません。すみません。

対処法などわかる方はぜひ教えていただきたいです！よろしくお願いします(>_<)

まとめ

めんとくさいのでちょいちょい仕様を変えるのやめてほしい。