Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@roothybrid7(Satoshi Ohki)

Tumblrにはてブ、Twitter、facebookボタンを設置

Last updated at Posted at 2012-09-04

Tumblrにfacebookのlikeボタンやらtwitterボタンやらはてブボタンをつける方法から、ほぼコピペ

##テーマ

Tumblrのテーマは、Effectorをベースにしている。

##Facebook OGP関連

###HTML宣言差し替え

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en">

###OGP関連タグの追加
<head>の適当なところへ追加

meta.html
<!-- START For Facebook Open Graph -->
{block:PostSummary}
<meta property="og:title" content="{PostSummary} - {Name}" />
{/block:PostSummary}
<meta property="og:url" content="{Permalink}" />
<meta property="og:type" content="article" />
{block:Posts}
{block:Photo}<meta property="og:image" content="{PhotoURL-250}" />    {/block:Photo}
{block:Text}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Text}
{block:Photoset}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Photoset}
{block:Quote}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Quote}
{block:Link}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Link}
{block:Chat}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Chat}
{block:Audio}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Audio}
{block:Video}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Video}
{block:Answer}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Answer}
{/block:Posts}
<meta property="og:description" content="{MetaDescription}" />
<!-- For Facebook Open Graph END -->

##スクリプト設置

<body>のすぐ下にスクリプトを追加(facebook sdk)

facebookSDK.js
<!-- facebook sdk -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<-- Footer Scripts --> あたりにスクリプトを追加(はてブ、Twitter)

script.js
<!-- Hatebu button -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!-- Twitter button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

##ボタン設置
投稿エリアの一番下に設置するなら一つで問題ない。投稿タイトルあたりに設置する場合は、Tumblr投稿種別ごとになる。

###ボタン属性の修正
####はてブ

  1. http://b.hatena.jp/entry/の後を{Permalink}に差し替える。
    • 元記事は、{Permalink}のみにしているがそれだとボタンのカウントがアップしなかったので、http://b.hatena.jp/entry/も残している。
  2. data-hatena-bookmark-titleをカスタマイズ
    • ブログタイトル - 投稿タイトルに修正
hatebu.html
<!-- はてなブックマーク -->
<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

####Twitter

data-urlを{permalink}に、data-textを{Title}にする。

twitter.js
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="{permalink}" data-text="{Title}">ツイート</a>

####Facebook

data-hrefのhrefを{permalink}に変える。表示領域を小さくするため、data-widthは"150"に、layoutはbutton_count(数字表示)に、show_facesはfalseへ変える。

facebook.js
<div class="fb-like" data-href="{permalink}" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>

###タイトル下と投稿エリア一番下の2つに設置する場合の例

####タイトル下

テキスト投稿の場合は、投稿エリア上部にタイトルが存在するので、タイトル下当たりにボタンを設置する。他の投稿はタイトルが明確にない場合があるためお好みで追加。ここではテキスト投稿のみ追加

テキスト投稿の場合、{block:Text}の中の{/block:Title}と{Body}の間に追加

topbuttons.html
{block:IfShowShareButtonsInTop}
<div class="share-box-top">
<!-- はてなブックマーク -->
<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="{permalink}" data-text="{Title}">ツイート</a>
<!-- Facebook like -->
<div class="fb-like" data-href="{permalink}" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
{/block:IfShowShareButtonsInTop}

####投稿エリア一番下

ここは共通なので、ボタンを設置すれば、すべての種別の投稿に反映される。もともとあったshareボタン領域をコメントアウトし、{/block:Data}の上当たりに追加する。

元のをコメントアウト

deleteOriginalShare.html
    <li class="permalink"><a href="{Permalink}"><span class="icon"></span>{lang:Permalink}</a></li>
                <!--
    <li class="share">
      <a class="share-btn" href="{ShortURL}" data-permalink="{Permalink}">Share</a>
      <div class="share-box">
        <div class="share-box-inside clearfix">
          <input class="shortlink" type="text" readonly="" value="{ShortURL}">
            <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
          <div class="plusone-btn"><div class="g-plusone"  data-size="medium" data-count="true" data-href="{Permalink}"></div></div>
          <a href="http://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-text="" data-count="none" data-via="{block:Twitter}{TwitterUsername}{/block:Twitter}">Tweet</a>
          <div class="like-button"></div>
        </div><!-- /.share-box-inside --/>
      </div><!-- /.share-box --/>
    </li><!-- /.share -->
  </ul><!--/.meta-list -->
</div><!-- /.meta -->

新しいボタンを追加

AddShareInBottom.html
</div><!-- /.meta -->
{block:IfShowShareButtonsInBottom}
<div class="share-box-bottom">
<!-- はてなブックマーク -->
<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="{permalink}" data-text="{Title}">ツイート</a>
<div class="fb-like" data-href="{permalink}" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
{/block:IfShowShareButtonsInBottom}
{/block:Date}

共有ボタン領域表示用変数追加

if:Show Share Buttons In Topとif:Show Share Buttons In Bottomという名前の変数を共有ボタン領域の表示/非表示の切り替えのために追加する。デフォルト値を"1"(有効)にする。

flagMeta.html
<meta name="if:Show Share buttons In Bottom" content="1" />
<meta name="if:Show Share buttons In Top" content="1" />

保存して、ブラウザタブをリロードすると追加変数のチェックボックスが設定項目に表れる。無効にする場合は、チェックボックスを外す。

  • {block:IfShowShareButtonsInTop}で、タイトル下に設置したボタンを囲む
  • {block:IfShowShareButtonsInBottom}で、投稿エリア一番下に設置したボタンを囲む
shareButtons.html
{block:IfShowShareButtonsInTop}
<div class="share-box-top">
<!-- はてなブックマーク -->
<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="{permalink}" data-text="{Title}">ツイート</a>
<!-- facebook like -->
<div class="fb-like" data-href="{permalink}" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
{/block:IfShowShareButtonsInTop}

##カスタムCSS

###ボタン高さをそろえる

facebookボタンとそれ以外のボタンで水平方向の位置が違うので、そろえる

vertical.css
/* 共有ボタン整列 */
.share-box-top .hatena-bookmark-button-frame,
.share-box-top .twitter-share-button,
.share-box-top .fb-like { vertical-align: bottom; }
.share-box-bottom .hatena-bookmark-button-frame,
.share-box-bottom .twitter-share-button,
.share-box-bottom .fb-like { vertical-align: top; }

投稿エリア一番下の位置を調整

shareInBottom.css
/* shareボタン調整 */
.share-box-bottom { margin: 5px 25px 25px; }
11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?