はてなブログのSNS共有ボタンをオリジナル画像に変更する方法
色々虎威では、TwitterやFacebookなどのSNSに共有するボタンをオリジナルの画像にしています。
そういった細工をしている所も結構ありますが、どうやっているのか、というお問い合わせをTwitterにて頂戴いたしましたので、ごく簡単ではありますが解説いたしたいと思います。
挿入先
ダッシュボードの「デザイン」-「カスタマイズ」より「記事」を選択します。
下の方に移動すると「記事上」「記事下」の欄があります。
ここにコードを記入していきます。
(両方でも、いずれか一方でも大丈夫です)
記事を共有するには、共有するページのURLやタイトルが必要になりますが、この入力欄では、はてなブログオリジナルの変数で、記事固有の情報を動的に参照できるので、ここでの指定となります。
もし、既に「記事上」「記事下」に何かのタグやコードを記入している場合は、その上か下に続けて書いてもらえれば大丈夫かと思います。
スポンサーリンク
記入コード
ずばり書いていきます。
<a href="http://twitter.com/intent/tweet?text={Title}&url={Permalink}" target="tweetwin"><img src="画像ファイル名" alt="Twitterでつぶやく" /></a>
他のサイトなどでは、Twitterは、JavaScriptのwindow.openで別ウィンドウ起動するサンプルが多かったですが、FirefoxやChromeなど、一部のブラウザで画面が2個起動するなどの現象があったため、虎ちゃんはtarget指定にしています。これでも、別ウィンドウ(タブ)ではなく、ポップアップで起動されるようになっています。
<a href="https://www.facebook.com/sharer/sharer.php?u={Permalink}" onclick="window.open(this.href,'window','width=550,height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"><img src="画像ファイル名" alt="Facebookで共有する"></a>
Google+
<a href="https://plus.google.com/share?url={Permalink}" onclick="javascript:window.open(this.href,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="画像ファイル名" alt="Google+で共有する" /></a>
はてなブックマーク
<a href="http://b.hatena.ne.jp/add?mode=confirm&url={Permalink}&title={Title}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img class="sns_button_effect" src="画像ファイル名" alt="はてなでブックマーク" /></a>
ボタン画像
上記コードに記入する画像ファイル名ですが、ボタンの画像は自分でアップロードして、そのURLを指定する必要があります。
虎ちゃんは、コチラのサイトで作成しました。
ボタン画像サイズですが、色々虎威では 150px × 50pxにしていますが、ブログのデザインによっては、ボタンが変なところで折り返されるかもしれません。
その場合は、ボタンの横幅を調整するか、CSSで配置を調整するなどしてください。
エフェクト
ボタンにマウスカーソルを載せると、斜めになるようにしています。
これはちょっとしたCSSのエフェクト効果を指定しているだけです。
参考までに、当ブログのCSSを掲載しておきますね。
ご参考まで。
.sns_button_effect {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.sns_button_effect:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.sns_button img {
float: left;
margin-right: 1px;
margin-bottom: 1px;
}
これらを適用するために、
<div class="sns_button">
<!-- 記入コード欄で記載したコード-->
</div>
とし、各画像ファイル名に「class="sns_button_effect"」を付加してあげてください。
例:
<a href="http://twitter.com/intent/tweet?text={Title}&url={Permalink}" target="tweetwin"><img class="sns_button_effect" src="画像ファイル名" alt="Twitterでつぶやく" /></a>
最後に
はてなブログオリジナルの共有ボタンを無効化、そして「変更を保存する」をお忘れなく。
まとめ
Pocketなどははてなブログオリジナルのものを使っていますが、保存用のURLを指定すればオリジナルボタン化する事はできると思います。
その他のSNSもしかり。
少しオリジナル色を出す事で、記事を閲覧した人がついついボタンを押したくなっちゃう、そんな効果が少しでも出ればうれしいですね。
追記
4/14 はてなブックマークのコードを修正しました。
スポンサーリンク