吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

シェアボタンの設置方法(オリジナル画像用)

2014年4月19日 / category : lab, その他-lab

SNSのシェアボタン、たくさんありますよね・・・。
なので、まとめてみました。

facebook

HTML
<head>
<meta property="og:title" content="タイトル">
<meta property="og:description" content="紹介文">
<meta property="og:image" content="サムネイル画像URL">
<meta property="og:url" content="記事URL">
<meta property="og:type" content="ページタイプ">
</head>
<body>
<a href="http://www.facebook.com/sharer.php?u=記事URL">
<img src="images/btn.png">
</a>
</body>
</html>

DEMO

シェア画面をポップアップさせたい場合は、下記のjsコードをa要素に追加してください。

HTML
onclick="window.open(this.href, 'snswindow', 'width=550,
height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"

twitter

HTML
<a href="http://twitter.com/intent/tweet?text=定型文&url=記事URL&hashtags=ハッシュタグ&via=ユーザー名">
<img src="images/btn.png">
</a>

DEMO

google plus

HTML
<html>
<head>
<meta property="og:title" content="タイトル">
<meta property="og:description" content="紹介文">
<meta property="og:image" content="サムネイル画像URL">
</head>
<body>
<a href="https://plus.google.com/share?url=記事URL">
<img src="images/btn.png">
</a>
</body>
</html>

DEMO

hatebu

HTML
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=記事URL&title=タイトル">
<img src="images/btn.png">
</a>

DEMO

tumblr

HTML
<a href="http://www.tumblr.com/share/link?url=エンコード(記事URL)
&name=エンコード(タイトル)
&description=エンコード(紹介文)">
<img src="images/btn.png">
</a>

DEMO

pinterest

HTML
<a href="//jp.pinterest.com/pin/create/button/?url=エンコード(記事URL)
&media=エンコード(サムネイル画像URL)
&description=エンコード(紹介文)">
<img src="images/btn.png">
</a>

DEMO

とりあえず以上!まだまだSNSボタンあるけど・・・