Follow @papepo100
    

ツィート文にブログ本文を制限文字数までカットして表示する方法

SNS連携
0 0 2016/12/24
twittercard13.png今更ながら、ツィートボタンで表示されるツィート文を動的に変更できることに気づきました。
いくつか説明しているページを見つけましたが、少しわかりづらい気がしたので、 ブログ本文を制限文字数までカットしてツィート文に表示する方法を記述しておきます。
まず、以下のJQuery関数を<head>~</head>に埋め込みます。(jquery.min.jsの追加は適宜行います。)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!--topentry-->
<script type="text/javascript">
$(function() {
    $.fn.appendTweetButton = function(url,text){
        $(this).append($("<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-url=\""+url+"\" data-text=\""+text+"\" data-count=\"vertical\">Tweet<\/a><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>"));
    }

    var text = "";
    tags = document.getElementsByClassName('topentry_text');
    if (tags.length) {
        text = text + tags[0].innerText.substring(0, 136-"<%topentry_link>".length/2) + "...";
        $("#tweet").appendTweetButton("<%topentry_link>", text);
    }
});
</script>
<!/--topentry-->
赤字のクラス名はテンプレートによって適宜変更する必要があります。本文の囲んでいるタグのクラス名を指定します。

これでTweetボタンを押すと<text></text>で囲まれた文が140文字以内にカットされて表示されるはずです。
要はページの読み込み後にdata-textに表示したいtextとdata-urlを設定すればよいのです。

この方法にすることで、コチラの記事で設定していた内容は要らなくなりました。。
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント