1. ホーム > 
2.  ブログ

• facebook
• Twitter
• はてブ
• Google+
• feedly

こんにちは！neccoです！

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

▼変更前（公式シェアボタン）

▼変更後（オリジナルリンクボタン）

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

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

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

LINEのシェアボタン

<!--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のフォローボタン

<!--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のシェアボタン

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

Twitterのシェアボタン

<!--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>

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

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

Google+のシェアボタン

<!--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.

• 0
• 0
• 1
• 0

• facebook
• Twitter
• はてブ
• Google+
• feedly

• 前の記事

  スマホに最適化されたコンテンツを考えてみる

• 次の記事

  本を読む時間はどうやって作る？

コメント