Posts Tagged ‘ウィジェット’

Twitter埋め込みタイムライン(ウィジェット)カスタマイズ方法

2013-09-25

埋め込みタイムラインの詳しいカスタマイズ方法をご紹介します。コードの作成方法については過去の記事をご覧ください。

Twitterの旧公式ウィジェットから新公式ウィジェットへ設置し直す方法

「埋め込みタイムライン」はTwitterのタイムラインを自分のサイトに表示できるツールです。タイムラインはリアルタイムで更新され、タイムライン上から直接、返信、リツイート、お気に入りに登録することができます。

埋め込みタイムラインのタイプ

ユーザーやお気に入り、」リスト、ハッシュタグのタイムラインを埋め込むことができます。

埋め込みタイムラインの作成

Twitterへログインし、設定のウィジェットページからタイムラインを作成できます。

埋め込みコードの一例です。

<a class=”twitter-timeline” href=”https://twitter.com/vlstaff” data-widget-id=”382837768763604993″>@vlstaff からのツイート</a><script type=”text/javascript”>// <![CDATA[!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);// ]]></script>

このコードを埋め込むと以下のようになります。


Twitter埋め込みタイムラインの公式のカスタマイズ方法

公式のカスタマイズについては下記サイトをご覧ください。

埋め込みタイムライン|Twitter Developers

一部抜粋してご紹介します。

カスタマイズは「ウィジェットを作成」で発行されたHTMLタグの中にある<a>タグに情報を追加してできます。

テーマ

data-theme=”dark”またはdata-theme=”light”

リンクの色

data-link-color=”#cc0000″

サイズ(幅・高さ)

「ウィジェットを作成」で調節できます。初期設定では520×600pxです。

width=”300″ height=”500″

インターフェース

data-chrome属性でウィジェットのレイアウトやインターフェースをカスタマイズできます。

・noheader
タイムラインのヘッダーやフォローボタンをなくします。
フォロワーを増やしたい場合は別途ボタンを表示しておきましょう。

・nofooter
タイムラインのフッターやツイートボックスをなくします。
メンションを送ってもらいたい場合は表示しておいたほうがいいです。

・noborders
ウィジェットの周りやツイートの間のボーダー(境界線)をなくします。

・noscrollbar
タイムラインのスクロールバーが表示されないようにします。スクロールができないわけではありませんが、スクロールできない印象を与えてしまう可能性があるのでアクセシビリティやユーザビリティが悪くなる場合があるので要注意です。

・transparent
タイムラインの背景を透明にします。オリジナルの背景画像を使用したい場合、サイトの背景になじませたい場合は便利です。

ボーダー(境界線の色)

data-border-color=”#cc0000″

ツイートの間の境界線やウィジェットの周りの色を指定できます。先ほど紹介した data-chrome で noborders を指定していると、設定しても無視されます。

ツイート数の固定

data-tweet-limit=”5″

表示するツイート数を1から20まで指定できます。指定されている場合、そのツイート数が表示されて、ウィジェットの高さが全てのツイートがスクロールせずに見られるように調整されます。ウィジェットのサイズが固定になるので、サイトの高さにあわせて表示したい場合には不向きです。また、通常のウィジェットは自動更新されますが、表示ツイート数を固定すると、自動更新されません。

おすすめしたいユーザー

data-related=”benward,endform”

返信、リツイート、お気に入り登録の際にユーザーにおすすめしたいユーザーを指定示できます。複数指定が可能ですが、カンマ区切りで指定します。

Twitterの旧公式ウィジェットから新公式ウィジェットへ設置し直す方法

2013-06-19

Twitterの新ウィジェット設置方法

多くの方がブログのサイドバーなどにフリーエリアのブログパーツを利用して、Twitterの旧公式ウィジェットを設定されているかと思います。
しかし、急に表示されなくなって焦った方もいるのではないでしょうか?
API v1.0からv1.1への移行に伴い、2013年3月以降Twitter側のサポートが終了し、表示されなくなりました。

「 “Join the conversation” ウィジェット」提供終了のお知らせ(Twitterブログ)
http://blog.jp.twitter.com/2013/02/join-conversation.html

旧公式ウィジェットは、以下のような「Join the conversation」の表記があるウィジェットになります。
Twitter新旧ウィジェット
(画像はTwitter公式ブログより引用)

新ウィジェットの設置方法

現在、上のような旧ウィジェットをブログに設置されている方は、Twitterの新公式ウィジェット「埋め込みタイムライン」の設置をしましょう。

1.Twitterの設定画面にアクセスし、「ウィジェット」を選択後、「新規作成」のボタンをクリックします。
Twitter新ウィジェット

2.埋め込みタイムラインに表示させる内容を選択する。
以下の画像は、自分のつぶやきを埋め込みタイムランに表示させるための設定画面です。
ユーザー名の欄に、自分のTwitterのアカウント名を記します。@で始まるリプライを表示させたくない場合は「返信を除く」にチェックをいれましょう。
高さはデフォルトでは600pxが適用されますので、任意の高さを設定しましょう。

他にも、お気に入りのツイートやリスト、特定のハッシュタグや検索結果を表示させることもできます。詳細は公式の解説ページをご覧ください。

Twitter新ウィジェット

設定ができたら、「ウィジェットを作成」という青いボタンをクリックします。
すると、以下のようなソースコードが作成されます(赤い枠の中)

Twitter新ウィジェット

3.ブログ管理画面のブログパーツ編集画面の「フリーエリア」のパーツに(2)で取得したソースコードを貼り付けます

ソースコードをホームページやブログに貼付け後保存すると、以下のような形に表示されます。

Twitter新ウィジェット

ウィジェットが表示されなくてお困りの方は、上記の方法で再設置を行ってくださいね。

第4回 Twitterでの新規アカウント作成
TwitterのツイートをFacebookに連動して表示させる方法

© 2009 山梨県パソコン入門書 ホームページ執事(無料のパソコンオンラインスクール) Theme by ホームページデザイナー Powered by VISUAL LITERACY