スマホとPC両対応のホームページ作成、ご予約フォームの作成、
メルマガ配信、顧客管理機能までがまるっと一つになったリウムスマイル!

電話番号:06-6484-5445

営業時間:平日 9:00〜17:30

  1. Twitterタイムラインウィジェットをリウムスマイル!のホームページに貼りつける方法

Twitterタイムラインウィジェットをリウムスマイル!のホームページに貼りつける方法

2011/11/28
2012/9月より、ウィジェットの仕様が新しく変わったようです。
リウムスマイル!ホームページに新ツイッターウィジェットを表示する方法」を参考にご覧ください。

 

Twitterタイムラインウィジェットとは、Twitter上で呟いた言葉がリアルタイムでホームページにも表示されるという連動機能です。

つまりお客様がTwitterのページにわざわざ移動しなくても、下の画像のようにお店のホームページから手軽に見れるという事です。

 

ながれ

1.Twitterのタイムラインウィジェットを張り付けるページを新しく作る

2.Twitterでタイムラインウィジェットを作成しHTMLをコピーする

3.フリーページにHTMLを貼りつける

4.表示を調整する

 

 

1.Twitterのタイムラインウィジェットを張り付けるページを新しく作る

 フリーページの作成

「メイン」−「ホームページ」ー「ホームページパーツ一覧」

「フリーページ」の横の「フリーページの子パーツを追加」ボタンをクリックして、新しいフリーページを作成します。

 

タイトルに“○○代表のTwitter”など表示させたいTwitterタイムラインの内容がわかるような名前を記入します。

 

2.Twitterでタイムラインウィジェットを作成しHTMLをコピーする

Twitterにログインする

いつも通りにログインしてください

1.ログイン後Twitterページの右上にあるアカウント名の横の「▼」をクリックします

2.表示された一段目の「設定」をクリックします

 

1.設定画面が表示されたら、「プロフィール」タブをクリックします

2. 「ウェブ」の入力欄の下の (ここからツイッターをサイトに追加することもできます) リンクをクリックします

 

タイムラインウィジェットの作成

左下のウィジェットの画像をクリックします。

 

1.左横の「自分のサイト」をクリックします

2.表示された一段目の「プロフィールウィジェット」をクリックします

 

1.「サイズ」をクリックします

2.「横幅の自動調整」のチェックボックスにチェックを入れてください。あとは、サイズやデザインなどを好みに調整してください

3.最後に「完了&コード取得」をクリックします

 

コードを表示した領域が表示されるので、右クリックで全てのコードを選択してコピーしてください。

 

3.フリーページにHTMLを貼りつける

フリーページへの貼りつけ

リウムスマイル!に戻って、先ほどのフリーページの「本文」の 「上級者向けツールバーへの切り替え」(右から二番目 スパナのボタン)ボタンを押します。

 

上級者向けツールバーが表示されたら 「HTMLソース編集」(2段目 右から3つめ HTMLと書いたボタン)をクリックします。

 

1.「HTMLソースエディタ」が表示されるので、先ほどTwitterサイトでコピーしたウィジェットのコードを貼り付けます

2.「更新」をクリックします。これで、リウムスマイル!のホームページにTwitterのウィジェットが張り付きました

 

2011/12/01現在

このツイッターのウィジェットを使うと、IE7以前で正しく表示されない場合があるようです。

その場合、貼り付けるコードの1行目に、次の

charset="utf-8"

という文字列を挿入すると、改善される場合がございます。お試しください。

 

[元]

<p><script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script><script type="text/javascript">// <![CDATA[

↓↓

[修正後]

<p><script charset="utf-8" type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script><script type="text/javascript">// <![CDATA[

 

 

 

4.表示を調整する

管理画面右上の「PCサイト プレビュー」をクリックして、プレビュー画面を開きます。

今回作成したフリーページは、サイド部分にタイトルが表示されていると思います。

 

タイトルが表示されているサイド部分(マウスを持って行くと赤い枠線で囲まれる領域)の一番上の「表示項目の編集」をクリックします。

 

「トップページのレイアウト設定[PC]」が開くので (C)の項目で、追加したフリーページ名をクリックします。

 

1.「”ページ名”の表示設定 」で 「表示要素」の ”タイトル”のチェックを外します。

2. ”本文”のチェックを入れます

3. 「閉じる」ボタンを押します。次に出てくる「トップページ以外のエリア6のレイアウトも同様に設定しますか?」に”はい”を押します。

 

 

これでTwitterのウィジェットが上記のようにホームページ上で表示されます!