SNSシェア

オリジナルのシェアボタン設置方法とシェア画面URLをまとめました

オリジナルのSNSシェアボタンを設置

SNSのシェアボタンを設置するのって意外と面倒です。
なので、WordPressを使っている場合はプラグインで設定してしまいます。

が、WordPressを使っていてもシェアボタンをオリジナルの物にしたいという要望ってそこそこあります。

公式のボタンを使えばいいやん!」と言いたいのですが、
そこはお客さんからの要望なので仕方がありません。
で、
そんな場合には、シェア画面のURLに直接飛ばしてしまえば簡単です。

例えば、
Facebookであれば、
https://www.facebook.com/share.php?u=ページURL
へリンクを貼るだけです。

こんな感じです。

<a href="https://www.facebook.com/share.php?u=ページURL" rel="nofollow noopener noreferrer" target="_blank">テキスト</a>
※「テキスト」の部分は各自で変更して下さい。画像に変更してもOKです。

もし、
シェア画面をポップアップで開きたい場合には、
Javascriptで簡単に実装出来ます。

Javascriptコードのサンプルも紹介しておきます。

<script>
<!--
function window_open(linkurl){
window = window.open(linkurl,"","width=700,height=500,scrollbars=yes,status=no,toolbar=no,resizable=yes");
window.focus();
}
//-->
</script>

で、HTML側で以下のように設定すればOKです。

<a href="javascript:void(0);" rel="nofollow" onClick="window_open('http://www.facebook.com/share.php?u=ページURL')">テキスト</a>

※「テキスト」の部分は各自で変更して下さい。画像に変更してもOKです。

これでOKです。
簡単ですね。

SNSはFacebookだけではないので、他によく利用されるSNSシェアのリンク先をまとめておきます。

SNSシェア画面のURL

【Facebook】

https://www.facebook.com/share.php?u=ページURL

もし、WordPressを使っている場合はこんな感じですね。

http://www.facebook.com/share.php?u=<?php the_permalink(); ?>

【Twitter】

https://twitter.com/share?url=ページURL&text=ページタイトル&hashtags=ハッシュタグ

WordPressを使っている場合はこんな感じです。

https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>

【Linkedin】

https://www.linkedin.com/shareArticle?mini=true&url=ページURL&title=ページタイトル

WordPressを使っている場合はこんな感じです。

https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>

【はてなブックマーク】

https://b.hatena.ne.jp/add?url=ページURL&title=ページタイトル

WordPressを使っている場合はこんな感じです。

https://b.hatena.ne.jp/add?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>

【LINE】

https://line.me/R/msg/text/?ページURL

WordPressを使っている場合はこんな感じです。

https://line.me/R/msg/text/?<?php the_permalink(); ?>

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. WP:WordPress(ワードプレス)
  2. 色鉛筆
  3. WP:WordPress(ワードプレス)
  4. WP:WordPress(ワードプレス)
  5. WP:WordPress(ワードプレス)
  6. 文系と理系のメリットとデメリット
  7. 東京駅
  8. 残業
  9. プログラマーになるのに年齢は関係ある?
  10. 年収(収入)

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

ConoHa WING 2周年キャンペーン中

アーカイブ

PAGE TOP