2017年11月17日
web制作

【ソーシャルボタン】Twitterのシェアボタンについての考察【jQueryで実装】

どうも菱川です。webデザイナーです。

さて、僕たちにとってシェアボタンをデザイン・コーディングすることは日常茶飯事です。基本的にシェアボタンをデザインした時点でTwitterを始めFacebookやその他ソーシャルサービスのサポート外になるのですが、それでも初期のシェアボタンのダサさ故に必ずデザインしなければならない、というのが現状です。そもそもサイトごとにデザインも違うのでデザインくらいは柔軟にできればいいのに、そこはやはりブランドというものがありますからね。できません。

これを見てる人にはいろんなソーシャルボタンデザインの記事を回ってきて結局「デザインじゃなくてどう組み込むか知りてェんだよ！」ってなってる人のために書こうと思いますが、ここはTwitterにすごく焦点を当てて説明したいと思います。理由は今から説明します。

前書き・不具合など(飛ばしてOK)

Twitterのボタンの挙動はなんかよくわからない…こともないんだけど、wordpressのphpがうまく動作しない問題が起きていた。具体的には<?php the_permalink() ?>がなぜか効かないという問題。いや、効いてたんだけど、PCではうまく表示される。けど、スマートフォンだとシェアの画面は表示され、シェア先のリンクが消えてる…と言ったことが起きてた。なぜ…？

wordpressに限ってなのかはわからないけど、そもそもphpってバージョンごとにえらく挙動が変わるイメージがある。function.phpに記事内のimgは全部中央寄せ！って記述してても、次のアップデートでは効いてなかったりするので手間のかかる子だなと思います。(画像中央に関してはこれ以上触れません。)

要するに、安定しない。シェアボタンのタグはぶっちゃけ簡単。例えば

こんな感じ。phpにしても簡単。https://twitter.com/share?url=<?php the_permalink() ?>………みたいにすればいいわけ。でも公式のボタン通りに動かないことがしばしばある。

それで色々考えた結果…

「もう、jQueryに頼ろうか…」

これでした。。。(ちなみに画像中央の件もjQueryで解決)

僕がjQueryに対して乗り気じゃない理由

ここでいくつかjQuery嫌そうな理由をメリットも含めて挙げます。

メリット

安定する。phpだとwordpress本体の更新ごとに記述が変わってたりしてたら動かないとかよくある。まぁ今回のスマホでシェアボタン押しても意味ない事件はほんとよくわかんないんだけどね。

そのほか、自分で組むから理解できる。改変も容易。そんで、CMSとかも別に選ばない。

デメリット

絶対重い。webの読み込み速度が落ちる。閲覧者が減る可能性大。よろしくない。

あとこれはエンジニアあるあるだと思うけど、jQueryってやっぱりデザインサイドの言語だと思っているので、そういうSNSボタンのリンクにurl持ってくるとかそういうことをしたくない。なので今まですごく嫌がってたけど、動かないよりずっとマシなので仕方なく実装することに。

早速コード公開

これはあくまで一例なので、コードをコピペしたら終了！とはいかないかもです。

html

<div class="share">
<a href="" target="_blank" class="twitter-button" data-via="ユーザー名" data-url="ここにパーマリンクを入れてたがスマホ限定で動作しなかった。空欄で良いと思う"  >
Twitter
</a>
</div>

基本のaタグで囲うやつ。ですけどhrefはjQueryで入れるので空っぽにしておきます。なんか違和感…

css(まぁcssなんぞどーでもいいかと思うのでどーでもいいなりのコードはっつけます)

.share a {
    display: inline-block;
    font-size: 14px;
    height: 50px;
    line-height: 25px;
    text-align: center;
    width: 15%;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 5px;
    border-bottom: solid 2px #999 !important;
    -webkit-box-sizing: border-box;
　　-moz-box-sizing: border-box;
　　box-sizing: border-box;
　　-webkit-transition: all .1s;
　　transition: all .1s;
}
.twitter-button{
    background: #55ACEE;
}

ほんとにどうでもいいですね。すみません。

jQuery


function Twittershare(){
  var url = location.href  //URL取得
  var title = $("なんかどこか記事タイトルが表示されるところ、またはサイト名など…").text();
  var titleuri = encodeURI(title); //日本語URLに対応させるためエンコード
  $("a.twitter-button").attr("href", "https://twitter.com/share?url=" + url + "&amp;text=" + titleuri + "&amp;via=ツイートに含むユーザー名");
};

Twittershare();

まず表示ページのURL取得。
タイトル取得(必要ない人はいいんだけどね)
URLをエンコード(日本語URL、いわゆるURIだと認識しないことがある)
aタグのhref内にぶっこむ。

前半でも言ったけど

ってな感じで対応しているので、各々jQueryで取得していくっていう寸法。まぁユーザー名とかは固定で入れたらいいけど。

な？なかなかの冗長っぷりでしょ？

ついでにポップアップ的な感じの別ウインドウで出てくるようにする

通常のシェアボタンは押すとPCだと別ウインドウで出てくる。スマホだとアプリが開く。まぁこれを真似ようというわけ。スマホのアプリが開く挙動はあまり意識しなくても自動でやってくれる…いや、以前の実装ではブラウザ上で開いたなぁ。多分URLの形式がダメだったんだと思う。ともかくこのjQueryの実装ではきっとそんなことに陥ることはないはず。僕がそうだから。

$('a.twitter-button').click(function(){
  var w = ( screen.width-640 ) / 2;
  var h = ( screen.height-480 ) / 2;
  window.open(this.href,"","width=640,height=480" + ",left=" + w + ",top=" + h );
  return false;
});

ボタンを押下するとウインドウサイズを計算してだいたい真ん中に表示されるっていうもの。特に説明はないです…。。。
あ、return falseをつけないとなんか動作しないので忘れずにということだけお伝えします。
ちなみに、この別ウインドウのコードは他にもfacebookやlineのソーシャルボタンにも使えますので同じ処理をしてあげましょう。