WordPressで8種ソーシャルサービスに通常リンクからシェアアクションする方法まとめ

先日、自前でソーシャルサービスのシェアボタンの外観のつくり方を書きました。

コピペで利用!Wordpressに自作のソーシャルバルーンボタンを設置するためのスタイル設定方法
先日、自分のサイトテーマで使おうと思ってバルーン型のソーシャルボタンを作ってみました。 ソーシャルサービス純正のバルーン型シェ...

上記の記事では以下のシェアボタンを作成しています。(Pocket、Evernote、feedlyが果たしてシェアになるのか?という問題は置いといてください。)

  1. Twitter
  2. Facebook
  3. Google+
  4. はてブ
  5. Pocket
  6. LINE
  7. Evernote
  8. feedly

ただ、外観だけではページをシェアすることはできません。アンカーリンクなどを適切に設定して、シェアアクションできるようにしなければなりません。

そこで今回は、ソーシャルボタンの独自カスタマイズ用に、通常の<A></A>タグなどで使用する、リンクアクションの書き方をまとめて紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Twitterでツイートする

Twitter

Aタグでツイートするリンクを作成するには、リンクのURL部分を以下のように書きます。

これを、Wordpressで使用するとすると以下のように書きます。

あとは、普通にリンクタグを作ります。

リンク動作は、以下のようになります。

アンカーテキスト部分は、画像やアイコンフォントにしても良いですし、リンク自体のスタイルを変更してボタン形式にしても良いと思います。

以下で紹介するリンク方法でも同様に自由に装飾をしてください。

Facebookでいいね!する

Topic - Facebook

リンクを作成するには、URL部分を以下のようにします。

WordPressで使用するには、以下のように書きます。

リンクタグは以下のようになります。

リンク動作は、以下のようになります。

スタイルなどは自由に変更してください。

Google+で+1する

Google+

+1するためのページに移動するには、以下のようなURLを使用します。

WordPressで使用するには、以下のように書きます。

リンクタグは以下のようになります。

リンク動作は以下のようになります。

はてなではてブする

はてなブックマーク

はてブするためのURLは、以下のようになります。

WordPressで利用する場合は、以下のように書きます。

リンクタグは以下のようになります。

リンク動作は以下のようになります。

ダイアログを表示してはてブする

はてなが公開しているはてブボタンのように、クリックすると、ダイアログが表示されます。

ダイアログからはてブ

公式同様のはてブができるようにするには以下のように書きます。

ダイアログではてブをするには、エンコードしたURLと、エンコードしたタイトルが必要なので、関数化しています。

関数などは、functions.phpなどに書いておくと良いかもしれません。

リンク動作は以下のようになります。

Pocketからページをストックする

Pocket

Pocketを利用するURLは、以下のようになります。

WordPressで使用するには、以下のように書きます。

リンクタグは以下のようになります。

リンク動作は以下のようになります。

LINEでシェアする

LINE

LINEでシェアするURLは、以下のようになります。

WordPressで使用するには、以下のように書きます。

リンクタグは以下のようになります。

リンク動作は以下のようになります。

ラインでシェア

Evernoteでクリップする

Evernote

Evernoteでクリップするには、JavaScriptを使う必要があります。

以下のように記入します。

先頭で、JavaScriptコードが読み込まれ、それをAタグ内で使用しています。JavaScriptの読み込みコードは、<head></head>内などに書いても良いと思います

そして、クリックする範囲をcontentIdで指定したIDで囲みます。page.phpや、single.phpなどにある、the_content()を囲むと綺麗にクリップされます。

詳しい解説は、以前書いた記事を参照してください。

WordpressテーマにEvernoteのクリップボタンを取り付けるカスタマイズ方法
Evernoteて便利ですよね。 あまりにも便利なので、僕も毎日結構な頻度でメモやらスクラップやらで使用しています。 そこでふと昨日...

※現在Evernoteは、アプリの仕様を推奨しているようなので、こういったブログパーツの配布は無くなりました。この方法も、いずれ使えなくなる可能性があるかもしれません。

feedlyで購読する

feedly-logo

feedly購読を利用するURLは、以下のようになります。

WordPressで使用するには、以下のように書きます。

リンクタグは以下のようになります。

リンク動作は以下のようになります。

feedlyを購読

バルーンの作成方法などは、以下に書いてあります。

feedly購読者数付き横型フォローボタンの作り方|コピペで使えるWordpressカスタマイズ
feedlyアイコンの右側に、購読者数が表示される吹き出しのついた、小さなフォローボタンを作ってみました。 Wordpressのタ...

まとめ

こんな感じで、思ったよりもシンプルにシェアリンクを作成することができます。(Evernote以外)

モバイルなどは、ソーシャルサービス純正の重たいシェアボタンを表示するよりは、アイコンフォントなどで簡単なシェアリンクを作った方が、表示も早く、ユーザーにもやさしいと思います。

もし、シェアボタンを自作する方の参考になれば幸いです。(というかまとめといて、後から自分で参考にするために書きました。)

シェアカウント数の取得方法は、以下などに書いています。

Twitter、Facebook、Google+、はてブのソーシャルカウント数をWordpressで直接取得する関数まとめ
昨日、試しに作っているカスタマイズテーマに直接APIなどから取得した、ツイートカウント数などを表示させたくなりました。 それで調べてみ...