こんにちは。
前回はソーシャルボタン（SNSボタン）の設置方法を紹介しました。
今回は「プラグインなしでソーシャルボタン（SNSボタン）を設置する方法」を深掘りして行こうと思います。
前回の記事↓
※注意
本記事は、CSSやJavaScriptがよくわからない人向けの内容です。ある程度その辺りがわかる方は、参考程度にご覧ください。
もくじ
【手順①】公式サイトからソーシャルボタン（SNSボタン）のコードを入手
【手順③】サイドバーにソーシャルボタン（SNSボタン）を設置する
【手順①】公式サイトからソーシャルボタン（SNSボタン）のコードを入手
まずは公式サイトからそれぞれのボタンのコードを入手します。
- Twitter→https://help.twitter.com/ja/using-twitter/twitter-buttons
- Facebook→https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP
- LINE→https://social-plugins.line.me/ja/how_to_install#lineitbutton
- はてなブログ→https://b.hatena.ne.jp/guide/bbutton
必要な情報を入力して、それぞれのボタンのコードをコピペすればOKです。
「そのコード！どこに入力すればいいの？！」
わたしも調べながら色々試行錯誤してたらできたので、その手順を次にお教えします。と、その前に、Facebookだけコードを貼り付ける前にやらないといけないことがあるのでそちらから説明します。
【手順②】Facebookボタンだけのひと手間
まず、Facebookのコードを取得するとこのような画面が出てくると思います。
はい、既になんのことかわかりません（笑）。
英語表記なのはなんで？！と思いましたが、要するに、Step１に記載のあるコードをどこかにコピペしてね、と書いてあります。
外観→テーマエディター→サイドバー（search.php）→画像の表示しているあたり（？>の下あたり）を改行→コードをペースト
という手順で最初のコードを入れます。
最後に下の方にスクロールすると「ファイルを更新」とあるので、こちらをクリックすれば下準備完了。難しい。
JavaScriptという単語が出てきただけで吐きそうになりましたが、なんとかこれで大丈夫でした…。ここら辺のことって一から勉強しないとわからないから、わたしのようなブログ初心者でパソコンの技能が乏しい人間には訳がわからないです。
【手順③】サイドバーにソーシャルボタン（SNSボタン）を設置する
ようやくボタン表記の一歩手前です。
外観→ウィジェット→カスタムHTML→▼のところをポチッとする
の手順で、なにやらコード入力する画面が出てきます。
ここに、各公式サイトから入手したコードを入力します。一つコードを入力するたびに改行する必要があるので注意してください。
【手順④】ちゃんと表示されているかの確認
一応これで大丈夫なはずですが、どうやらWordPressで使っているテーマによっては、他のサイト様で「コピペしてね」と書かれているコードがうまく作動しないこともあるらしく、一応チェックをしておきましょう。
わたしのブログはこんな感じになりました。なんかボタンごとの高さがいびつだな…。
サイドバーのところにこれが表示されています。見てくれはともあれ、ソーシャルボタンがプラグインなしで表示することができました。
「シェアお願いします！」のところの文面は変えられるので、好きに変えましょう。先ほど説明したカスタムHTMLの入力画面で打ち込むことができます。
以上、わたしでも試行錯誤していたらできたので、ぜひプラグインなしでソーシャルボタンを導入してみてください！
↓以下、参考サイト様↓
https://help.twitter.com/ja/using-twitter/twitter-buttons
https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP
https://social-plugins.line.me/ja/how_to_install#lineitbutton
