2010年09月27日

SeesaaブログにTwitter公式Tweetボタンを設置する方法

今回はTOPページで記事一覧になっていてもTweetボタンがちゃんと個別記事のリンクになるようにする方法です。
まず、Twitter公式のボタンビルダーにアクセスして作成します。
公式Twitter Tweetボタンビルダー
http://twitter.com/goodies/tweetbutton

画像が英語になっていますが、わたしがTwitterの言語を英語にしているためです。
まずボタンの種類を決めます。配置場所によって違うと思うのでお好きなのを選びましょう。
SafariScreenSnapz005.png


次に1のTweet Textのタブへ移動します。
このタブは重要です。ここでつぶやかれるフォーマットを決めることができます。画像では 記事名 | ブログ名 となるようにしています。
画像のように<% article.subject %> | <% blog.title %>と入力します。
SafariScreenSnapz006.png


次に1のURLタブです。ここも重要です。ここで記事一覧でも必ず各記事のアドレスをつぶやくように設定します。
次のように入力します<% article.page_url %>
SafariScreenSnapz007.png


次に1のLanguageのタブへ移動します。
ここはTweetボタンに表示される言語の設定です。EnglishではTweet、日本語ではツイートすると表示されます。
SafariScreenSnapz008.png


最後の2の項目はオプション扱いですが、2項目の1に自分のアカウント名を入れておけば、Tweetボタンでつぶやかれた時に自分に@でお知らせが飛んできます。
2項目の2はTweetボタンでつぶやいたあとにここに入力したユーザをおすすめとして表示するようです(試していないのでよくわかりません)。
どちらも空欄でも問題ないようです。

一番下に表示されているのが作成したTweetボタンのコードです。コピーして保存しておきましょう。
ここで使ったのは以下のようなコードでした。
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-text="{block:Title} | {Title}" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

次にできたコードをSaaseeブログに貼り付けます。ここで問題なのはどこに表示させるかということです。これはブログのデザインや好みによって様々なのでここで全てに対応できませんが、ここでは記事タイトル右に表示する例を紹介します。
Saaseeブログの管理画面にログインしてデザインタブ→コンテンツ→記事と画像のようにクリックします。
SafariScreenSnapz001.png


次に右上の コンテンツHTML編集 をクリックします。
なにやら呪文のような物が書かれてありますが、そのHTMLコードの中を<% article.subject %>で検索します。見つかったら<% article.subject %>の>の右で改行を2回します。出来た空欄に先ほど作ったTweetボタンのコードをペーストしましょう。
以下の画像のようになっていれば成功です
SafariScreenSnapz010.png


出来たら下の保存ボタンを押します。右の閉じるボタンを押します。出ているコンテンツ管理画面下の設定を反映するボタンを押します。
以上で完成です。
posted by たかちゃん at 22:45 | Comment(0) | TrackBack(1) | 日記
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/163953329
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

TwitterマニアによるTwitter
Excerpt: 先日のことです。私の友人が教えてくれたんですけどTwitterについてたくさんの資料を・・・「Twitterの“XSS騒動”はどのように広まったか 」とか - ウィリアムの ...ウィリアムのいたず..
Weblog: Twitter
Tracked: 2010-09-28 11:41
タグクラウド
1.1.3 8 Core AF-S VR 18-200 AirMac AirMac Express AirMac Extreme airport AJISAI Animal Crossing Aperture App Store apple Apple Event Apple Store Apple TV ATI autumn Badges bambi BasiL bench Benchmark Benz BeOS Big Brain Academy: Wii Degree bike bird BLACK blog Blog Battler BlogPet Blue Boot Camp building camera Camera Bag candle case CAT chamomile champagne Cherry Blossoms Christmas Cingular City Folk Close up lens Closeup lens CM Core 2 Duo Core Duo Core Image COSMOS CSS cucumber CyberShot D40 D60 dandelion Dashboard Deer density design dog DQ DST Duck DVD DVI-ADC Eclipse EFI egbrigde evening Evening Glow Evening sun event F1 Final Cut Firefox Firmware flickr flower FM Transmitter fon food Front Row game GarageBand Gardening geesee Giraffe Gloria goat Good friend google Google Maps Guided Tour guidedtour guitar Gガイド Happy New Year HB Headphone Himeji Castle home Homer HQF HTML IBANEZ iBook ibook g4 icon iDVD iJailBreak iJailBreakMobile iLife illumination iMac iMac G5 iMovie iMovie HD Initial Autumn Intel iPhone iphone 3g iPhone 3GS iPhoto iPhoto Badges ipod iPod CM iPod nano ipod shuffle ipod touch IRC island iStat menus iSync italian itms itunes iTV iWeb iwork J2SE jacket JailBreak java Java 2 javascript jem7v Jobs K.Yairi keyboard Keynote kimono La Fonera+ labrador Lavatory paper cover LEAF leopard Lightbox linkshare LOL lunch Lycoris Mac Mac mini Mac OS X Mac Pro Mac Prp MacBook Macbook Air MacBook Pro Mactracker Macworld MacWorld Expo mannequin mantis meebo MERCEDES BENZ Mercedes-Benz MixedTape Merry Christmas Mighty mouse MightyMouse Mii Mixed Tap Mixed Tape Mobile Mofuse Moon Motorola Motorshow muffler Mum music Net service Nictama night NIKKOR Nikkor ED18-200mm nikon Official 1.1.3 Upgrader orange Pages Peony Performancing Perian picnik pigeon PINK Planter plum Podcast Power Mac G5 Power PC PowerBook PowerBook G4 PURPLE Quartz2DExtreme QuickTime Raikkonen Rain RAW red Remotecontrol Resident Evil4 rilakkuma Rosetta sadou safari ScreenSaver sd SDK Sea Security Security Update Seesaa SevenStar Shadowbane SHOP shopping sky slide Snapz Pro X SNOW Soft softbank mobile SoftwareUpdate SONY Spider lily Steve Vai Store Sun sunset SvenStars target="_blank" Tiger Time Machine tips Tobacco tomato touch TULIP tumblr TV CM TVCM twitter Update Ustream.tv VALENTINE Vista VNC VNsea wallpaper We'll be back soon Webclip WebObjects webservice Wedding white Wii Wii fit Wii Ware Wiiウェア wild Windows Wireless Keyboard World Heritage WWDC Xcode XP Xserve yellow YUKATA ZETA zoo たかちゃん たばこ たんぽぽ とり どうぶつの森 ねこ やわらかあたま塾 アップル イルミネーション カマキリ キャンドル キリン キーボード クリスマス クローズアップレンズ ケース ジャケット スーパーミルクチャン セブンスター ソフトバンク タグクラウド タッチパネル タバコ チューリップ テスト デジタルカメラ ドラゴンクエストソード ハト バイオハザード4 ファームウェア メンテ ヤイリ ライコネン ラブラドール ランチ リモコン リラックマ 世界遺産 今日の一枚 体脂肪率 体重測定 単焦点レンズ 壁紙 夕日 夕焼け 大阪モーターショー 天理スタミナラーメン 太陽 小豆島 彼岸花 日記 日食 映画配信 曼珠沙華 祭り 紅葉 脳内メーカー 街へいこうよ 観月会 障害