Twitterの新しいウィジェット設置方法。表示されない時の注意点、縦幅と横幅の変更方法など。 | WEB LIFE HACK

WEB LIFE HACK

初心者向けのパソコン、ウェブサービスの使い方やアメブロのアクセスアップ、ホームページ制作やSEO対策、ブログ運営で役立つ情報を紹介


テーマ:
今年の9月にTwitterのウィジェットが新しくなりました。

チェック サイト向けに「埋め込みタイムライン」ができました


設置方法と、表示されない場合の注意点や、ウィジェットのサイズのカスタマイズ方法をご紹介。


まずは、Twitterにログインして、左上のアイコンから 設定 を選択します。

$WEB LIFE HACK


次に、左の ウィジェット を開き、新規作成 をクリックします。

WEB LIFE HACK


あとは、項目に必要な情報を入力して ウィジェットを作成 を押し、出てきたコードをサイトやブログ(アメブロの場合は、フリープラグイン)に貼り付けます。

$WEB LIFE HACK



もし、ウェブサイトやブログなど貼り付けても表示されない場合、「タイムラインを埋め込むサイトのドメインを入力してください。」と書いてある ドメイン の項目に注意!

aaa.comでダメだった場合
www.aaa.comにしwwwを入れてみる


サブドメインの場合は

bbb.aaa.comでダメだった場合
www.bbb.aaa.comにしwwwを入れてみる



たいがい表示されない場合に多いのが www があるかないかみたいです。
サーバー側でwwwをどう設定しているか確かめてみましょう。
不安な人は、カンマ「,」で区切ってどちらも入れておくのが良いと思います。


次に、ウィジェットのサイズについて

旧ウィジェットの時よりも使いにくくなった点、サイズの最大値、最小値がある点です。


<横幅>
最小幅は220px 最大値は520px

<高さ>
最小値は350px


あとは、下記のソースのように高さと横幅を追加すればOK。

<a class="twitter-timeline" href="https://twitter.com/<font color="アカウント名" data-widget-id="数字の羅列" width="横幅" height="高さ" >@アカウント名 からのツイート</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>



ご参考に。


89さんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス