| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
TOTAL PV
オリジナルSNSボタンの設置
あとで読むはてなブックマーク - オリジナルSNSボタンの設置 | 2018年02月23日(金) | 0 | 0 | 記事編集
オリジナルSNSボタンの設置

仕様変更と共に?

当ブログ記事のSNSシェアボタンですが
かなり前から忍者おまとめボタンを利用しておりまして…

設置当初
設置当初は、そのカスタマイズ自由度の高さから
特に不満も無く使わせていただいていたんですが…

Twitterやgoogle+の仕様変更でツイート数やシェア数が表示されなくなったりして

現在はこんな感じ
サイトのレイアウト的にちょっとモヤっとしか感じに…

っつ〜事で。。
この度重い腰を上げて、オリジナルSNSボタンの設置に挑戦してみました。。


オリジナルSNSボタンの作成

ボタンの設置にあたり、下記サイトさんを参考にさせていただきました

丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】

このJunkBlogはワードプレスで運用していて、自作テンプレートを使用しています。レスポンシブデザインを採用 […]

紹介されてるのは丸型のSNSボタンの作り方ですけど

ボタンの設置
CSSの変更で角丸型のボタンにしてみました。。

各SNSのシェアURL

参考までに設置した各ボタンのリンク先を記載しておきます。。

【Twitter】
<a href="https://twitter.com/share?url=【URL】" target="_blank">Twitter</a>

【Facebook】
<a href="https://www.facebook.com/sharer/sharer.php?u=【URL】" target="_blank">Facebook</a>

【はてな】
<a href="http://b.hatena.ne.jp/add?url=【URL】" target="_blank">はてな</a>

【Pocket】
<a href="http://getpocket.com/edit?url=【URL】&title=【記事タイトル】" target="_blank">Pocket</a>

【google+】
<a href="https://plus.google.com/share?url=【URL】" target="_blank">google+</a>

【Feedly】
<a href="https://feedly.com/i/subscription/feed/【ブログのRSS】" target="_blank">Feedly</a>

【LINE】
<a href="https://timeline.line.me/social-plugin/share?url=【URL】" target="_blank">LINE</a>


シェア数取得と表示

今まで忍者おまとめボタンを卒業出来なかった理由の一つに
シェア数の表示が簡単に行えるってのがあったんで
今回オリジナルボタンを作るにあたっては是非ともシェア数の表示もさせたい…
って事で色々と調べてみた所
SNSシェア数取得が出来るjQueryのプラグイン
【cb-sharecount-js】があったので
そちらを導入させていただきました♪

SNSシェア数取得JSプラグイン「cb-sharecount-js v2.0」リリース | maesblog

ブログ記事を評価する上での一つの指標としてSNSのシェア数(ソーシャルカウント)があります。各SNSが用意した純正のシェアボタンなどもありますが、パフォーマンスがイマイチだったり、自由にデザイ...

「cb−sharecount-js v2.0」概要
・実装が簡単。プラグインを実行させたいjQueryオブジェクトに指定したセレクター要素のtitle属性に[シェア数を取得したいURL]を設定するだけ。JavaScriptの実装はたったの1行。
・同一ページ内で複数のURLの値の取得ができるので、ブログ記事の一覧などでの使用に最適。
・非同期かつ並列処理で値を取得するので、ページの表示にもやさしい。
・値だけを取得するので、レイアウトもデザインも自由に行える。
・localStorageを使ったcache機能付き(デフォルト有効期限: 1日)。同一ドメイン内であれば複数のページで共有可能。
・はてなブックマーク登録数、Facebookいいね数、Twitterツイート数、Pocketシェア数の4サービスに対応。表示するSNSを選択可能。
SNSシェア数取得JSプラグイン「cb-sharecount-js v2.0」リリース | maesblog
設置に関しては上記サイトを参考に…
っつ〜か、ぶっちゃけ当ブログの仕様とイマイチ相性が悪いのか??
なかなか上手く表示されませんでしたが…
色々ゴニョゴニョ(謎…爆)して。。

オリジナルSNSボタン完成
なんとかシェア数付きのオリジナルSNSボタンの設置ができました[icon:ハート]

あ、google+については現在シェア数の取得が出来ない仕様っぽい(?)んで
とりあえずダミーで(爆
2018年02月23日(金) 17:41 | ネット > 改造メモ | 0 | 0 | 記事編集
  • 0

  • 0

  • 0

  • 0

  • 0
  • 0
  • コメント[0]
  • Facebookコメント[]
  • はてブコメント[]
  • Twitter[]

まだこの記事へのコメントはありません。

コメントする

icons:

 
トラックバック

まだこの記事へのトラックバックはありません。

ランキング参加中:応援(クリック)よろしくお願いします
  ブログランキング・にほんブログ村へ ブログ王ランキングに参加中! .*:゚(・ω・人)゚:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
  • SEOブログパーツ
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:RX-8