シングスブログ

中小企業のマーケティングやブランディングのコンサルティング。事業開発 (ビジネスモデルの開発)、デジタルマーケティングやウェブサイト改善など事業の持続的・長期的な成長・発展に貢献できるサービスを提供しています。

ブログからTwitterにツイートできるJavaScript

公開日: 更新日: 投稿者: thingsym

Twitterの機能がブログやウェブサイトで使える JavaScriptフレームワーク「@Anywhere」がリリースされたので、触ってみた。

公式ドキュメントを読むと、ログイン・ログアウト (User login & signup) から自動リンク (Auto-linkification of Twitter usernames)、ユーザー情報が表示される Hovercards、フォローボタン (Follow buttons)、自分のウェブサイト上でコメントができる Tweet Box とコミュニケーションができる機能が揃えてある。

よく使いそうなのは、自分のウェブサイト上でコメントができる Tweet Box だろうか。しかし、現時点で「@Anywhere」が用意しているのは、単機能だけだ。Tweet Box だけだと Twitter ユーザでもない方もコメントする恐れもあるし、コメントしたのかどうかのインタラクションもないので、Twitter にログインしていない場合はログインを促して、ログイン状態なら Tweet Box でコメントができるなどユーザビリティ的に統合された一連のフローがほしいところ。

ということで、開発者ではない方にも手軽に設置できるように作ってみた。

流れ的には、
1. Twitter にログインしていない場合は、ログインボタンが表示。

1'. Twitter にログインしている場合は、コメント欄が表示。
2. ログインボタンをクリックしてログイン画面が表示。Twitterのユーザ名とパスワードを入力してログインすると。

3. コメント欄が表示。

4. ツイートすると、「つぶやきを投稿しました」とお知らせ。

設置方法

1. アプリケーション登録とAPI keyの取得

@Anywhere を利用するには Twitter developers からアプリケーションの登録が必要。

とりあえず必要な登録項目は、

  • 「Application Name」 ブログ名で可
  • 「Application Website」 ブログ・ウェブサイトのURL
  • 「あなたの招待状」 ブラウザアプリケーションを選択
  • 「Callback URL」 Application Websiteと同じURLでも可
  • 「Default Access type」 Read & Writeを選択

登録すると、API key が発行される。

2. スクリプトの設定・設置

以下のソースをテンプレートやHTMLに貼り付ける。JavaScript ファイル「twitterAnywhere.js」はダウンロードして設置しても結構です。

<div class="twitter-comments" id="twitter-comments">
<h2 class="twitter-header">Twitterでつぶやく</h2>
<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1"
type="text/javascript"></script>
<script src="http://project.thingslabo.com/TwitterAnywhere/twitterAnywhere.js"
type="text/javascript"></script>
<script type="text/javascript">
<!--
TwitterAnywhere.username = 'YOUR_TWITTER_USERNAME';
TwitterAnywhere.loginButtonSize = 'large'; //small | medium | large | xlarge
TwitterAnywhere.TweetBoxCounter = true; //true | false
TwitterAnywhere.TweetBoxWidth = 515;
TwitterAnywhere.TweetBoxHeight = 65;
TwitterAnywhere.TweetBoxContent = "";
//-->
</script>
<div id="twitterLoginButton" style="text-align:center;"></div>
<div id="twitterUser" style="font-size:10px;width:50px;padding-top:27px;float:left;
text-align:center;"></div>
<div id="twitterTweetBox"></div>
<div id="twitterFollowButton"></div>
<br clear="all" />
</div>

設定は以下の7つ。

  • 「YOUR_API_KEY」に取得した API key を設定。
  • 「TwitterAnywhere.username」にあなたの Twitter ユーザ名。
  • 「TwitterAnywhere.loginButtonSize」にログインボタンの大きさ。small , medium , large , xlarge から設定。
  • 「TwitterAnywhere.TweetBoxCounter」にコメントの文字カウント表示の有無。true (つける) , false (つけない) から設定。
  • 「TwitterAnywhere.TweetBoxWidth」にコメント欄のサイズ幅 (px)。
  • 「TwitterAnywhere.TweetBoxHeight」にコメント欄のサイズ高 (px)。
  • 「TwitterAnywhere.TweetBoxContent」にデフォルトで設定するコメント文。

以上で自分のウェブサイト上で Twitter にツイートできる。

関連サイト

Movable Type にはてなブックマークブログパーツをつけてみた

公開日: 更新日: 投稿者: thingsym

2009年12月25日にリリースされた「はてなブックマークブログパーツ」をブログ Movable Type につけてみた。

ブログサービスをお使いの方は、利用しているブログのボタンを押すだけでコードが取得できる。それを貼り付けるだけ。

Movable Type や WordPress などブログソフトウェアでは、

を参考に以下のコードをブログ記事のテンプレートに貼り付け設置。新しくテンプレートモジュールを作成して管理もいいだろう。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js">
</script>
<script type="text/javascript">
HBBlogParts.commentInsertSelector = 'div.hateana-bookmark-comment';
HBBlogParts.permalinkSelector = 'div.asset-header h1 a';
HBBlogParts.permalinkAttribute = 'href';
HBBlogParts.permalinkPathRegexp = /\/archives\/\d+\.html$/;
</script>
<div class="hateana-bookmark-comment"></div>

