こんにちは、宮本です！

先日クランチタイマーはクラウドファンディング情報サイト「FUNDING HEADLINE（ファンディングヘッドライン）」をリリースいたしました！

中国新聞や広島経済レポートでも掲載していただくなど、おかげさまで多くの方に閲覧いただいております。

自分達が開発したサイトや書いた記事を見ていただけるというのはやはり嬉しいことですね！

 

さて、今回リリースした「ファンディングヘッドライン」のような情報発信サイトにもはや欠かせないのが、Facebook、Twitter、Google+、はてなブックマークなどのソーシャルメディアボタンですよね。

読んでいただいた方にソーシャルメディアを使ってシェアしていただき、どんどん記事が拡散されていく、その流れを作るのに必須なものです。

また今はスマートフォンで閲覧する方が多いので、Lineで送るといったこともあります。

 

しかし、それらは各ソーシャルメディアから提供されているAPIを使って出すこともできますが、表示が遅かったり、デザインが自由ではない等の不便さがあります。

 

そこで今回は実際にファンディングヘッドラインの実装にも使っている、HTMLの「aタグ」と自分で作った画像を使って簡単にソーシャルメディアボタンを実装する方法をお伝えします。

Facebookでシェアするボタンの実装

リンクの飛び先：http://www.facebook.com/sharer.php?u=(URL)

 

○固定（静的）ページのシェアボタンを実装する場合

 

○WordPressの記事ページのシェアボタンを実装する場合

 

Twitterでツイートするボタンの実装

リンクの飛び先：http://twitter.com/share?url=(URL)&text=(タイトル)

 

○固定（静的）ページをツイートするボタンを実装する場合

 

○WordPressの記事ページをツイートするボタンを実装する場合

 

はてなブックマークへブックマークするボタンの実装

リンクの飛び先：http://b.hatena.ne.jp/entry/(URL)

 

○固定（静的）ページをブックマークするボタンを実装する場合

 

○WordPressの記事ページをブックマークするボタンを実装する場合

 

Google+で登録するボタンの実装

リンクの飛び先：https://plusone.google.com/_/+1/confirm?hl=ja&url=(URL)

 

○固定（静的）ページを共有するボタンを実装する場合

 

○WordPressの記事ページを共有するボタンを実装する場合

 

Pocketにアイテム追加するボタンの実装

リンクの飛び先：http://getpocket.com/edit?url=(URL)

 

○固定（静的）ページをブックマークするボタンを実装する場合

 

○WordPressの記事ページをブックマークするボタンを実装する場合

 

Lineで送るボタンの実装

※LINEがインストールされている場合のみアプリが起動します。

リンクの飛び先：http://line.me/R/msg/text/?(タイトル)(URL)

 

○固定（静的）ページをブックマークするボタンを実装する場合

 

○WordPressの記事ページをブックマークするボタンを実装する場合

 

まとめ

いかがでしたでしょうか。オリジナルのソーシャルメディアボタンは簡単に実装できますので、情報サイトを作ったとき、もちろん個人のブログにも是非参考にしてみてください！

 

次回は各ソーシャルメディアでシェアされた数（facebookeのいいね数やTwitterのツイート数）の取得方法について紹介したいと思います！