SNSシェアボタンを横並びにしました。

SNSを表示させるプラグインの更新がされずセキュリティに問題が出る可能性があるのでプラグインなしで設置することにしました。
SNSのシェアボタンを貼ってみたところ、高さがそろわずガタガタに表示されたので修正しました。

SNSボタンの横並び方法

1.公式サイトでツイッターのボタンを作成します。
2．サイト全体ではなく、記事のシェアにする為にコードを修正します。

data-url="<?php the_permalink(); ?>" 

一行を追加します。
★★★にツイッターアカウントはご自分のを入れて下さい。

 

<a href="https://twitter.com/share"
class="twitter-share-button" 
data-url="<?php the_permalink(); ?>" 
data-via="★★★">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

3.feedlyのボタンを取得する。

4.できたボタンにコードを追加する。

<ul class="sns-wrap">
<li class="twitter">
出来たコード</li>
<li class="feedly">
出来たコード</li>
</ul>で囲み、表示させたい場所に貼ります。

5.スタイルシートに以下のコードを貼ります。

/* *****************************************************************
*   SNS記事下いいねボタン横並び
* ***************************************************************** */
 .sns-wrap{
  margin:20px auto;
  padding:0;
  overflow: hidden;
  list-style: none;
}
.sns-wrap li{
  float: left;
  margin:0 10px 0 0;
  overflow: hidden;
}
.sns-wrap li.twitter{
  width:90px;
}

.sns-wrap li.feedly{
 line-height: 1;
]

完成！

カスタマイズは必ずバックアップと取って下さいね。

2017.10.19にfacebookページを作ったのでボタンの追加をします。facebookのいいね＆シェアボタンの設置方法

1.　以下のコードをスタイルシートに追記します。

.sns-wrap li.fb{
  line-height: 1;
}

2.　こちらで公式のボタンを作ります。

作成するとPOPUPが開きますので、右上のIFLAMEを選択してコードを取得します。

3.　ページの「いいね」を頂きたいのでコードを訂正します。

<iframe src="https://www.facebook.com/plugins/like.php?href=●●●&width=130&layout=button_count&action=like&size=small&show_faces=true&share=true&height=46&appId=★★★" width="130" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

●●●に

<?php the_permalink() ?>
このコードと置き換えます。

<li class="fb"><iframe src="https://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&width=130&layout=button_count&action=like&size=small&show_faces=false&share=true&height=46&appId=★★★" width="130" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</li>

★★★にfacebookのappIDを入れます。

IDはFacebook Developers で新規のアプリを作ってIDを取得します。

開いたページのURLの最後に/appsを入れます。

完成！

私は、見様見真似の独学で行っていますので自己責任でお願い致します。