Maximal Life

渋谷で働く営業本部長のブログ

はてなブログ:SNS シェアボタン設置

f:id:ss17935:20180922135153p:plain

 

 

先日、はてなブログのテーマを変更した事は書きました。

その時に参考にさせて頂いた”えんでぃ”さんからコメントを頂きました。

私のブログのリンクエラーを見つけて下さり、修正をアドバイス

そして私が悩んでいた SNS ボタンのコードまで書いて下さいました。

これはもはやサービス、ボランティアですね。

本当にありがとうございました。m(_ _)m

という事で早速、活用させて頂きました。

 

 

はてなブログはデザインから SNS シェアボタンを表示させる事ができます。↓

 

f:id:ss17935:20180922134424p:plain

 

ただ、大きさがまちまちだたり、ガタガタで、正直格好は良くないです。

なので HTML で設置する人が多いみたいです。

私も試していたのですが、上手くできずに悩んでいた所、えんでぃさんがコードを書いてくれました。

 

<!-- ここから -->
<div class="shrbtn">
  <!-- HatenaBookmark -->
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
    <span class="htvcenter" style="line-height: 1.6;">
      <i class="blogicon-bookmark" style="font-size:22px"></i>
    </span>
  </a>
  <!-- twitter -->
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-twitter"></i>
  </a>
  <!-- facebook -->
  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-facebook"></i>
  </a>
  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-get-pocket"></i>
  </a>
  <!-- feedly -->
  <a href="http://feedly.com/i/subscription/feed/http://ss17935.hatenablog.com/feed" target="_blank" class="share_btn">
    <i class="fa fa-rss"></i>
  </a>
</div>  
<!-- ここまで -->

私はこれを、デザイン>記事>記事下 に貼り付けただけです。
なんという事でしょう?上手く表示されました。↓

 

 

f:id:ss17935:20180922134438p:plain

 

 

しかし、表示場所が関連記事の下なので、目につきにくいですね。

これではなかなかシェアして貰えそうにありません。

なんとかならないかとググっていると、見つけました。

 

www.notitle-weblog.com

NO TITLE さんという方が公開されていたので、参考にさせて頂きました。

参考にさせて頂いた...というかまたまた貼り付けただけです。

すると、こうなりました。↓

 

 

f:id:ss17935:20180922134449p:plain

 

 

おぅー。ちゃんとSNS シェアボタンが関連記事の上に表示されてます。

うーん、でも広告より上には表示されないのですねぇ...。

それに、スマホで Line シェアボタンを出したいので、デザインでの SNS シェアボタンを有効にしているところも、ちょっといけてない感じ。

これは、はてなブログPro にすれば解決する事なのですが...。

Pro にする前に、もっと読者を増やさなければ。

頑張るぞー!

٩(๑´0`๑)۶

 

ブログ村ランキングに参加しています。

にほんブログ村 ライフスタイルブログへ
にほんブログ村