BloggerでWebフォントで作ったSNSボタンを設置するコード

SNSボタン

やっと BloggerにWebフォントで作ったソーシャルボタンを設置することができました。
Bloggerの変数やexpr属性の呪縛により無理だと思われてたガジェットやヘッダーへの設置も可能です。(^_^)v

スポンサーリンク

SNSボタンの作り方

これはシェア数を取得するボタンではありませんが、ちゃんと記事毎のページのタイトルとURLを取得することができます。

このブログの右上。
スマホからは一番上に設置した自分で作ったSNSボタン。

(引っ越ししたので変わっています)

普通に設置しただけでは、ページ情報は取得できませんし、
ブログ変数に置き換えてexpr:hrefと書くとテンプレートエラーとして怒られてしまいます。

ボタンの作り方を紹介した過去記事はこちら 

 

Blogger用のコードです。

参考にしたソースコードはこちら。 
SNSシェアボタンをjQueryでオリジナルにカスタマイズする方法
WEB制作ブログ
https://www.markernet.co.jp/blog/2015/01/14/post-4363/ 

画像を使う場合は、上記サイトのソースそのままで大丈夫ですが、"'に変更して<a href=''>''の中は空のままで設置したい場所へ記載して下さい。

ただし、本文内へ記載する場合はBloggerでは空リンクを書くと自動で書き換えられてしまうので気を付けて下さい。

WEBフォントで作る場合は↑の過去記事をご覧下さい。

 

シェア用のアプリケーションコードを直前に記載。
(すでに設置してる場合は、このスクリプトは1つだけで構いません)

アプリケーションIDの取得方法を紹介した過去記事はこちら 

HTMLの空リンクに対してjQueryでURLを呼び出します。

↓のコードを</body>直前、さきほどのfacebookのコードの上にでも記載します。(エンコードしてるので、このままコピペできます)

jQuery本体を呼び出すコードをまだ記載してない方は、
直前に↓のコードを記載して下さい。

以上で、どのページでもボタンを押せば記事タイトルとURLを取得できると思います。

HTMLには、
facebook、Twitter、Google+、はてブ

jQueryには、当ブログの右上のように
Google+、facebook、Twitter、はてブ、Pocketを記載してるので設置したいボタンに合わせて調整して下さい。

 増やす時は、必ずクラス名'sns-●●'と書いて
HTMLとjQueryのクラス名を合わせて下さい。

3Dボタンの過去記事では「LINE」ボタンも作ってましたが、私は「LINE」未登録のため、ボタン動作の確認がとれないので設置を断念しました。(^^;)

あとがき

Bloggerでは、「公式ボタン」か「忍者おまとめボタン」「ShareThis」を設置するしか方法がなくて、WordPressサイトの方のページをいつも指を咥えて見てましたが、
やっとオリジナルボタンの設置方法が完成しました。

よく言われる読み込み速度も公式ボタンや忍者と比べると2秒ほど速くなったので本当に良かったです。(^^)

SNSボタンの重さが気になってる方や、BloggerでWebフォントやフラットボタンでソーシャルリンクを設置したいけど出来なかったという方は、このコードをぜひ試してみて下さいね。

最後までご覧いただき ありがとうございました。

この記事が役に立ったと思った方はシェアして頂けると嬉しいです。(^^)

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

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

トップへ戻る