SNS拡散ボタンをオリジナル画像で現在のURL・タイトル・descriptionをjavascriptで表示する方法

2014/10/16

by sayo

Tag :

ソーシャルリスト

サイト制作時に、フェイスブックやツイッター、ラインなどのソーシャル拡散メニューを置くとき、現在のページの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では警告ださずにできないのかなー。

↓サンプルのコードはこちらでダウンロードできます

参考:SNSボタンをオリジナルデザインにする方法

関連するコンテンツ

コメント

  1. ブースカ☆

    まさに探してました!

    オリジナルアイコンについて、解説しているサイトはたくさんありましたが、それプラスα現在のページのURLやタイトルタグでtweetさせる方法を解説しているサイトがなかなかなく、やっとこちらのサイトにたどり着きました。

    DEMOページまで用意されていると、javascriptに弱いものとしては、非常に参考になり助かります。

    ありがとうございました。

ブースカ☆ へ返信する コメントをキャンセル

この記事と同じ に関する記事です。お役に立ちそうなのはどれですか?

気になる単語をサイト内検索できます

この記事と同じカテゴリ: javascript・jquery

>> 記事一覧を見る(TOPページ)