rakuishi.com

[WordPress] 標準ソーシャルボタンを使わずに、共有するためのリンク指定

各 SNS サイトから入手できるソーシャルボタンは、次の記事の方法を使えば比較的綺麗に並べることができます。→ 最小限の記述でソーシャルボタンを綺麗に並べる · rakuishi.com

ですが、標準的なソーシャルボタンには以下のデメリットがあります。

  • 各サービス間でボタンサイズが異なるため、見た目が統一されない
  • 読み込みに時間がかかるため、ページ読み込み完了までのボトルネックになりやすい

代わりにただのテキストリンクにして同じように共有することができれば、上記の問題は無視できます(が、数字を気にしたい場合には向いていません)。この記事では、Twitter, Facebook, Pocket をテキストリンクから共有・後で読むためのコードを紹介します。

※ 記事のタイトルと URL を取得するため、WordPress の記事ループ中に記述します。具体的には、<? if (have_posts()): while (have_posts()): the_post(); ?> から <? endwhile; endif; ?> 内に記述します。

Twitter

<a href="http://twitter.com/share?url=<? echo urlencode(get_permalink()); ?>&text=<? echo get_the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,height=300,width=600');return false;">Twitter</a>

Facebook

<a href="http://www.facebook.com/sharer.php?u=<? echo urlencode(get_permalink()); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,height=300,width=600');return false;">Facebook</a>

Pocket

<a href="http://getpocket.com/edit?url=<? echo urlencode(get_permalink()); ?>&title=<? echo get_the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,scrollbars=yes,height=300,width=600');return false;">Pocket</a>