せっかく書いた記事は広くシェアしてもらいたいですよね。
なので、ブログにTwitterやfacebookのシェアボタンを付けたいところですが、プラグインは増やしたくないですよね。
そもそもシェアボタンくらいは自分でコーディングしましょうというお話もあるので、とても簡単な書き方ですが、ご紹介させて頂きます。
通常のSNSのシェアボタンの作り方
順を追って説明するために、まずは普通のシェアボタンの記述を再確認します。今回は、TwitterとfacebookとLINEのボタン設置に挑戦します。
Twitterのシェアボタン
以下の{タイトル}部分にシェアする際の文章を、{URL}にシェアするページのURLを書きます。
<a href="http://twitter.com/share?text={タイトル}&url={URL}">シェア</a>記号の{}は実際には書かないです。
facebookのシェアボタン
<a href="http://www.facebook.com/sharer.php?u={URL}&t={タイトル}">シェア</a>Twitterと同じような感じです。
LINEのシェアボタン
<a href="https://social-plugins.line.me/lineit/share?url={URL}">シェア</a>LINEのシェアボタンはスマホからでないと反応しません。
これらの記述をワードプレスに組み込んでいきます。
ページのURLとタイトルを取得して代入する。
あとはページのURLとタイトルさえ取得できればできそうですよね。
下記の２つの関数を使います。
ページURLの取得
<?php echo get_the_permalink();?>ページタイトルの取得
<?php echo get_the_title(); ?>たったこれだけです。簡単ですね。全部書くとこのようになります。
<!-- Twitter -->
<a href="http://twitter.com/share?text=<?php echo get_the_title(); ?>&url=<?php echo get_the_permalink();?>">シェア</a>
<!-- facebook-->
<a href="http://www.facebook.com/sharer.php?u=<?php echo get_the_permalink();?>&t=<?php echo get_the_title(); ?>">シェア</a>
<!-- LINE-->
<a href="https://social-plugins.line.me/lineit/share?url=<?php echo get_the_permalink();?>">シェア</a>
ボタンのデザインをする
今の状態だと、シェアという文字を押すボタンになっています。ここに画像を入れてボタンにしたいと思います。WordPressの投稿以外の所にオリジナルの画像を入れるときには、こちらのコードが便利です。
<?php echo get_template_directory_uri(); ?>この関数で、テンプレートのルートディレクトリを取得できます。そのためテンプレートフォルダの直下にimgというフォルダを作って画像を入れておけば、このように取得ができます。
<img src="<?php echo get_template_directory_uri(); ?>/img/icon_twitter.png" alt="Twitterにシェア">ボタンの画像は、自分でデザインするか、それぞれのSNSの公式サイトからアイコンをダウンロードすると良いと思います。
このサイトの記事の下のシェアボタンはこの方法で作っています。シンプルが一番ですね。