読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

デフォルトのツイートボタンのツイート本文を動的に差し替える

JavaScript SNS

公式サイト からつくれるツイートボタンはiframeのsrcにツイート本文が埋め込まれます。
なので、iframeのsrcを書き換えてappendしなおすとツイート本文を差し替えることができます。


DEMO


HTML

<div>
    <input class="txt" placeholder="シェア文言" />
    <a class="btn make">作成</a>
</div>
<div id="box">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://kimizuka.fm" data-text="" data-lang="ja" data-size="large">ツイート</a>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

JavaScript

(function(win, doc, $) {
    var $txt = $(".txt"),
        $box = $("#box");
    
    $(".btn.make").on("click", function() {
        var $widget = $("#twitter-widget-0"),
            src = $widget.attr("src"),
            url = src.replace(/\&text=.*\&/, "&text=" + encodeURIComponent($txt.val()) + "&");
        
        $widget.attr({src: url});
        $box.html("").append($widget);
    });
    
})(this, document, $);


今回は以上です。