設定は以下の4つが最低限必要。

  • 「HBBlogParts.commentInsertSelector」にコメントが挿入される DOM Element を CSS セレクタで指定。「div.hateana-bookmark-comment」にしてみた。
  • 「HBBlogParts.permalinkSelector」にブログのパーマリンクが記載されている DOM Element を CSS セレクタで指定。標準のままのテンプレートなら「div.asset-header h1 a」で可。
  • 「HBBlogParts.permalinkAttribute」に HBBlogParts.permalinkSelector で取得した要素のどこにブログのパーマリンクの URL が記載されているか属性を指定。
  • 「HBBlogParts.permalinkPathRegexp」にブログのパーマリンクにマッチする正規表現。アーカイブマッピングによって正規表現を調整。

ほかにも細かな設定が可能だ。デザインもスタイルシートで設定できる。

ブログの更新情報をウェブサイトに表示するJavaScript × JSON を作ってみた

公開日: 更新日: 投稿者: thingsym

Twitterのツイートをウェブサイトやブログに表示するJavaScript × JSON に触発されて、ブログの更新情報も同じように表示する JavaScript × JSON を作ってみた。


    1. 更新情報の json ファイルを出力。
    Movable Typeの「インデックステンプレートを作成」から
    タイトル「MTCallback」
    出力ファイル名「mt.json」
    テンプレートの種類「カスタムインデックステンプレート」
    で以下のソースを貼り付けて保存。json ファイルを出力。

    MTCallback([
<mt:Entries glue=",">
{
  "created_at":"<$mt:EntryDate format="%x %X">",
  "title":"<mt:EntryTitle escape="url">",
  "url":"<mt:EntryPermalink>"
}
</mt:Entries>
]);

    記事を更新するごとに公開日時、タイトル、URLを含んだ json ファイルを出力してくれる。タイトルは URLエンコード化。

    2. あとは、ページにjsonファイルまでのブログURLを設定した三行のソースを貼り付けるだけ。JavaScriptファイル (blogger.js) はダウンロードして使ってもOK。

    <ul id="blog_update_list"></ul>
<script type="text/javascript" src="http://project.thingslabo.com/MTCallback/blogger.js"></script>
<script type="text/javascript" src="ブログURL/mt.json?callback=MTCallback"></script>

    JavaScriptのソース (blogger.js) は、こんな感じの10行。

    function MTCallback(MT) {
var statusHTML = [];
for (var i=0; i<MT.length; i++){
  var title = decodeURIComponent(MT[i].title);
  var url = MT[i].url;
  var date = MT[i].created_at;
  statusHTML.push('<li><a href="'+url+'">'+title+'</a> '+date+'</li>');
}
document.getElementById('blog_update_list').innerHTML = statusHTML.join('');
}

    ブログサービスでも json ファイルで更新情報の出力に対応してほしいゾ。

    Twitterのツイートをウェブサイトやブログに表示するJavaScript × JSON

    公開日: 更新日: 投稿者: thingsym

    Twitterのツイートをウェブサイトやブログに表示するには、ウィジェットを貼り付ける方法がありますが、JavaScript × JSON を使ってTwitterのツイートを表示する方法も。

    こんな感じに。


      やり方は、Twitterのユーザー名と表示件数 (count) を設定した

      http://twitter.com/statuses/user_timeline/ユーザー名.json?
callback=twitterCallback2&count=5

      を含む以下の三行のソースを貼り付けるだけ。

      <ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザー名.json?
callback=twitterCallback2&count=5"></script>

      JavaScriptファイルをダウンロードして表示項目を変えたり、スタイルシートでデザインできたりとカスタマイズも自在にできる。

      ブログ記事を自動で公開する指定日投稿

      公開日: 更新日: 投稿者: thingsym

      ブログ記事を指定した日時に公開してしてくれる指定日投稿。テストもかねて。

      cron の設定

      Movable Typeでは、記事を日時指定で公開する機能がありますが。使う前に設定が必要です。スクリプトやプログラムを自動実行するための cron を利用します。設定ファイル crontab にプログラムを登録することで自動的に公開してくれます。

      登録するプログラムは、toolsディレクトリにある run-periodic-tasks です。まずは、run-periodic-tasks に実行権限を与えます。

      $ chmod +x /path/to/mt/tools/run-periodic-tasks

      cron に登録。

      $ crontab -e

      crontab には、分 時 日 月 曜日コマンド の書式で設定。毎時間ごとに更新するように設定してみる。

      0 * * * * cd /path/to/mt/; ./tools/run-periodic-tasks

      注意点としては、まず mt までのディレクトリに移動後、プログラム run-periodic-tasks を指定すること。

      0 * * * * /path/to/mt/tools/run-periodic-tasks

      と横着しちゃうと

      Can't locate MT/TheSchwartz.pm in @INC (@INC contains: ./lib ../lib extlib ../extlib
....

      モジュールがないとエラーが出る。

      共用サーバの管理画面で cron の設定管理が用意されている場合はそれを使えばかなり楽に設定できます。

      Movable Typeでの指定日投稿は、cronのほかに複数の方法でできる。

      ブログ記事の編集画面で書いた記事を公開状態「日時指定」を選んで、公開日を設定保存するだけで、指定した日時に記事を公開してくれる。厳密には、cronに登録した日時に更新されるわけですが。

      最近の投稿

      カテゴリー

      アーカイブ

      検索

      Copyright © 2002 - 2024 シングス All rights reserved.