色々虎威 ゆるり

~IRO IRO TRY~

はてなブログのSNS共有ボタンをオリジナル画像に変更する方法

色々虎威では、TwitterやFacebookなどのSNSに共有するボタンをオリジナルの画像にしています。
そういった細工をしている所も結構ありますが、どうやっているのか、というお問い合わせをTwitterにて頂戴いたしましたので、ごく簡単ではありますが解説いたしたいと思います。

SNS

挿入先

ダッシュボードの「デザイン」-「カスタマイズ」より「記事」を選択します。

設定

下の方に移動すると「記事上」「記事下」の欄があります。
ここにコードを記入していきます。
(両方でも、いずれか一方でも大丈夫です)

設定

記事を共有するには、共有するページのURLやタイトルが必要になりますが、この入力欄では、はてなブログオリジナルの変数で、記事固有の情報を動的に参照できるので、ここでの指定となります。
もし、既に「記事上」「記事下」に何かのタグやコードを記入している場合は、その上か下に続けて書いてもらえれば大丈夫かと思います。

スポンサーリンク
 

記入コード

ずばり書いていきます。

Twitter

<a href="http://twitter.com/intent/tweet?text={Title}&amp;url={Permalink}" target="tweetwin"><img src="画像ファイル名" alt="Twitterでつぶやく" /></a>

他のサイトなどでは、Twitterは、JavaScriptのwindow.openで別ウィンドウ起動するサンプルが多かったですが、FirefoxやChromeなど、一部のブラウザで画面が2個起動するなどの現象があったため、虎ちゃんはtarget指定にしています。これでも、別ウィンドウ(タブ)ではなく、ポップアップで起動されるようになっています。

Facebook

<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}&amp;url={Permalink}" target="tweetwin"><img class="sns_button_effect" src="画像ファイル名" alt="Twitterでつぶやく" /></a>

最後に

はてなブログオリジナルの共有ボタンを無効化、そして「変更を保存する」をお忘れなく。

設定

まとめ

Pocketなどははてなブログオリジナルのものを使っていますが、保存用のURLを指定すればオリジナルボタン化する事はできると思います。
その他のSNSもしかり。

少しオリジナル色を出す事で、記事を閲覧した人がついついボタンを押したくなっちゃう、そんな効果が少しでも出ればうれしいですね。

追記

4/14 はてなブックマークのコードを修正しました。

スポンサーリンク