サイト制作時に、フェイスブックやツイッター、ラインなどのソーシャル拡散メニューを置くとき、現在のページのURLやタイトルタグやdiscriptionを動的に拡散し、なおかつボタンはオリジナルのボタンにしたいことがあります。
PHPを使えない環境やwordpressでもない環境のとき用に、javascriptとjqueryで対応する方法を記載しました。
↓まずはデモを確認
head内のタグ
まずはhead内にjquery読み込みます。
現在のURLやtitleタグ内やdescriptionを動的に取得するjavascriptを書きます。
facebook用のmata ogも入れておきましょう。
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script> //現在のページURLとタイトルとdescriptionを取得する var url = document.URL; var title = document.title; var description = $("meta[name=description]").attr("content"); </script> <!--Facebook用ogタグ--> <meta property="og:site_name" content="ソーシャルリスト" /> <meta property="og:type" content="article" /> <meta property="og:image" content="images/img.jpg" /> <script> //現在の内容を書き出す document.write( '', '', '' ); </script>
body内で呼び出す
body内で次のように呼び出すと、
アイコン画像を自由にいれられて、現在のページの内容を動的に呼び出すことができるようになります。
<ul> <!--Facebook--> <li> <script> document.write('<a href="http://www.facebook.com/sharer.php?u=' + url + '&t=' + title + '" rel="nofollow" target="_blank"><img src="images/social_facebook.png" /></a>'); </script> </li> <!--ツイッター--> <li> <script> document.write('<a href="http://twitter.com/share?url=' + url + '&text=' + title + '" rel="nofollow" target="_blank"><img src="images/social_twitter.png" alt="ツイッターで拡散する" /></a>'); </script> </li> <!--LINE--> <li> <script> document.write('<a href="http://line.me/R/msg/text/?'+ title + '%0D%0A' + url +'" rel="nofollow"><img src="images/social_line.png" alt="LINEで送る" /></a>'); </script> </li> <!--はてぶ--> <li> <script> document.write('<a href="http://b.hatena.ne.jp/add?mode=confirm&url=' + url +'&title='+ title + '"><img src="images/social_hatena.png" alt="はてなブックマーク" /></a>'); </script> </li> <!--google+--> <li> <script> document.write('<a href="https://plus.google.com/share?url=' + url + '" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="images/social_google.png" alt="google+で共有" /></a>'); </script> </li> <!--Feedly--> <li> <script> document.write('<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F' + url + '" target="blank">Follow on Feedly</a>'); </script> </li> <!--Pccket--> <li> <script> document.write('<a href="http://getpocket.com/edit?url=' + url + '&title='+ title + '" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>'); </script> </li> </ul>
LINEにはtarget="blank"はいれない
LINEの拡散ボタンのaタグ内にtarget="blank"を入れると、スマホで正常にLINE
アプリを起動できなくなります。
LINEの拡散ボタンだけは target="blank"を入れないようにお気をつけください。
URLエンコードが必要な場合
URLエンコードが必要な場合は、URLやtitleタグを取得するタグの下に、
「encodeURIComponent」の関数を使って次のように追記してください
var url = document.URL; var title = document.title; var encodeurl = encodeURIComponent(URL);//追記部分 var encodetitle = encodeURIComponent(title);//追記部分
使うときはHTML内のjsで「title」と「url」と呼び出していた部分を、次のように書き換えればOKです。
<!--LINE--> <li> <script> document.write('<a href="http://line.me/R/msg/text/?'+ encodetitle + '%0D%0A' + encodeurl +'" rel="nofollow"><img src="images/social_line.png" alt="LINEで送る" /></a>'); </script> </li>参考:JavaScriptでURIエンコード(URLエンコード)を行う
ポップアップウィンドウはスマホ向きでない
今回のソースでは、google+とPccketで「window.open」を入れてポップアップが開くようになっています。
この場合、スマホだと画面をはみ出してしまい、とてもかっこ悪くなります。
ポップアップの画面のサイズをスマホあわせるように調整するか、ポップアップ自体やめてしまったほうがいいかもしれません。
規約は自己責任で
各ソーシャルサービスでは、画像は公式のもの以外利用不可とか、規約があるかと思いますので、自己責任でお願いします。
facebookのog imgは絶対パスで
facebookのogのimgは絶対パスで書きましょう。
サイトルートのトップだけは相対パスでも表示できたりしますが、下層ページでは絶対パスでないと表示できません。
facebookのogをjsで動的にすると警告になる
facebookのogですが、↓こちらで正常に動いているか確認できます。
Debugger|facebook
今回のjavascriptでogを動的に表示する方法ですと、一応表示はできるんですが、デバッガーでは「警告:なんか書き換えしたりしてるみたいだけど、内容を固定して書いてください」という警告がでます。
PHPを使えない環境の場合、javascriptでは警告ださずにできないのかなー。
↓サンプルのコードはこちらでダウンロードできます
まさに探してました!
オリジナルアイコンについて、解説しているサイトはたくさんありましたが、それプラスα現在のページのURLやタイトルタグでtweetさせる方法を解説しているサイトがなかなかなく、やっとこちらのサイトにたどり着きました。
DEMOページまで用意されていると、javascriptに弱いものとしては、非常に参考になり助かります。
ありがとうございました。