ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

軽いSNSボタンをまとめてブログに設置

カスタマイズ』カテゴリの関連記事

スポンサードリンク

テンプレートの変更を告知していたもののあまりカスタマイズに納得できずに頓挫している状況ですが、今使用しているテンプレートを弄りました。変更箇所は記事の一番下にSNSボタンの追加で以下の様に。

sns20160305.png

このSNSボタンは過去何度も設置⇒削除を繰り返してきました。まとめて標示できるブログパーツ Zenbackも導入した事もあります↓

過去記事参照 ⇒ ソーシャルブックマークボタン追加

過去記事参照 ⇒ FC2ブログにはてブボタンとTwitterボタン追加

過去記事参照 ⇒ ブログパーツ Zenback導入


その都度、削除した理由としては 重い という事。FC2ブログでも設定でTwitterとFacebookはボタンの表示の有無を設定出来るが、それも同様に重くて表示が遅くなるのがどうしても気になって駄目でした。後はデザインに統一感が無かったりしたのも理由です。

それでもアクセスアップに繋がるのを期待して、どうにか設置したかったがやっと納得できるものを発見。参考にしたサイトは以下。リンク先のコードを利用でタイトル通り軽いSNSボタンを設置出来ます。

参照 ⇒ 公式SNSボタンは重い!コピペでできるCSSのSNSボタンで軽くする | Iscle[イズクル]


上記サイトのコードで設置できるSNSボタンは以下

・Twitter
・Facebook
・Google+
・はてなブックマーク
・Pocket
・LINE


設置はリンク先からコードをコピーして貼り付けるだけと簡単。問題はリンク先のコードはWordPress用。WordPress利用の方はそのままコピペでいけますが、私の利用しているのはFC2ブログ。

FC2ブログでもCSSのコードはそのままスタイルシートにコピペで問題無いが、HTMLに記載するコードは以下の箇所をFC2ブログ用に変更する必要があります。

<?php the_permalink(); ?> ⇒ <%topentry_link>
<?php the_title(); ?> ⇒ <%topentry_title>


基本的には上の箇所を変更ですがTwitterは以下の様に変更↓

■元コード
<a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>%20by%20" target="_blank">Twitter</a>

■変更後
<a href="http://twitter.com/home?status=<%topentry_title><%topentry_link>"target="_blank">Twitter</a>


変更したFC2ブログ用のコードは以下。はてブを先頭にしたりと並び替え、変更箇所を赤字で記載。

<div id="share">
<ul>
<!-- はてなブックマーク -->
<li class="share-hatena">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<%topentry_link>&title=<%topentry_title>" target="_blank">はてブ</a>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/home?status=<%topentry_title><%topentry_link>"target="_blank">Twitter</a>
</li>
<!-- Facebook -->
<li class="share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<%topentry_link>" target="_blank">Facebook</a>
</li>
<!-- Google+ -->
<li class="share-google">
<a href="https://plus.google.com/share?url=<%topentry_link>" target="_blank">Google+</a>
</li>
</li>
<!-- Pocket -->
<li class="share-pocket">
<a href="http://getpocket.com/edit?url=<%topentry_link>" target="_blank">Pocket</a>
</li>
<!-- LINE -->
<li class="share-line">
<a href="http://line.me/R/msg/text/?<%topentry_title>%0D%0A<%topentry_link>">LINE</a>
</li>
</ul>
</div>


上のコードをHTLMの設置したい箇所に入れ、スタイルシートは先述の通りリンク先からそのままコピペすると一番最初の画像の様になります。並び替えや不執拗なボタンは変更、削除して下さい。

これで設置完了です。表示スピードは公式のボタンに比べ、全く気にならないのでかなり軽いんじゃないかと思います。デザインも統一感があって良いです。

数字も表示したい人には向かないかもしれないが、元からこのブログはこの手の事が付かないブログなので当分これで行きます。後は根本的な問題はこれを押してもらえるかどうか。

ボタンを設置していなかったとは言え、はてブ含め過去ほとんど付いてない。取りあえず押してもらいやすい環境は作ったので今後に期待。

それにしてもLINEボタンって効果あるのか・・・スマートフォン用の表示ではFC2ブログの設定を利用してLINEボタンを設置しているが全然アクセス無い。まぁこの辺は状況を見て変えていきます。設置位置に関しても同様に。もしかすると過去と同様に何かあれば削除するかもしれませんが。

【更新】

はてなブックマークのコードがトップページに設置した状態だと、はてブへのリンクがトップページにされてしまうので、これをトップページでも個別記事にブックマークされるようにします。

トップページ用


<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard" title="はてブ">
個別記事用
<a href="http://b.hatena.ne.jp/entry/<%url>blog-entry-<%pno>.html" target="_blank">


*追記

その後、私の中ではSNSボタンは必要ないとの結論に達しました。

ブログのSNSボタン不要論:表示回数に見合った効果ナシ

 カスタマイズ

SNSテンプレートカスタマイズFC2ブログブログ

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック