Web制作にはbingo!CMS

Web制作者のための簡単ホームページ制作ツール

FAQ - 機能仕様・概要について

サイトに「いいね!」「ツイートする」などのボタンを表示したい

Facebookの「いいね!」やTwitterの「ツイートする」等のボタンは、bingo!CMSのスキン内に記述する方法で実現できます。 (JavaScriptユニットを配置して該当のボタンを配置した場合、配置したページのURLが正確に取得できないため、正常に動作しません)
【注意】
スキンのカスタマイズについては無償サポート対象外となります。
掲載している内容について、動作についての保証はいたしかねます。
カスタマイズを行う際は、バックアップを取り、実際の動作をご確認いただいた上で実装していただくようお願いいたします。

スキンを構成するファイルのうち、カスタマイズするファイルは「index.tpl」です。管理画面からインストールした場合、スキンの「index.tpl」は、サーバー内の以下のディレクトリに存在します。
(bingo!CMSインストールディレクトリ)/usr-data/template/(該当スキン)/index.tpl

スキンを構成するファイルについての情報はこちらのページで提供されているスキン制作用ドキュメントを参照してください。

カスタマイズは実際にアップロードされているスキンのファイルに対して直接行う方法と、カスタマイズしたスキン一式をzipファイルとして圧縮し、管理画面よりアップロードする方法があります。
お使いのサーバーによっては、権限の関係でアップロードされているスキンのカスタマイズができない場合があります。

このページ上部にある3つのボタンの実装方法

【表示エリアのCSS定義】<head>タグ内に記述を追加しています。
{$ANALYTICS}
{* ここから *}
{literal}
<style type="text/css">
#soacial1 { width: 100%; padding: 6px 0 3px 0; }
#soacial1 span.btn { float: right; margin: 0 0 0 9px; }
#soacial1 span.fsbtn { float: right; height: 22px; margin: 0 0 0 9px; }
#soacial1 span a img { border: 0; }
</style>
{/literal}
{* ここまで *}
</head>
【実際に表示する箇所】<div id="user-area">の下に以下のソースを追加しています。

<div id="user-area">
{literal}
---以下を追記--
<div id="soacial1">
<span class="fsbtn">
<iframe src="http://www.facebook.com/plugins/like.php?href={/literal}{$BINGOTOPURL|escape:'url'}{php}echo $_SERVER['REQUEST_URI'];{/php}{literal}&amp;layout=button_count&amp;show_faces=false&amp;width=108&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:108px; height:21px;" allowTransparency="true"></iframe>
</span>
<span class="btn">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="◯◯◯◯(ここにはtwitterアカウント名を入力ください。)" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>
<span class="btn">
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'{/literal}{$PAGE_TITLETAG|escape}{literal}'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>
</span>
<br style="clear:both" />
</div>
{/literal}

---追記ここまで--

{$items}</div>

※SSLページには表示できません。SSLページと通常ページで共通のスキンを使用している場合は、SSLページ用とは別にカスタマイズしたスキンを通常ページに適用してください。
※「{* *}」に囲まれた部分は、コメントとして扱われるためHTMLソースには反映しません。
bingo!Express ただいまリリース準備中です。
bingo!CMSデザイナーズガイド

ページのトップ

シフトテック株式会社 〒250-0045 神奈川県小田原市城山1-3-20 3F 0465-31-1023

Copyright © 2011 Shift Tech inc., japan All Rights Reserved.