こんにちは!ダチたまです。

このブログではSNSのシェアボタンをプラグインを導入して設置していましたが、どのデザインも好みではなかったのと、プラグインを使っているとブログを表示するのに重くなっていた気がしたので自作してみることにしました。

今回作成したのは、「Twitter」「Facebook」「はてなブックマーク」「Google+」「Pocket」のシェアボタンです。作成方法について書いていきたいと思います。

スポンサーリンク



SNSのシェアリンク先

基礎知識として、各SNSのシェア用のリンク先は以下のURLとなっています。これらを使ってソースコードを作成していきます。

Twitterhttps://twitter.com/intent/tweet?text=【投稿エリアに初期表示したい文字】&url=【シェアする記事のURL】

 

FaceBookhttps://www.facebook.com/sharer.php?src=bm&u=【シェアする記事のURL】&t=【投稿エリアに初期表示したい文字】

 

はてなブックマークhttp://b.hatena.ne.jp/add?mode=confirm&url=【シェアする記事のURL】&title=【シェアする記事のタイトル】

 

Google+https://plus.google.com/share?url=【シェアする記事のURL】

 

Pockethttp://getpocket.com/edit?url=【シェアする記事のURL】

 

シェアボタンの配置ファイルを作成する

では、上記のURLを使いつつ、シェアボタンを配置するphpファイルを作成します。ファイル名は何でも良いですが、私の場合は便宜上「sns-share.php」としました。

ファイルの内容は以下のとおりです。コピペでOKですよ♪

 

なお、各SNSのアイコンの表示には、「FontAwesome」のWebフォントを使用しています。
(はてなブックマークだけFontAwesomeのWebフォントが用意されていないので、自作しています。これについては後述します。)

「FontAwesome」を記事中に使いたい場合には、プラグイン「Font Awesome 4 Menus」を導入しておくと良いです。

導入の仕方は、以下のリンクから「Font Awesome 4 Menusの使い方」の【1】をご覧ください。インストールして「有効化」しておくと、記事中にショートコードを入力するだけで「FontAwesome」のWebフォントを表示できるようになりますので、「sns-share.php」を呼び出すだけでSNSのアイコンを表示できるようになります。

 

作成したファイルを配置

作成した「sns-share.php」ファイルを以下のフォルダに格納します。あらかじめ子テーマを作成しておくと良いです。

POINTsns-shar.phpの格納フォルダ ⇒ public_html/wp-content/themes/子テーマ

 

シェアボタンを表示する

それでは、作成した「sns-share.php」を呼び出して、シェアボタンを記事に表示してみましょう。
表示したい場所に以下のコードを追加すると、シェアボタンを表示することができます。

私の場合は、ブログ記事を書き終わった後にシェアボタンを表示することにしました。

私の使っているテーマは「Twenty Seventeen」ですが、このテーマでは「content.php」内にコードを追加することで、上手く表示されました。

 

POINTcontent.phpの格納フォルダ ⇒ public_html/wp-content/themes/子テーマ/template-parts/post

なお、コードを追加した場所は以下の場所です。

ここまでで、ブログ記事に以下の様にシェアボタンの原型が表示されるようになりました。

はてなブックマークのみ表示されていませんが、ここからCSSデザインすることで表示されるようになりますので、心配は要りません。

では、ボタンのデザインを整えていきましょう。

 

シェアボタンをデザインする

「style.css」を修正していきます。以下のコードを追加してみてください。

ちょっとだけ解説

1行目から6行目で「はてなブックマーク」のアイコンを自作しています。公式のアイコンに近いフォントを太字にして使用しています。

20行目から30行目では、シェアボタンの共通の表示設定を行っています。少し丸みを持たせて、影を表示するようにしました。

56行目から61行目では、ボタンの表示幅と余白を設定しています。レスポンシブデザインにしており、ブラウザの幅を狭くするとボタンの幅も狭くなるようになっています。

69行目から75行目では、カーソルをシェアボタンに重ねた時、ボタンを押すような動作にしました。

 

シェアボタンの完成

このようにブログ記事にSNSのシェアボタンを表示することができました。

飽きたらCSSをいじってデザインを変更することができるので、自由度が高くて良いですよ。

SNSのシェアボタンを作ってみたい方は参考にしてみてください。

この記事をシェアする

“【コピペOK!】SNSのシェアボタンをプラグインなしで自作するカスタマイズ” への1件の返信

  1. 初めまして。
    こちらのサイトを参考に初心者ながらwordpressを編集させていただいています。
    このページの「シェアボタンをデザインする」項目でのコードは具体的に「style.css」のどこに追加すればいいのでしょうか?
    何回か色んなところに追加してみたのですが、上手くいきません。
    もしよろしければ教えていただけないでしょうか。
    よろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です