Webデザインやガジェット、格安SIMの情報ブログ

WEB制作

SNSボタンをオリジナルデザインにする方法

  • ライター：

Cleator Clipでも採用しているSNSボタンをテキストリンクで設置する方法をご紹介します。

※本ページは広告・アフィリエイトプログラムにより収益を得ています。

スポンサーリンク
目次で流し読みする ･*･:≡(　ε:)
  1. 1.普通に設置する場合
    1. 1-1.Twitter ツイートボタン
    2. 1-2.Facebook シェアボタン
    3. 1-3.Google+ +1ボタン
    4. 1-4.はてなブックマーク
    5. 1-5.Pocketボタン
    6. 1-6.Feedly Followボタン
  2. 2.WordPressで設置する場合
    1. 2-1.Twitter ツイートボタン
    2. 2-2.Facebook シェアボタン
    3. 2-3.Google+ +1ボタン
    4. 2-4.はてなブックマーク
    5. 2-5.Pocketボタン
  3. 3.SNSボタンをフラットデザインにする。
  4. 4.参考記事

普通に設置する場合

普通のテキストリンクとして設置する場合には以下のコードを使用します。CSSは適宜調整して下さい。

※FacebookやGoogle+はogp設定をしていないと正しくシェアできません。opg設定については下記参考サイトが分かりやすいです。

facebook いいねボタン設置時のOGP設定方法♪ ｜ フリーランスWebデザイナーの仕事

Twitter ツイートボタン


<a href="http://twitter.com/share?url=共有したいＵＲＬ&text=ツイート内に含める文字&via=ツイート内に含まれるユーザー名&related=関連アカウント">ツイート</a>

Facebook シェアボタン


<a href="http://www.facebook.com/share.php?u=共有したいＵＲＬ" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">シェア</a>

Google+ +1ボタン


<a href="https://plus.google.com/share?url=共有したいＵＲＬ" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Google Plus</a>

はてなブックマーク


<a href="http://b.hatena.ne.jp/add?mode=confirm&url=ページＵＲＬ&title=ページタイトル">はてブ</a>

Pocketボタン


<a href="http://getpocket.com/edit?url=共有したいＵＲＬ&title=ページタイトル" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>

Feedly Followボタン


<a href='http://cloud.feedly.com/#subscription%2Ffeed%2FページのＵＲＬ'  target='blank'>Follow on Feedly</a>

Feedlyボタンは以下の公式のFollowボタンを作成後、<img id="feedlyFollow"
>～を削除してテキストに変更しただけです。

feedly. your news. delivered.

WordPressで設置する場合

WordPressで設置する場合は以下のように設定します。

Twitter ツイートボタン


<a class="button-twitter" href="http://twitter.com/intent/tweet?text=<?php echo trim(wp_title( '', false); ?>&nbsp;|&nbsp;&amp;url=<?php echo get_permalink() ?>" onclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank">ツイート</a>

Facebook シェアボタン


<a href="http://www.facebook.com/share.php?u=<?php echo trim(wp_title( '', false); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">シェア</a>

Google+ +1ボタン


<a href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>'+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();">+1</a>

はてなブックマーク


<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink() ?>&title=<?php echo trim(wp_title( '', false); ?>" target="_blank">はてブ</a>

Pocketボタン


<a href="http://getpocket.com/edit?url=<?php echo home_url(); ?>&title=<?php bloginfo('name'); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>

SNSボタンをフラットデザインにする。

私のブログで使用しているSNSボタンはアイコンフォントとCSS3を使ってリンクテキストをボタン風にしています。


<div id="share">
<ul class="clearfix">
<li class="twitter"><a class="button-twitter" href="http://twitter.com/intent/tweet?text=<?php echo trim(wp_title( '', false); ?>&nbsp;|&nbsp;&amp;url=<?php echo get_permalink() ?>" onclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank"><i class="fontawesome-twitter"></i>ツイート</a></li>
<li class="facebook"><a href="http://www.facebook.com/share.php?u=<?php echo trim(wp_title( '', false); ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"><i class="fontawesome-facebook"></i>シェア</a></li>
<li class="googleplus"><a href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>'+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();"><i class="fontawesome-google-plus"></i>+1</a></li>
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo home_url(); ?>&title=<?php bloginfo('name'); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="zocial-pocket"></i>Pocket</a></li>
<li class="rss"><a href="ブログURL"><i class="fontawesome-rss
"></i>RSS</a></li>
<li class="feedly"><a href="http://cloud.feedly.com/#subscription%2Ffeed%2FRSSのURL"  target="blank"><img src="http://s3.feedly.com/img/follows/feedly-follow-logo-white_2x.png" alt="follow us in feedly" width="20" height="20">feedly</a></li>
<li class="hatebu">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink() ?>&title=<?php echo trim(wp_title( '', false); ?>" target="_blank">はてブ</a>
</ul>
</div><!-- / #share -->


/* アイコンフォント読み込み */
@import url(http://weloveiconfonts.com/api/?family=fontawesome|zocial);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

/* シェア */
#share ul {
	margin:0 auto;
}
#share li {
	float:left;
	width:12.5%;
	margin:0 2% 2% 0;
}
#share li a {
	position:relative;
	display:block;
	padding:1em 0;
	color:#fff;
	font-size:88%;
	border-radius:3px;
	text-align:center;
	line-height: 22px;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
#share li a:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}

/* ツイッター */
#share .twitter a {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
#share .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
#share .facebook a {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
#share .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
#share .googleplus a {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
#share .googleplus a:hover {
	background:#ad3a2d;
}

