ヒント：twitter連携

※お客様が既に twitter のアカウントを取得していることが前提となります。

ウィジェットの登録方法

  1. twitterのウィジェット作成画面へアクセスし、ウィジェット(貼り付け用HTMLコード)を生成します。https://twitter.com/about/resources/widgets
    【図】twitterウィジェット作成画面
    • ユーザー名…ご利用のtwitterアカウント名
    • 高さ…300 程度
    • ドメイン…ECサイトのドメインを記入 例)talos-net.com
    色などのデザインも、この画面で変更します。
  2. 生成されたHTMLソースをコピーして、「メモ帳」等でテキストデータとして保存しておきます。
    「このコードをコピーして、あなたのwebサイトのHTMLに貼り付けてください。」と書かれた欄です。
    【図】twitterウィジェット作成画面
  3. EC管理画面の、「デザイン管理」＞「ブロック編集」画面にて、
    「CSSフリー広告01」または「CSSフリー広告02」と書かれた青リンクをクリックします。
    ※未使用のブロックを選択してください。
  4. 「CSSフリー広告01」または「CSSフリー広告02」の「ブロック編集」画面で、
    • ブロック名…CSSフリー広告01 (または CSSフリー広告02)
    • ファイル名…advfree01 (または advfree02)
    と記載されていることを確認します。
  5. ②で取得したHTMLコードを、<div id="advfree01"> と </div> の間に貼り付けてください。 <!--{* フリー広告01 *}-->
    <div id="advfree01">
    ↑↑↑↑↑
    この間にHTMLコードを貼り付けてください。
    ↓↓↓↓↓
    </div>     ※CSSフリー広告02の場合は <div id="advfree02"> となります。
    HTMLコードの貼り付けが完了したら【登録】ボタンを押します。
  6. 「登録しても宜しいですか」との問いに、内容に問題が無ければ【OK】ボタンを押します。
  7. 「登録が完了しました。」と表示されたら、登録完了です。
  8. EC管理画面の、「デザイン管理」→「レイアウト設定」画面にて、
    「未使用ブロック」欄に配置されている「CSSフリー広告01」と書かれた水色の四角を「レイアウト編集」欄のいずれか(左右のどちらかが望ましい)へドラッグして【保存】ボタンを押します。
  9. 「登録しても宜しいですか」との問いに、内容に問題が無ければ【OK】ボタンを押します。
  10. その後「登録が完了しました。」と表示されたら、登録完了です。
  11. 画面上部の【SITE CHECK】ボタンを押して、実際の表示内容をご確認ください。

ウィジェットの貼り付け例 (弊社twitterアカウント @css_co_jp の場合)

<!--{* フリー広告01 *}-->
<div id="advfree01">
<a class="twitter-timeline" href="https://twitter.com/css_co_jp" data-widget-id="275857332578172928">@css_co_jp からのツイート</a>
<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>
</div>
 貼り付けると以下のように表示されます。
↓↓↓

【ご注意】

生成されるHTMLコードの data-widget-id= に続く数字の文字列は、お客様のtwitterアカウント毎に変わります。このマニュアルで紹介している 275857332578172928 は弊社以外にはお使いいただけません。