[STINGER5]SNSボタンを押したら、別ウィンドウが開くようにしてみた

WordPressとかSTINGER5テーマ限定のネタでは無いのですが、SNSボタン設置の続きです。

2015.02.11

https://popozure.info/20150211/6559

あとで読めるサービス「Pocket」を使い始めたものの、自分のブログのSNS登録欄には「Pocket」がありません。というわけで、SNSボタンを標準のものから変更してみました。※2015年11月20日をもってTwitterのツイート数取得APIの提供が終了したため、今後はツイート数は更新されません。統一デザインのSNSボタンSTINGER5の標準で用意されているSNSボタンのデザインを統一デザインへとカスタマイズしている記事を見つけました。ここまでだと、見栄えは良くなったものの、記事を表示するたびに各SNSから直接カウントを取得してしまうため記...

SNSボタンを押しても、新しいタブが開くだけだったので、小ウィンドウで開くように直しました。

修正するのは「SNS.php」。

それぞれリンクのAタグのところにある、「target=”_blank”」の直後あたりに、

    &lt;li&gt;&lt;span class="sns-count"&gt;&lt;?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?&gt;&lt;/span&gt;&lt;a href="https://twitter.com/intent/tweet?url=&lt;?php the_permalink(); ?&gt;&amp;text=&lt;?php echo get_the_title(); ?&gt;" target="_blank"&gt;&lt;span class="sns-icon twitter"&gt;twitter&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

「 onclick=”javascript:window.open(this.href, ”, ‘width=600,height=600,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”」を追加します。

    &lt;li&gt;&lt;span class="sns-count"&gt;&lt;?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?&gt;&lt;/span&gt;&lt;a href="https://twitter.com/intent/tweet?url=&lt;?php the_permalink(); ?&gt;&amp;text=&lt;?php echo get_the_title(); ?&gt;" target="_blank" onclick="javascript:window.open(this.href, '', 'width=600,height=600,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"&gt;&lt;span class="sns-icon twitter"&gt;twitter&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

「width=600」が横幅、「height=600」が縦幅なので、適当な数字に直してください。

これを、他のリンクのところにも追加していきます。

&lt;li&gt;&lt;span class="sns-count"&gt;&lt;?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?&gt;&lt;/span&gt;&lt;a href="https://twitter.com/intent/tweet?url=&lt;?php the_permalink(); ?&gt;&amp;text=&lt;?php echo get_the_title(); ?&gt;" target="_blank" onclick="javascript:window.open(this.href, '', 'width=700,height=500,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"&gt;&lt;span class="sns-icon twitter"&gt;twitter&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span class="sns-count"&gt;&lt;?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?&gt;&lt;/span&gt;&lt;a href="https://www.facebook.com/sharer/sharer.php?u=&lt;?php the_permalink(); ?&gt;" target="_blank" onclick="javascript:window.open(this.href, '', 'width=600,height=300,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"&gt;&lt;span class="sns-icon facebook"&gt;facebook&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span class="sns-count"&gt;&lt;?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?&gt;&lt;/span&gt;&lt;a href="https://plus.google.com/share?url=&lt;?php the_permalink(); ?&gt;" target="_blank" onclick="javascript:window.open(this.href, '', 'width=700,height=600,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"&gt;&lt;span class="sns-icon gplus"&gt;google+&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span class="sns-count"&gt;&lt;?php if(function_exists('get_scc_hatebu')) echo get_scc_hatebu(); ?&gt;&lt;/span&gt;&lt;a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php echo get_the_title(); ?&gt;" target="_blank" onclick="javascript:window.open(this.href, '', 'width=600,height=400,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"&gt;&lt;span class="sns-icon hatebu"&gt;はてなブックマーク&lt;/span&gt;&lt;/a&gt;
&lt;li&gt;&lt;span class="sns-count"&gt;&lt;?php if(function_exists('get_scc_pocket')) echo get_scc_pocket(); ?&gt;&lt;/span&gt;&lt;a href="http://getpocket.com/edit?url=&lt;?php the_permalink() ?&gt;&amp;title=&lt;?php echo $title_encode; ?&gt;" target="_blank" onclick="javascript:window.open(this.href, '', 'width=600,height=300,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"&gt;&lt;span class="sns-icon pocket"&gt;Pocket&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span class="sns-count"&gt;&lt;?php echo $fe_count; ?&gt;&lt;/span&gt;&lt;a href="http://cloud.feedly.com/#subscription/feed/http://xxx.xx.xx/feed" target="_blank" onclick="javascript:window.open(this.href, '', 'width=800,height=800,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"&gt;&lt;span class="sns-icon feedly"&gt;feedly&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

これで小窓で開くようになりました。参考までにパラメータの説明を。

javascript:window.open	ウィンドウを開く。
this.href	ウィンドウを開くリンク先として、Aタグで指定された href を指定している。
height=300	高さ：　300px
width=600	幅：　600px
resizable=yes	サイズ変更：　可能
menubar=no	メニューバー：　表示しない
toolbar=no	ツールバー：　表示しない
status=no	ステータスバー：　表示しない
scrollbars=yes	スクロールバー：　表示する
return false;	元々のAタグの機能でクリックしてリンク先に飛ぶのを行わない。これを入れておかないと、javascriptで小窓を開いた上で、元のウィンドウもリンク先へ遷移（せんい）してしまう。