EZ-NET TwitterShareLink - ツイッターアカウントをシェアするブックマークレット

PROGRAM

ツイッターアカウントをシェアするブックマークレット

ツイッターへのリンクを簡単に貼りたいなと思って、それを簡単に生成できるブックマークレットを作成しました。

EzTwitterShareLink ブックマークレット

今回作成したEzTwitterShareLinkブックマークレットをTwitter公式ページで使うと、そのページのアカウントへのリンクを簡単に作成できます。

たとえば @EasyStyleGK のリンクを作成したとき、次のようなものができます。

 

スタイルなし
標準スタイル

標準スタイルは EzTwitterShareLink.v2.css を使用しています。

このスタイルシートを自分のスタイルシートにコピーすると、EzTwitterShareLink で取得した HTML を標準スタイルの見た目で使えます。

EzTwitterShareLink の対応環境

主に Safari で動作チェックを行ってますが Google Chrome でも動くと思います。

Safari を使って、PC 用のツイッターページ (twitter.com) と iPhone 用のツイッターページ (mobile.twitter.com) の両方で動作するように作成しています。

もし動かないようでしたら @EasyStyleGK までお知らせ頂けると助かります。

EzTwitterShareLink を登録する

EzTwitterShareLink をブックマークに登録するには、次のようにします。

  1. ブックマークレットのソースコードをコピーします。
  2. このページをブックマークに登録します。
  3. 登録したブックマークの URL を編集し、コピーしたソースコードを貼り付けます。

このような流れでブックマークレットを登録します。

カスタマイズとソースコードの取得

次の【ソースコードをポップアップ】ボタンを押すと、ソースコードが表示されます。

必要な項目を選択したり、敬称を変更したり、各タグに設定するクラスのプレフィックスを変更したりすると、それに合わせたブックマークレットのソースコードが取得できます。

敬称やサフィックス HTML には引用符などの特殊文字も使用できます。

EzTwitterShareLink メーカー

Class プレフィックス 敬称
必要な項目
画像サイズ
<a> に含める表示名 @ @
サフィックス HTML

 

ユーザー名とスクリーン名について

Twitter では「ユーザー名」と「スクリーン名」の呼び名がまちまちみたいで分りにくいですが、ここで言う「ユーザー名」は【熊谷友宏】とかで、「スクリーン名」は【@EasyStyleGK】とかを指しています。

Class プレフィックスについて

カスタマイズでClass プレフィックスを変更すると、ブックマークレットが生成する HTML の各タグのクラス名がそれから始まる名前に置き換えられます。

スタイルシートではクラス名ごとにデザインを適用できるので、たとえば画像ありとなしとか、小さい画像と大きい画像とか、カスタマイズ毎に Class プレフィックスを変更しておくと、それぞれ毎にスタイルを調整しやすくなります。

サフィックス HTML について

カスタマイズでサフィックス HTMLを変更すると、生成する HTML の表示名の次に、ここで指定した HTML が挿入されます。

ちなみにこのサフィックス HTML は、ツイッターリンクが貼られた<a> タグの外に追加されます。

 

HTML マークアップを自由に利用できるので、たとえば外部リンクを示すアイコン画像を表示したいときとかに重宝するかもしれません。

外部リンクのマークを含める方法は他にも、スタイルシートの:afterを使う方法もあります。

EzTwitterShareLink の使い方

後に掲載するEzTwitterShareLinkのソースコードをブックマークに登録して、リンクを貼りたい人の Twitter 公式ページでブックマークを呼び出します。

そうすると、そのページのリンク用 HTML がポップアップで表示されます。

これを HTML ソースとして貼りつければ、その Twitter ページへのリンクがそこに貼られます。

デザインの調整方法

EzTwitterShareLink ではスタイルシートを使ってレイアウトを調整します。

標準スタイル EzTwitterShareLink.v2.css の内容をご自分のスタイルシートにコピーすると調整しやすいと思います。

2013.08.26 からはそれ以前のバージョンと生成されるタグの構造が僅かに違うため、どちらでも混在させられるように、"ez-twitter-share" と "ez-twitter-share-suffix" 以外のクラス名が変更になっています。

それ以前から利用されている方は、スタイルシートの再調整をお願いします。

生成される HTML の構成

HTML の構成は次のようになっています。

以下の例はClass プレフィックスが "ez-twitter-" の場合です。それ以外の Class プレフィックスに変更すると、その部分が指定したものに置き換わります。

<span class="ez-twitter-share">

