>フリーウェアfreo> freoにいいねボタンとか付けてみる

エントリー

freoにいいねボタンとか付けてみる

記事一覧表示画面でコメントのカウント数が表示されなかったのを修正しました。

freoでのソーシャルボタンの設置。
ツイッター、はてなブックマーク、Google+1、Facebookの4つのボタンが追加されます。
サイトによりレイアウトやCSSが異なるため、適当に変えて合わせてください。

説明では長々と書いてますが、
必要なのはボタンのコードだけなので、
そこだけ抜き出して自分のサイトのテンプレートに貼り付けてください。

以下はボタンを横に並べる配置の一例です。

templates/internals/default/default.html
137行目の<ul class="link">から148行目の</ul>までを削除して以下を挿入。

<div class="transfer">
    <div class="fixedurl">
        <p><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}" title="{$entry.title}の固定URL">この記事のURL</a></p>
        <!--{if $entry.comment != 'closed'}-->
        <p><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#comment" title="{$entry.title}のコメント">コメント({$plugin_comment_counts[$entry.id]})</a></p>
        <!--{/if}-->
        <!--{if $entry.trackback != 'closed'}-->
        <p><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#trackback" title="No.{$entry.id}のトラックバック">トラックバック({$trackbacks|smarty:nodefaults|@count})</a></p>
        <!--{/if}-->
        <!--{if $freo.user.authority == 'root' or $freo.user.id == $entry.user_id}-->
        <p><a href="{$freo.core.http_file}/admin/entry_form?id={$entry.id}"><img src="{$freo.core.http_url}images/icons/edit.png" alt="編集" title="編集" width="16" height="16" /></a></p>
        <!--{/if}-->
    </div>
    <div class="share">
        <ul class="snsb">
        <li><a href="https://twitter.com/share" class="twitter-share-button" data-url="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}" data-text="{$entry.title}" data-lang="ja" data-count="vertical">ツイート</a></li>
        <li><a href="http://b.hatena.ne.jp/entry/{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}" class="hatena-bookmark-button" data-hatena-bookmark-title="{$entry.title}" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
        <li><div class="g-plusone" data-size="tall" data-href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}"></div></li>
        <li><iframe class="facebook" src="//www.facebook.com/plugins/like.php?href={$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}&amp;send=false&amp;layout=box_count&amp;width=0&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowTransparency="true"></iframe></li>
        </ul>
    </div>
</div>

templates/internals/view/default.html
68行目の<ul class="link">から79行目の</ul>までを削除して以下を挿入。

<div class="transfer">
    <div class="fixedurl">
        <p><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}" title="{$entry.title}の固定URL">この記事のURL</a></p>
        <!--{if $entry.comment != 'closed'}-->
        <p><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#comment" title="{$entry.title}のコメント">コメント({$comments|smarty:nodefaults|@count})</a></p>
        <!--{/if}-->
        <!--{if $entry.trackback != 'closed'}-->
        <p><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#trackback" title="No.{$entry.id}のトラックバック">トラックバック({$trackbacks|smarty:nodefaults|@count})</a></p>
        <!--{/if}-->
        <!--{if $freo.user.authority == 'root' or $freo.user.id == $entry.user_id}-->
        <p><a href="{$freo.core.http_file}/admin/entry_form?id={$entry.id}"><img src="{$freo.core.http_url}images/icons/edit.png" alt="編集" title="編集" width="16" height="16" /></a></p>
        <!--{/if}-->
    </div>
    <div class="share">
        <ul class="snsb">
        <li><a href="https://twitter.com/share" class="twitter-share-button" data-url="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}" data-text="{$entry.title}" data-lang="ja" data-count="vertical">ツイート</a></li>
        <li><a href="http://b.hatena.ne.jp/entry/{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}" class="hatena-bookmark-button" data-hatena-bookmark-title="{$entry.title}" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
        <li><div class="g-plusone" data-size="tall" data-href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}"></div></li>
        <li><iframe class="facebook" src="//www.facebook.com/plugins/like.php?href={$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}&amp;send=false&amp;layout=box_count&amp;width=0&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowTransparency="true"></iframe></li>
        </ul>
    </div>
</div>

default.cssに以下を追加

/* いいねボタン
────────────────────────────── */

div.transfer {
    border-top: 1px dotted #d7d7d7;
}
div.fixedurl {
    text-align: right;
    vertical-align: top;
    display: inline-block;
}
div.share {
    display: inline-block;
}
.snsb {
    padding-left: 0;
}
.snsb li {
    float: left;
    margin-right: 4px;
    list-style-type: none;
}
.facebook {
    width:70px !important;
    margin: 0 !important;
}

footer.htmlの</body>直前に以下のコードを挿入

{literal}
<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>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
{/literal}
</body>

ページ移動

コメント

コメント欄への投稿方法や内容につきましては、
記事へのコメント投稿についてを参考にしてみてください

コメント欄の投稿は公開されます。
非公開を希望する内容につきましては、みさきる!管理者へ連絡をお使いください。

comments powered by Disqus

ユーティリティ

スポンサードリンク

検索

カテゴリー

新着記事

    新着コメント

    スポンサードリンク

    つぶやき

    スポンサードリンク