/* Pocket */
#share .pocket a {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
#share .pocket a:hover {
	background:#c0392b;
}

/* はてぶ */
#share .hatebu {
	margin-right:0;
}
#share .hatebu a {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
#share .hatebu a:hover {
	background:#43638b;
}

/* RSS */
#share .rss a {
	background:#e09900;
	box-shadow:0 5px 0 #ee802f;
}
#share .rss a:hover {
	background:#ee802f;
}

/* Feedly */
#share .feedly a {
	background:#87c040;
	box-shadow:0 5px 0 #74a436;
}
#share .feedly a:hover {
	background:#74a436;
}
#share li a i,
#share .feedly img {
	width:20px;
	height:20px;
	margin-right:5px;
	vettical-align:top;
}

/* clearfix */
.clearfix:after,
.fixed:after  {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix, .fixed {
	min-height: 1px;
}

* html .clearfix,
* html .fixed {
	height: 1px;
	/*Â¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* スマホ向け */
@media screen and (max-width: 479px) {
#share li {
	float:left;
	width:22%;
	margin:0 4% 5% 0;
}
#share li:nth-child(4n) {
	margin-right:0;
}
/* スマホ向けここまで */ }

参考記事

新ツイートボタンの設置＆カスタマイズ方法まとめ | アイデアハッカー

【小窓編】SNSボタン設置方法マトメ facebook, Pin it (Pinterest), twitter, Googleプラス, Mixiチェック | Stronghold

はてブの「ブックマーク」ボタンをオリジナルデザインに変更する | indigonote

【SNSボタン】シェアボタンをオリジナルの画像にしたら超絶かっこよくなった件について【作り方】 | AppleMania 〜あぷまに〜

Tag:

トップページから他の記事を探す

“SNSボタンをオリジナルデザインにする方法” への6件のフィードバック

  1. Ai Nemoto より:
    2014/09/01 14:13

    恐れ入ります。

    Google +1ボタンを画像に変更した場合、
    「コメント」と「共有」は出てくるのですが、

    「～として一般公開でおすすめしました。」

    となってくれません。
    何か方法はありますでしょうか?

    また、「シェア」でなく、「いいね」ボタンを画像にすると、出てくるポップアップが
    デザイン性のかけらも感じられない物がでてしまうのですが、
    「シェア」ボタンと同じようなポップアップを出すことは不可能でしょうか?

    何卒、よろしくお願いいたします。

    返信
  2. tokumewi より:
    2014/09/01 18:12

    コメントありがとうございます！

    Google +1ボタンについてですが、私自身がGoogle+をやっていないため詳細はよくわかりません。

    お力添え出来ず申し訳ございません。

    いいねボタンのポップアップというのは添付した画像のようなものでしょうか。

    返信
  3. ANemo より:
    2014/09/01 22:28

    ご返信、有難うございます！！

    いいねぼたんのポップアップが、先程添付いただいた画像のようにならず、

    今回添付した感じにになってしまいます。
    誠に勝手なお願いで恐縮なのですが、
    もし、対処法をご存知でしたら、教えていただけると助かります。

    返信
  4. tokumewi より:
    2014/09/02 09:09

    ポップアップの画像確認しました。
    もしかしたらOGP設定が正しくされていない可能性がございます。
    以下のページを参考にして設置していただくと、記事のサムネイルやタイトルなどが反映されるかと思われます。
    http://millkeyweb.com/facebook-ogp/

    返信
    • ANemo より:
      2014/09/02 09:43

      ご返答いただき、有難うございます！

      OGP設定行い、既存のボタンクリックした場合は、添付画像のように表示されるのですが、オリジナルボタンにするとダメなんです・・・＞＜

      ここ数日、いろんな方のサイト訪れては、オリジナルボタンをクリックさせていただいてるのですが、「シェア」をオリジナルにしてる方はいても、「いいね！」をやってる方がいないので、もしかしたらダメなのかもしれないですね・・・＞＜

      引き続き、しつこく調べて、もし解決方法見つかったら、コメント入れさせていただきます～＾＾

      有難うございました！

      返信
      • tokumewi より:
        2014/09/02 13:41

        ポップアップされたときにOGPの設定が引き継がれてないかもしれないですね…。
        お力添え出来ず申し訳ございません。こちらでも今後調べてみて解決しそうであれば記事にしてご紹介しますね。
        今後ともCreator Clipをよろしくお願いいたします。

        返信

コメントを残す

Related Post - 関連記事

Creator Clipは美味しいモンブランや炊き込みご飯について書くブログ「栗エイター栗ップ」になりました。

【CSS】様々な要素を中央揃えにする方法

【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順

画像を最適化して表示を高速化するWordPressプラグイン「EWWW Image Optimizer」

CSS3とjQueryを使ったスマホサイト作成テクニック

Twitter公式に追加されたモーメントのリンクを消す方法

WEBサイトにプッシュ通知が付けられるWEBサービス「bpush」を試してみる

HTMLとCSSのみでiOS7を作る
電光掲示板

CSS3で電光掲示板風のスクロールを再現する

未経験からWEB業界に！職業訓練について考える
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。