これでもう大丈夫！twitterボタンの表示崩れ対策のソース公開します

以前、twitter公式のシェアボタンの仕様変更について書きました。

対策してますか？twitterボタン仕様変更によるブログの表示崩れ

ふと気づくと、当ブログのtwitterボタンが次のようなビジュアルになっていまし …

seminimalist.info

要約すると、「ツイートボタンの吹き出し部分が消えちゃったので、表示が崩れるよ」というお話。

↑こんなかんじに、ツイートボタンだけぴょこっと上付けされてしまう。

twitterはたしか公式ボタンの改変やロゴ改変が禁止だったはずなので、できれば公式ボタンをいじりたくはない。どうしようかなあと思っていたのですが、自分なりに解決してみました。以下、解決方法とソースを公開します。

公式ボタンに触ってはならぬの禁

前提 : 公式ボタンやロゴの改変はNGだったはず

まず、前提。twitterはシェアボタンやロゴマークの改変がたしか禁止だったはずです。色んなブログでやっているじゃんという話ですが、あれは見逃されているだけ。法人サイトとかだとtwitterからお叱りの声が来たりするらしい。

見逃されているならいいじゃんって意見もあるかと思いますが、なるべくなら触らぬ神に崇りなし、クリーンにいきたいと思います。というわけで、公式シェアボタンには手を入れない方向で考えてみました。

解決策 : 自作の吹き出しを乗っけてみる

たどりついた方法がこれです。

そう、「公式ツイートボタンの上に、自作の吹き出し乗っければいいじゃない」というものです。なんて力技。ツイートボタンはいっさいいじっていません。ツイートボタンの上に、たまたま、偶然、全然関係ない吹き出しが乗っかっているだけです。というスタンス。

ちなみに、吹き出しを押してもちゃんとシェアできます。

使用したソースの公開

では、以下実装に使ったソースを貼ります。ソースはwordpressのSTINGER5を念頭においていますので(多分コピペで動くはず)、それ以外のブログをお使いのかたは(たとえば、はてなブログなど)は適宜ソースを改変してご利用ください。

HTML


■sns.php変更前

<li>
    <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>


■sns.php変更後

<li class="twitter_button">
    <span class="arrow_box">
        <a href="https://twitter.com/intent/tweet?original_referer=<?php the_permalink(); ?>&ref_src=twsrc%5Etfw&text=<?php the_title(); ?>&tw_p=tweetbutton&url=<?php the_permalink(); ?>">つぶやく</a>
    </span><br />
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>

CSS


■CSSに以下を追加


.twitter_button .arrow_box {
position: relative;
background: #fff;
border: 1px solid #BDBDBD;
padding: 0 10px;
border-radius:3px;
top:-3px;
line-height:36px;
display:inline-block;
height:36px;
color:black;
margin-bottom: 3px;
}
.twitter_button .arrow_box a{
color:black;
text-decoration:none;
}
.twitter_button .arrow_box:after,.arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: ” “;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.twitter_button .arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 3px;
margin-left: -3px;
}
.twitter_button .arrow_box:before {
border-color: rgba(189, 189, 189, 0);
border-top-color: #BDBDBD;
border-width: 5px;
margin-left: -5px;
}

まとめ

というわけで、twitterシェアボタンの仕様変更への対応でした。上記のソースを反映させれば、吹き出しが表示されるようになるかと思います。お手元の環境によって表示が異なる場合や、1px、2px、もう少し小さくしたい大きくしたいなどある場合は、よろしくソースを修正してください。

下記画像は、記事を書いている現在のシェアボタンのレイアウト。

やっぱり、見た目が揃っていた方が気持ちいいですね。

記事下に関連記事を表示したい！Wordpress popular postsをカスタマイズした自作コードを公開

このたび、当ブログ「物を捨てきれないなりにミニマリスト目指す。」の記事下に表示し …

seminimalist.info

↑こんな記事も書いています。