stryhのchangelog

Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入

3281296884 8eb86a9d0d m
BlogでTwitterへのリンク紹介時、皆さんどうしてますか?
相手のリンクを調べ、<a>タグで囲い表示確認。なんてしてませんでしたか?
それと下の様に書いていたりしませんでしたか?

自分もまさしくその1人でした。
それとこれ以外の方法を知らなかったというのもあります。

<a href="http://twitter.com/saita_ryouhei" target="_blank">@saita_ryouhei</a>さん

しかし先日、@donpyさんのBlogを見ていた所、謎のツールチップを見つけました。
CDIP
これがそうです。

これは一体何なんだろうとずーっと気になってました。
自分でも調べてみたのですが、見当付かず。
最終的に@donpyさんに聞いてみた所、Twitter Anywhereというプラグイン?ということが判明。
導入方法をググってみたところ情報はそれなりにあるが、少ない方。
と、言う訳でWordPressへの導入手順を紹介しぁす! (´ー`)

はじめに

Twitter Developers
Twitter Developers

ここにアクセスしTwitterアカウントでSign inします。

次の画面へ

Dev twitter

新規作成

Dev twitter2 2
Create a new applicationをクリック。

情報を入力

Create an application

    • アプリ名称を入力。何でもかまいません。
    • 説明を入力。
    • 設置するサイトのURLを入力。
    • ここも③と同じのを。

後は規約に同意、文字キャプチャ?の文字を入力しCreate your Twitter applicationのボタンをクリック

keyの発行

Consumer key

アクセス権限

Settings
Settingsをクリック。

Settings 1 1
Read and Writeを選択。

WordPressに設置

オフィシャルのドキュメントは↓
Welcome to @Anywhere | Twitter Developers
Twitter Anuwhereのドキュメント。全部英語です。

WordPressではテーマを編集することで設置します。
自分の場合はヘッダー (header.php)に設置しています。
設置方法は「テーマ編集」▶「ヘッダー (header.php)」を選択します。
自分の場合、headタグの直後に下記コードを設置してます。

<script src="http://platform.twitter.com/anywhere.js?id=[Consumerkey]&v=1" type="text/javascript"></script>
<script type="text/javascript">
 twttr.anywhere(function(twitter) {
   twitter.hovercards();
 });
</script>

[Consumerkey]に先程コピーしておいたkeyを指定します。
[](括弧)は不要です。
問題が無ければファイルの更新を行います。

完成 (≧∀≦)

全て問題が無ければ完成です。
もし、WordPressのプラグインでWP Super Cacheを導入されている場合、キャッシュの削除が必要になるかと思うのでキャッシュを削除の上、ブラウザーをリロードして下さい。
Hiro45jp
↑が完成のキャプチャです。

これからは

<a href="http://twitter.com/saita_ryouhei" target="_blank">@saita_ryouhei</a>さん

と、書かずに。

@saita_ryouheiさん

と書くだけて後は勝手にリンク表示してくれます \(^o^)/

お試しあれ。

参考サイト

参考にさせて貰いました。有り難う御座います。

Twitter@Anywhereの使い方WordPress編 | wpxtreme

Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ – Rewish

Twitter Anywhereで@名前リンクを簡単自動生成 | goryugo


URL :
TRACKBACK URL :

Comments & Trackbacks

  • コメント ( 1 )
  • トラックバック ( 13 )
  1. 参考にさせて頂きました。ありがとうございます。

  1. […] マジでむかついた、自分の情報収集力のなさに。 Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/…このポテンシャルよ […]

  2. […] … Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/…BlogでTwitterへのリンク紹介時、皆さんどうしてますか? […]

  3. […] Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 […]

  4. […] 入方法については、以下のブログで詳しく解説されているのでそちらを参照して頂ければと思います。 Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/changelog […]

  5. […] Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 Make a draft by DraftPad Final adjustment by MarsEdit 初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。 もしブロ […]

  6. […] | [M] mbdb ・Auto-linkification of @usernames ・Hovercards ・Follow Button …   Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/…       […]

  7. […] Twitter Developers Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/…Twitter Anywhere … […]

  8. […] Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/… […]

  9. […] Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/…BlogでTwitterへのリンク紹介時、皆さんどうしてますか? 相手のリンクを調べ、<a>タグで囲い表示確認。なんてしてませんでしたか? それと下の様に書いていたりしませんでしたか? 自分も … […]

  10. […] | NANOKAMO BLOGすごい良まとめ。 Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/…「Twitter […]

  11. […] Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/… […]

  12. […] | NANOKAMO BLOGすごい良まとめ。 Twitter Anywhere 〜 魔法のツールチップ – WordPressへ導入 | stryhの日記 ~stryh/…「Twitter […]

Leave a reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Return Top