FC2Twitter連携機能の使い方、ツイートまとめの仕様とデザイン変更
- 2010-06-10 木 00:37
- FC2ブログ
最終更新日 2010 08-13 履歴
Twitter更新通知 - 記事タイトル、URL（短縮）、任意のテキストをTwitterに
ツイートを毎日まとめて記事にする - 1日分（午前0時まで）のツイートをブログに投稿
特定期間のツイートをまとめる - 指定した期間のツイートをブログに投稿
- ブログ更新通知の使い方
- 特定期間のツイートをまとめるの仕様 //取り消しができないときの対処法
- ツイートを毎日まとめて記事にするの仕様
- ツイートまとめで出力されるコード
- ツイートまとめのデザインを変更する
- ツイートまとめデザインテンプレート
- 履歴履歴など（2010 06-12）
- ツイートまとめ記事を過去記事編集で並び替え・整形するブックマークレット
ブログ更新通知の使い方（2010 05-29）
通知形式は記事ごとに設定することができます。また、記事ごとにひとこと添えることもできます。
[環境設定][ブログの設定][Twitterとの連携]にあるメッセージの書式は、記事を編集するときの初期状態になります。
<%title> <%shorturl>
としておくと、記事を書くときに最初から上記の通知形式になっています。
各変数は次の出力を行います。
<%title> エントリタイトル <%url> エントリURL <%shorturl> エントリURL(短縮URL) <%blogname> ブログタイトル
例えば、この記事を通知するときは次のように出力されます
<%title> FC2Twitter連携機能の使い方、ツイートまとめの仕様とデザイン変更 <%url> http://paro2day.blog122.fc2.com/blog-entry-562.html <%shorturl> http://fc2.in/XXXXXX <%blogname> Paroday
[新しく記事を書く]や[過去の記事の管理]から記事編集ページを開くと、ページ最下部に[ブログの更新をTwitterへ通知する]があります。書かれている通り、再編集時に通知をしたくない場合はチェックを外します。
初期状態は <%title> <%url> なので、このまま通知するとTwitterには「ブログ記事タイトル 記事URL」が通知されます。
Twitterの文字数は140文字までです。<%url> はブログIDや記事数によりますが、およそ50文字程度消費します。そこで、メッセージの書式に短縮URL <%shorturl> を使って文字数を減らします。
<%title> <%shorturl>
bit.lyなどの短縮URLサービスを利用する場合は作成した短縮URLを入れます。
<%title> http://bit.ly/xxxxxx
何かひとこと添えてツイートする場合は、変数の前後などにテキストを入力します。urlの前後に入れる場合は半角スペースを必ず入れます。
腕立て伏せしながら書いた。[<%title> : <%shorturl> ]
書いた記事を誰かに発信する場合は、メッセージ書式の先頭に「@ユーザー名」をつけます。
@hatoyamayukio 背筋しながら読んでください。<%shorturl>
ハッシュタグ（FC2ブログでいうところのユーザータグのポータル版:自分のサイト以外も検索の対象に含める）を使うときは「#タグ名」をつけます。
立ち上がれ日本。 <%shorturl> #soccer
特定期間のツイートをまとめるの仕様（2010 06-09）
[環境設定][ブログの設定][Twiiterとの連携]
実行方法 : 期間を選択して、[まとめ処理を予約する]をクリック（JavaScriptオン）
所要時間 : 早ければ、予約処理実行後、10分程度で投稿されます（期間10日以下で過去の場合）。
取り消す : 予約処理実行後にまとめ処理をキャンセルすることができます。
何らかの障害によって、取り消すためのリンクが表示されないときは、取り消しリンクをクリックします。このリンクを（右）クリックしてお気に入りに登録しておくといいかもしれません。[環境設定][ブログの設定]ページで登録したリンクをクリックすると、処理が取り消されます。
※Twitterを利用していない場合や取り消す必要のない場合はクリックしない
予約処理実行中に新たな処理を追加することはできません。処理が完了すると、再度、期間を選択できるようになります。
ツイート1日分で新しい記事が1つ作成されます。『06/01～06/03までのツイートまとめ』のような投稿はできません。記事投稿日時は、その日のツイートの翌日の0時になります。
blog-entry-100.html 『06/01のツイートまとめ』 06月02日00時00分 blog-entry-101.html 『06/02のツイートまとめ』 06月03日00時00分 blog-entry-102.html 『06/03のツイートまとめ』 06月04日00時00分
同じ日にすでにツイートまとめの記事があっても新しい記事を投稿します。既存の記事への上書きや削除などは行われません。
期間の終点に当日の日付を指定すると、その日のツイートが未来の日付（翌日の0時）で投稿されます。未来日記を回避する場合は、昨日までの期間を指定するようにします。
[例] 現在の日付 : 2010年6月12日 当日のツイートがある状態で 「2010年6月1日」から「2010年6月12日」のまとめ処理を実行 『06/12のツイートまとめ』 06月13日00時00分 //未来の日付で即座に投稿される
新しい記事を作成しますが、新規投稿1日30件までの制限にはカウントされません。いくつでも投稿できます。
指定した期間が長い（ツイートの日数が多い）ほど、処理に時間がかかりそうです。
ツイートの出力形式などは、通常のツイートまとめと同じです。
ツイートを毎日まとめて記事にするの仕様（2010 08-13）
[環境設定][ブログの設定][Twiiterとの連携]
対象はユーザ自身のツイートのみで、タイムライン上の他のユーザの返信・ツイートなどは転載されません。
- ツイートの出力形式（3パターン）
-
@[ユーザ名]を含むツイートを
[まとめる]…すべてのツイートをそのまま転載
[返信(Reply)を除いてまとめる]…
@返信以外のツイートを転載
（ツイートの先頭が@[ユーザ名]のものは転載しない。RT @[ユーザ名]は転載される）[まとめない]…
@[ユーザ名]が含まれるツイート以外を転載
（RT @[ユーザ名]なども転載されない） - ツイートの掲載順（2パターン）
-
ツイートの並び順を時刻で
[降順]…新しい時刻のツイートから並べる
[昇順]…古い時刻のツイートから並べる
- まとめツイートのカテゴリ指定
-
まとめ記事のカテゴリを [任意のカテゴリ] にする
- [FC2 Blog Notify] からのツイート
-
FC2ブログからTwitterへの更新通知 [FC2 Blog Notify] からのツイートは転載されません。
- 1日のツイートが10件以上ある場合
-
1日のツイートが10件以上ある場合は、11件目以降が追記部分
<%topentry_more>に表示されます。ツイート1 ツイート2 ... ツイート10
続きを読む
ツイート11 ツイート12 … 最後まで
ただし、テンプレート機能で「返信(Reply)を除いてまとめる」または「まとめない」によって、転載されなかった
@[ユーザ名]を含むツイートが記事本文にあった場合は、その分だけ掲載ツイートが減ります。[例] ツイート合計数 15 （記事本文の中に含まれるツイートに
@返信が5件）
→記事本文には 5件 しか掲載されない（追記のツイート数は変わらない）。ツイート1 ツイート2 ツイート3 ツイート4 ツイート5
続きを読む
ツイート11 ツイート12 ツイート13 ツイート14 ツイート15
- その他注意事項
-
2010年8月9日より、@[ユーザ名]以外のURIもリンクされるようになりました。ハッシュタグについてはリンクなしです。
// Twitter 続きはブログで！ http://paro2day.blog122.fc2.com/ RT @paroday もっと読む #fc2
// FC2Blog ツイートまとめ出力 現在 続きはブログで！ http://paro2day.blog122.fc2.com/ RT @paroday もっと読む #fc2
// FC2Blog ツイートまとめ出力 2010年8月9日以前 続きはブログで！ http://paro2day.blog122.fc2.com/ RT @paroday もっと読む #fc2
現在のところ、まとめ投稿時のジャンルやユーザータグは指定できません。変更を行う場合は過去記事の編集をします。
投稿時の[改行の扱い]は[自動改行]になります。[環境設定][投稿設定]の自動改行を[HTMLタグ以外は無視]に変更していても[自動改行]です
特定期間のツイートをまとめと違い、新規投稿1日30件までの制限にカウントされます。ツイートを含めて30件になります。
ブログがプライベートモードの場合も投稿されます。
何らかの障害によって正常に投稿されない日もあるようです。投稿されていないときは [特定期間のツイートをまとめ] 機能を使って投稿します。
ツイートに
「<」「>」が使われていると、エスケープが重複します。全角の「＜」「＞」などで代用します。// Twitter 続きはブログで！ > http://paro2day.blog122.fc2.com/blog-entry-562.html <p>p要素</p>// FC2Blog ツイートまとめ出力 続きはブログで！ > http://paro2day.blog122.fc2.com/blog-entry-562.html <p>p要素</p>もともとTwitterでは
「<」「>」を「<」「>」に変換しますが、FC2ブログのツイートまとめはすべての「&」を「&」に変換してしまいます。「"」「'」「&」については、Twitterでは変換されないため、FC2ブログ側の変換は正しく機能します。// FC2Blog ツイートまとめ出力 "ダブル" 'シングル' マリオ&ルイージFC2ブログのツイートまとめの変換< → < Twitter側で変換済み > → > Twitter側で変換済み & → & " → " ' → '
ツイートまとめで出力されるコード（2010 05-29）
ツイートは次の形式で出力されます。
<dl class="fc2twtr"> <dt> <a href="http://twitter.com/paroday/"> ユーザーアイコン </a> <a href="http://twitter.com/paroday/">ユーザー名</a> </dt> <dd> <p> ツイート本文 <br /> <a href="http://twitter.com/paroday/status/00000000000">日付 時刻</a> </p> </dd> ... </dl>
■サンプル
<dl class="fc2twtr"> <dt> <a href="http://twitter.com/paroday/"> <img src="https://blog-imgs-44-origin.fc2.com/p/a/r/paro2day/twitter_icon_hoge.png"/> </a> <a href="http://twitter.com/paroday/">paroday</a> </dt> <dd> <p> もはや転生できません。RT @<a href="http://twitter.com/yamada-tarou/status/00000000000">yamada-tarou</a> 1000円拾った俺は？ <br /> <a href="http://twitter.com/paroday/status/00000000000">05-27 23:19</a> </p> </dd> <dd> <p> 今年の運を使い果たしたね。RT @<a href="http://twitter.com/suzuki-hanako/status/00000000000">suzuki-hanako</a> 10円玉拾った <br /> <a href="http://twitter.com/paroday/status/00000000000">05-27 23:00</a> </p> </dd> <dd> <p> @<a href="http://twitter.com/suzuki-hanako" target="blank">suzuki-hanako</a> 予後はいいの？ <br /> <a href="http://twitter.com/paroday/status/00000000000">05-27 22:22</a> </p> </dd> <dd> <p> TwinTwinな関係：フォローしあうこと <br /> <a href="http://twitter.com/paroday/status/00000000000">05-27 22:13</a> </p> </dd> </dl>
上記形式・サンプルは整形後のもので実際には次のコードが出力されます。
<dl class="fc2twtr"><dt><a href="http://twitter.com/paroday/"><img src="https://blog-imgs-44-origin.fc2.com/p/a/r/paro2day/twitter_icon_hoge.png"/></a><a href="http://twitter.com/paroday/">paroday</a></dt><dd><p> もはや転生できません。RT @<a href="http://twitter.com/yamada-tarou/status/00000000000">yamada-tarou</a> 1000円拾った俺は？ <br /> <a href="http://twitter.com/paroday/status/00000000000">05-27 23:19</a></p></dd> <dd><p> 今年の運を使い果たしたね。RT @<a href="http://twitter.com/suzuki-hanako/status/00000000000">suzuki-hanako</a> 10円玉拾った <br /> <a href="http://twitter.com/paroday/status/00000000000">05-27 23:00</a></p></dd> <dd><p> @<a href="http://twitter.com/suzuki-hanako" target="blank">suzuki-hanako</a> 予後はいいの？ <br /> <a href="http://twitter.com/paroday/status/00000000000">05-27 22:22</a></p></dd> <dd><p> TwinTwinな関係：フォローしあうこと <br /> <a href="http://twitter.com/paroday/status/00000000000">05-27 22:13</a></p></dd> </dl>
ツイートまとめのデザインを変更する（2010 05-29）
テンプレートのスタイルシートに次のようなコードを入れます。プロパティや値はテンプレートにあわせて適当に変更します。
/* twitter
-------------------------------------------------------- */
/* 全体 */
dl.fc2twtr {
margin: 0 0 1em 0 !important;
padding: 0 0 0 0 !important;
border: 0 none !important;
font-size: 100%; /* 文字サイズ */
color: inherit; /* 文字色 */
}
/* プロフィール画像・ユーザー名 */
dl.fc2twtr dt {
margin: 0 0 0 0 !important;
padding: 0 0 5px 0 !important;
border: 0 none !important;
border-bottom: 1px #eeeeee solid !important;
font-size: 100%; /* 文字サイズ */
}
dl.fc2twtr dt img {
margin: 0 !important;
border: 0 none;
}
dl.fc2twtr dt a {
margin: 0 7px 0 0;
}
/* 本文 */
dl.fc2twtr dd {
margin: 0 !important;
padding: 10px 2px 9px !important;
border: 0 none !important;
border-bottom: 1px #eeeeee solid !important;
}
dl.fc2twtr dd:hover {
background: inherit; /* 背景色 */
}
dl.fc2twtr dd p {
margin: 0 !important;
font-size: 100%; /* 文字サイズ */
}
/* 日付 */
dl.fc2twtr dd p br + a {
font-size: 90%; /* 文字サイズ */
}
デザインが変わらないときは各値に !important をつけます。
padding: 0 0 0 0 !important; border: 0 none !important; font-size: 84% !important; /* 文字サイズ */ color: #0000ff !important; /* 文字色 */
過去記事の編集でツイートまとめの本文にbr要素などを入れてコードを直接整形する場合は日付のスタイルを以下に変更します。IEは現在のところ対応していません。
/* 日付 */
dl.fc2twtr dd p a:last-child {
font-size: 90%; /* 文字サイズ */
}
まとめてツイートデザインテンプレート
テンプレートのスタイルシートに次のコードを入れます。その他の色については、背景色や線の部分を変更して調整します。
白背景向けデザイン
黒背景向けデザイン
履歴履歴など
- 【更新履歴】
- 2010 08-13 - ツイートを毎日まとめて記事にする : @[ユーザ名]以外のURIもリンクされるようになりました。
- 2010 06-12 - ツイートを毎日まとめて記事にする : 制限30件について追記。特定期間のツイートをまとめる : 取り消しリンク、制限30件、期間に当日を含む場合について追記。ツイートまとめで出力されるコード : を誤って削除していたので再掲。
- 2010 06-10 - ツイートを毎日まとめて記事にする : 時刻の掲載順、カテゴリの指定、@返信の扱い が選択できるようになりました。特定期間のツイートをまとめる : 何らかの障害でツイートまとめが正常に機能しなかったときに使えます。連続した日付のツイートを投稿するときに便利です。ツイートまとめで出力されるコード : の変更はありません。よってデザインもそのまま使用できます。並び替え・整形するブックマークレットも引き続き使用できます。本記事の投稿日時はTOP落ち後に戻します（2010 05-29 03:03:32）期間選択でも1記事1日ツイートならば日付は不要。
- 2010 06-05 - ツイートまとめの仕様 : プライベートモードについて訂正。プライベートモードでも投稿されました。何らかの障害によって、公開・非公開問わず、ツイートまとめが投稿されないときがあるようです。現在までに投稿されなかった日が2日あります。
- 2010 05-30 - ツイートまとめの仕様 : ツイートに
「<」「>」が使われている場合の出力結果、プライベートモードについて追記。 - 2010 05-29 - ツイートまとめの仕様 : 確認の結果、[環境設定][ブログの設定][投稿設定]の[投稿先カテゴリー]の反映は無理でした。ツイートまとめのデザイン : 日付のスタイルをIE7以上でも適用できるように変更しました。br要素が輝いて見える。
- 2010 05-29 - 公開。共有テンプレートにツイートまとめのデザインを入れる。Twitterをすべてのユーザーが利用しているわけではないので、余計なコードは入れず、作者サイトで配布するというスタンスもいいと思うけれど、実装されたばかりなのでマークアップやクラス名が変更される恐れがあるかもしれないし、しばらく様子見というか、まだ機能追加・変更しそうしてください、よくわからないスクリプト、ブックマークレットは明日にでも。はてなダイアリーとかぶってるけど、FC2はメディアには取り上げられない。
- 【関連項目】
- Paroday - FC2ブログインフォメーション / テンプレート関連記事
- 2010 06-04 - ツイートまとめ記事を過去記事編集で並び替え・整形するブックマークレット
- FC2総合インフォメーション - 【ブログ】ツイートまとめ機能を強化しました
- FC2総合インフォメーション - 【ブログ】Twitter連携を強化！ ツイートをブログに自動投稿
- FC2ブログマニュアル - 【ブログの設定】 Twitterとの連携
- comment
コメント
トラックバック
https://paro2day.blog.fc2.com/tb.php/562-89cd03d7
- trackback