韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り12(SNSシェアボタン)

WordPress

プラグインなしで、SNSのシェアボタンを作成したいと思います。
このブログで作成したシェアボタンは、Twiiter、Facebook、Google+の3種類です。
投稿ページ用のsingle.phpに表示したいと思います。
もちろん、固定ページ用のpage.phpなどに貼っても良いと思います。

このブログでは、single.phpの記事を表示する部分は、「content.php」という別ファイルに切り出しています。
(詳細は、「WordPressでブログ作り6(shingle.phpを作成)」の記事をご覧ください。)

なので、今回はcontent.phpにソースコードを追記していきます。

1、Twitterのシェアボタン

Twitterのシェアボタンを、以下のようにaタグで囲みます。

<a href="https://twitter.com/share?text=<?php the_title(); ?>:<?php bloginfo('name');?>" target="_blank" title="Twitterでシェア" class="share__tw" data-lang="ja" data-count="none">
  ★ここにシェアボタン★
</a>

href属性の値は、「https://twitter.com/share」から始まり、?のあとは、パラメータをつけます。
text=とすると、シェアボタンを押したあとにデフォルトで表示されるツイートの文言を設定できます。
ここでは、「記事のタイトル:サイト名」となるようにしました。なにも設定しなければ、URLのみになります。

↓プレビュー

そして、aタグのdata属性ですが、「data-lang=”ja”」で、日本語設定にします。英語にする場合は、「en」です。
「data-count=”none”」で、カウントを表示なしにします。デフォルトは「horizontal」で、カウントが右に表示されます。「vertical」にすると上に表示されます。
その他にも色々なパラメータがあり、「data-パラメータ名=”値”」の形で設定します。

aタグのクラス名は任意のもので大丈夫です。

【参考サイト】
Tweet Button | Twitter Developers
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

スポンサーリンク

2、Facebookのシェアボタン

Facebookのシェアボタンを、以下のようにaタグで囲みます。

<a href="javascript:void window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href),'_blank', 'width=550, height=360, left=100, top=50, scrollbars=1, resizable=1', 0);" class="share__fb">
  ★ここにシェアボタン★
</a>

↓プレビュー

どのように調べてこのソースコードになったか忘れてしまいましたが、「http://www.facebook.com/sharer.php」というURLのあとに、「?u=」とuパラメータをつなぎます。
クラス名は任意です。

3、Google+のシェアボタン

Google+のシェアボタンを、以下のようにaタグで囲みます。

<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" class="share__gp">
  ★ここにシェアボタン★
</a>

↓プレビュー
151026google

「https://plus.google.com/share」のあとに、「?url=」とつないで、urlパラメータを付けます。値は記事のURLにしたいので、「the_permalink()」にします。クラス名は任意です。

スポンサーリンク

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください