Pbscript

マルチルームチャット、ダイスチャット等のPHPスクリプトを配布

Twitterの公式ウィジェットをカスタマイズして表示する

      2015/10/09

Twitterの投稿をお知らせなどに使いたい時に、デザインをカスタマイズ。

アイコンフルサイズ↓
 Twitterのウィジェット表示をカスタマイズ [tweet.zip / 1.8 kB]
ダウンロード数:563

アイコン小サイズ↓↓
 Twitterのウィジェット表示をカスタマイズ(アバターを小さく) [tweet_smallavatar.zip / 1.8 kB]
ダウンロード数:451

使い方

以下のTwitter公式サイトにアクセスします。
https://twitter.com/settings/widgets/new

「ウィジェットを作成」ボタンを押します。

作成されたウィジェットの文字列から「data-widget-id=”18桁の数字”」を見つけ出して、数字の部分だけをコピーします。

ダウンロードしたスクリプトの「TwitterウィジェットID」の項目の数字をコピーした数字に書き換えます。

tweet.php
<?php
## 【設定項目 ここから】↓ -------------------------------------------- #

// TwitterウィジェットID(https://twitter.com/settings/widgets/new のサイトでウィジェットを作成ボタンを押し、作成されたウィジェットから「data-widget-id="18桁の数字"」を見つけ出して、数字の部分だけを記入してください)
$datawidgetid = '359225738416779265';

// 表示幅(指定なしで自動調整)
$width = '';

// 表示高さ(指定なしで自動調整)
$height = '';

// 表示オプション(noheader nofooter noborders noscrollbar transparent)
$datachrome="noheader nofooter noscrollbar transparent";

// フォント
$fontfamily = "'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif";

// フォントサイズ
$fontsize = '12px';

// ユーザー名、ニックネームのフォントサイズ
$namesize = '10px';

// ユーザー名の色
$pnamecolor = "#cc99aa";

// タイムスタンプの色
$timecolor = "#cc99aa";

// テキスト色
$textcolor = "#999999";

// リンク色
$linkcolor = "#cc6699";

// 区切り線のスタイル(dottedで点線、solidで実線)
$borderstyle = 'dotted #cc9999 1px';

// 表示件数
$tweetlimit = 3;

// リプライツイートを表示するか(true, false)
$datashowreplies = 'false';

## 【設定項目 ここまで】↑ -------------------------------------------- #

echo '
<a class="twitter-timeline" data-theme="light" width="'.$width.'" height="'.$height.'" href="https://twitter.com/twitterapi" data-widget-id="'.$datawidgetid.'" data-chrome="'.$datachrome.'" data-link-color="'.$linkcolor.'" data-tweet-limit="'.$tweetlimit.'" data-show-replie="'.$datashowreplies.'" lang="ja"></a>
<script>!function(d,s,id){var js,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>
';

?>
<script type="text/javascript">if(typeof jQuery=='undefined'){document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"%3E%3C/script%3E'));}</script>
<script>
function decorateWidget(id) {
  var $twwgt = $(id);
  var decorate = function($el) {
<?php
    echo '
$el.find("li.tweet").css("font-family", "'.$fontfamily.'");
$el.find(".twitter-timeline").css("color", "'.$textcolor.'");
$el.find(".p-name").css("color", "'.$pnamecolor.'");
$el.find(".p-name").css("font-size", "'.$namesize.'");
$el.find(".p-nickname").css("font-size", "'.$namesize.'");
$el.find("b").css("font-size", "'.$namesize.'");
$el.find("time.dt-updated").css("color", "'.$timecolor.'");
$el.find(".e-entry-title").css("font-size", "'.$fontsize.'");
$el.find("li.tweet").css("border-bottom", "'.$borderstyle.'");
$el.find(".avatar").css("top", "5px");
$el.find("li.tweet").css("padding", "1px 0px 0px 60px");
$el.find(".tweet-actions").css("margin", "0px");
$el.find("a.expand").hide();
';
?>
    return $el;
  };

  //ウィジェットが読み込まれるまで再帰
  if ($twwgt.length > 0 && $twwgt[0].contentWindow.document.body.innerHTML !== "") {
    decorate($($twwgt[0].contentWindow.document));
  } else {
    setTimeout(function() {
      decorateWidget(id);
    }, 500);
  }
}
decorateWidget("#twitter-widget-0");
</script>

表示したいところに以下のコードを書きます。

<?php require('./tweet.php'); ?>

 - その他ツール

  関連記事

IMG_0800
(作成中)体重グラフ スタンプ付き

理想的な体重記録アプリを探したのですが見つからなかったので自作してみているところ …