1. ホーム > 
  2.  ブログ

いいね！などのSNSボタンをオリジナルに変更しました

2014/12/25 - ブログ

こんにちは！neccoです！

ブログ記事ページに表示しているSNSへのシェアボタン。今までは公式サイトのシェアボタンを使っていましたが、いろいろと考えた結果、公式ボタンを辞めてオリジナルのリンクボタンに変更しました。

▼変更前（公式シェアボタン）
official-share-button_1

▼変更後（オリジナルリンクボタン）
official-share-button_2

リンクボタンのソースコードはWebクリエイターズボックスさんの記事を参考にさせて頂きました。
今回はLINEのシェアボタンとfeedlyのフォローボタンも追加して設置しましたので、それらのソースコードも合わせてご紹介します。

ご紹介するソースコードは、WordPressのテンプレートファイルに記述する事を前提にしたソースコードです。
普通のHTMLファイルに記述する場合は<?php the_permalink(); ?>の部分をページのURLに変更して、<?php the_title(); ?>の部分をページのタイトルに変更してください。

参考：Webクリエイターボックスを（プチ）リニューアルしました | Webクリエイターボックス

LINEのシェアボタン

?
1
2
3
4
<!--LINE-->
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">
<img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" />
</a>

LINEのシェアボタンのソースコードは、公式ページで紹介されています。
参考：設置方法｜LINEで送るボタン

feedlyのフォローボタン

?
1
2
3
4
<!--feedly-->
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F[ ブログFeedのURL ]'  target='blank'>
<img src='[ボタン画像のURL]' alt='follow us in feedly' width='[ ボタン幅 ]' height='[ ボタン高さ ]'>
</a>

feedlyのフォローボタンも公式ページで紹介されています。
参考：feedly. your news. delivered.

以下のシェアボタンは、Webクリエイターボックスさんからの引用です。

facebookのシェアボタン

?
1
2
3
4
<!--facebook-->
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>">
<img src='[ボタン画像のURL]' alt='いいね！' width='[ ボタン幅 ]' height='[ ボタン高さ ]'>
</a>

Twitterのシェアボタン

?
1
2
3
4
<!--Twitter-->
<a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>">
<img src='[ボタン画像のURL]' alt='ツイート' width='[ ボタン幅 ]' height='[ ボタン高さ ]'>
</a>

はてなブックマークのシェアボタン

?
1
2
3
4
<!--はてなブックマーク-->
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>">
<img src='[ボタン画像のURL]' alt='ブックマークする' width='[ ボタン幅 ]' height='[ ボタン高さ ]'>
</a>

Google+のシェアボタン

?
1
2
3
4
<!--Google+-->
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>">
<img src='[ボタン画像のURL]' alt='シェアする' width='[ ボタン幅 ]' height='[ ボタン高さ ]'>
</a>

どうして公式シェアボタンをやめたのか？

単純にページの読み込み速度の問題です。スマホに最適化されたコンテンツを考えてみるでも書きましたが、これからはスマホで読まれる事を徹底して意識しないといけないと思っています。

特に私はあまり回線速度が速くないPandAを使っていますので、できるだけスマホでアクセスした時のページの読み込み速度を落としたくないと思って、公式シェアボタンをやめました。

とはいっても、オリジナルでボタンを作成しなくてはいけないので、それなりに手間もかかりますし、各SNSが仕様を変えたら修正しなくてはいけませんので、誰にでもおススメできるものではありません。

でもページが全部読み込まれるまでの時間は短くなったと思いますので、今のところは満足しています。
ではまた！

この記事を読んで頂いた方におススメの関連記事
オリジナルSNSボタンにシェア数を表示するようにしました
ブログ記事に表示するSNSボタン。オリジナルのボタンに変えてページの表示速度が速くなりましたので、公式ボタンのようにシェアされた数の表示にもチャレンジしてみました。WordPress用のプラグインもあるので、お好みの方法で。
No tags for this post.
necco

ガジェットやブログ運営、旅行・お出かけ記などのブログtakerootを運営中。珍しいものを好んで選ぶマイノリティな男です。Webサイト制作とか広告といった仕事をしています。

人気の記事をピックアップ

コメント

コメントを書く

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

▲