<span class="ez-twitter-image">

<a href="ツイッターページの URL" target="_blank">

<img src="プロフィール画像">

</a>

</span>

<span class="ez-twitter-name">

<a href="ツイッターページの URL" target="_blank">

<span class="ez-twitter-username">ユーザー名</span>

<span class="ez-twitter-parenthesis-left">(</span>

<span class="ez-twitter-screenname">@スクリーン名</span>

<span class="ez-twitter-parenthesis-right">)</span>

<span class="ez-twitter-nametitle">さん</span>

</a>

</span>

<span class="ez-twitter-share-suffix"></span>

</span>

要素ひとつひとつに <span> タグがクラス名付きで設定されているので、これらのスタイルを調整すれば、かなり自由にレイアウトを調整できると思います。

 

たとえば少し強引ですけど、もしスクリーン名が不要な場合は "ez-twitter-profile-screenname" クラスを "display: none" に設定することで、非表示にもできたりします。

不必要な項目を含めないようにするのは、ブックマークレットの呼び出し引数を調整することでも可能です。詳細はソースコードのところで説明します。

EzTwitterShareLink のソースコード

javascript:

(


        

        
)

        
('alert', 'ez-twitter-', 'さん', 
        true, true, true, 'normal', '', 'all');

    

    
留意事項

    
このソースコードをコピーしてブックマークに貼りつけてもブックマークレットとして使用できますが、敬称やサフィックス 
    HTMLなどをカスタマイズしている場合は、全体を encodeURL 関数でエンコードしたものを張り付けないと、特殊文字の都合で正しく動作しない場合があります。

    
カスタマイズ操作を行った場合は、カスタマイズとソースコードの取得 
    のボタンを使ってソースコードを取得するのが安全です。

    
呼び出し引数

    
ブックマークレットのコードの最後で渡している呼び出し引数の意味は次のようになっています。

    
これを調整することで、JavaScript の知識がほとんどなくても、取得できる 
    HTML をカスタマイズできます。

    

    
    

        @1
        outputScheme
        HTML の出力方法を指定します。現在は必ず 'alert' を指定するようにします。
    

    

        @2
        classPrefix
        各ノードに設定するクラスのプレフィックスを文字列で指定します。
    

    

        @3
        escapedProfileNameTitle
        表示名の末尾に付与する敬称や肩書を文字列で指定します。値は escape 関数を使ってエンコードしたものを渡します。
    

    

        @4
        includeImage
        プロフィール画像を含めるかどうかを true または false で指定します。
    

    

        @5
        includeUserName
        ユーザー名を含めるかどうかを true または false で指定します。
    

    

        @6
        includeScreenName
        @スクリーン名を含めるかどうかを true または false で指定します。
    

    

        @7
        profileImageSize
        プロフィール画像のサイズを 'normal', 'mini', 'bigger' または ''（オリジナルサイズ）で指定します。
    

    

        @8
        escapedSuffixHtml
        サフィックスとして使う HTML を指定します。値は escape 関数を使ってエンコードしたものを渡します。
    

    

        @9
        includesNameInAnchor
        表示名のどの部分を <a> に含めるかを指定します。'all', 'user', 'screen', 'name', 'none' 
        から指定できます。
    

    
    

    
更新履歴

    

    
        

        2013.08.26
        
        
    
            
  1. @スクリーン名の前後に付加する ( ) をアンカーの外に移動しました。
    2. 
            
  2. タグのクラス名が "ez-twitter-share" と "ez-twitter-share-suffix" 
            を除き、変更になっています。
    3. 
        

            		
        

        

        2013.08.24
        
        
    
            
  1. <a> タグに含める表示名をいくつかのパターンから指定できるようになりました。
    2. 
        

        		
        

    

        2013.08.23
        
        
    
            
  1. 敬称に引用符などの特殊文字が使えるようになりました。
    2. 
            
  2. サフィックス HTML を指定できるようになりました。
    3. 
        

        		
    

    

        2013.08.22
        
        
    
            
  1. 呼び出し引数でカスタマイズできるようになりました。カスタマイズできる項目は、クラス名のプレフィックス、敬称、プロフィール画像の有無、プロフィール画像のサイズ、ユーザー名の有無、@スクリーン名の有無です。
    2. 
            
  2. サフィックスノードのクラス名が間違っていたのを修正しました。
    3. 
        

        		
    

    

        2013.08.21
        
        
    
            
  1. 初回リリース版
    2. 
        

        		
    

    
    

    

    
[ もどる ]