各SNSのシェアボタンの仕様一覧 - I.N.G
今やBlogに記事ごとのシェアボタンは普通に存在していますが、Jekyllは最小限のものしかないので、自分で設定しないといけない。プラグインを用意してもいいのだけれど、各社のSNSのAPIがどうなっているか気になったのでまとめた。 Twitter: Tweet Button | Twitter Developers Facebook: シェアボタン - ソーシャルプラグイン Google Plus: Share | Google+ Platform for Web | Google Developers Tumblr: 共有ボタンドキュメンテーション | Tumblr Pocket: Pocket for Publishers: Pocket Button Documentation Pinterest: Pinterest Developers Hatena: はてなブックマーク
Gmailの署名にソーシャルボタンをつけよう
文字のリンクよりスタイリッシュでいいかも。 メールの最後の署名どうしてますか？ テキストだけでもいいんですが、Gmailの署名ではソーシャルボタンをつけて、それぞれのアカウントへ飛ばすことができます（SNSだけでなく、なんの画像、リンク先もOK）。設定は数分で終わるのでやってみてもいいかもしれません。 まずはソーシャルボタンの画像をGoogleドライブへアップロードします。自作の画像でもいいですし、フリーの素材からもらってきてもいいです。Googleドライブ内にソーシャルボタン画像用のフォルダーを作って、新規からファイルのアップロードで画像をアップします。 画像の準備ができたら、Gmailに戻りましょう。右上の歯車マークをクリックして、設定を選びます。全般タブの真ん中くらいにある署名へ移動してください。画像を挿入のボタンがあります。これをクリックして画像を入れてください。画像が表示されない
WordPressでTwitter、Facebook、はてブなどのオリジナルソーシャルシェアボタンを実装するコード
やろうやろうと思いつつめんどくさいからいいやと放置していた記事直下SNSシェアボタンのオリジナルデザイン化。 Twitterの仕様変更でシェア数が吐き出されなくなり、これまでの公式ボタンではサイズが揃わないし、いい加減実装するか！と一念発起して対応してみました。 準備 まずは準備としてWordPressプラグインのSNS Count Cacheをインストール。これはSNSのCountをCacheしてくれるものです。すごいですね。 まぁつまりFacebookとかはてブのシェア数を数えてくれるやーつです。なんかそのうちTwitterも対応してくれないかしら。 追記：Twitterのツイート数の表示も実装いたしました。 記事数によって時間は違いますが各記事のシェア数がキャッシュされていきます。ほんだら次の作業、いよいよ記事直下のシェアボタンを実装しましょう（別にキャッシュしてる途中に作業してもO
jQueryでシェア数を取得し表示を高速化！WordPressに自作バルーンボタンを作成する全手順まとめ
自作バルーンボタン作成の主な手順 自作ボタンの作成に必要となる主な手順は以下です。 アイコンフォントファイルなどの準備 必要なライブラリファイルの呼び出し（コピペ） JavaScriptファイルの作成（コピペ） functions.phpファイルに関数の追加（コピペ） ボタン用テンプレートファイルの作成（コピペ） バルーンシェアボタンのスタイル設定（コピペ） header.phpファイルからJavaScriptの関数を呼び出す（コピペ） とこんな感じになります。ほとんどコピペなので、カスタマイズはそこまで難しくないと思います。 一応どんなテーマにもカスタマイズ出来るので、今回は「Twenty Ten」テーマに取り付けてみたいと思います。 アイコンフォントファイルの準備 まずは、シェアボタンに各種ソーシャルボタンのアイコンを表示させたいので、アイコンファイルをダウンロードします。 まずは以下
サイトの高速化に！Twitter、Facebook、Google＋、はてブのシェア数をJavaScriptで非同期に取得する方法まとめ
僕は最初、この方法でシェア数を取得してカスタマイズしようと思っていたのですが、いろいろテストしてみて以下のような難点がありました。 ページと同時に呼び込まれるので取得が遅いと表示も遅い Facebookのシェア数の取得が特に遅い PHPのfile_get_contents()、curl_init()、curl_exec()あたりは、Wordpress的には非推奨な関数（テーマチェッカーなどで怒られる） サーバーによっては使えない（file_get_contents()関数とかは、サーバーのphp.iniファイルで外部ファイルを開く設定がオンになっていないと使用できない） とりあえず、ちょっとテストしただけでこれだけの難点があったので、自作のテーマに取り入れることはできませんでした。 その点、JavaScript（jQuery）で取得すると以下のような利点があります。 ページが読み込まれてか
WordPressにシェア数つきオリジナルSNSボタンを実装しよう！取得から表示までの流れを紹介 - Design Color
【2015年6月11日 追記】file_get_contents()の使い方に注意しよう 重要なことでしたので追記します。こちらの内容はコメントにて教えていただきました。教えていただかなかったら全く知らない事実でした…本当にありがとうございます！ file_get_contents()は「allow_url_fopen =off」のサーバー環境では動いてくれない APIを取得する際に使用しているfile_get_contents()というPHPの関数には注意が必要です。まず、その関数が動かない環境があるということ。file_get_contents()を使うにはサーバーの「allow_url_fopen」の設定をONにする必要があります。もし設定がOFFになっている場合はfile_get_contents()が使えません！ ONにする方法としては以下の記事がわかりやすくまとめてくれていまし
コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life
この記事は9/30より不具合が発生しますので、 www.yukihy.com こちらから設定をお願いします。 以下の説明部分を表示する 5/28追記１：シェア数が表示されない不具合が発生しております。現在検証中です…すみません（汗）と言いつつ僕のは表示されるという 5/28追記２：シェア数が表示されない不具合を解消しました。具体的にはコピペコード１を修正しています。お手数ですがもう一度設定をお願いします。 6/7追記３：元々記事にも書いていましたが、2015/8/30より新しいYahoo Pipesをつくることができなくなるそう（参考：Yahoo Pipes Blog - Pipes End-of-life Announcement）それに伴い、「Google+」と「Pocket」のシェア数が表示されなくなります。 6/29追記４：HTML（４と６）でエラーが発生していたので修正しました。
ソーシャルボタンを自作に変更
B! 40 0 0 0 ソーシャルボタンをそれぞれのサービスのオフィシャルな物を使ってましたが、 それぞれ見た目が余り揃ってなくて良くないのと、 幅の取り方とかがCSSだけで行うのも難しくて微妙にずれてたりしました。 それと読み込みにもそれなりに時間がかかります。 ということで、画像とかを呼んでこなくて済むように適当に 自分で作ってみましたというよくある話。 作り方 Octopress用に追加 作り方 それぞれのサービスのAPIを使ってカウント数を取ってきます。 Twitterなら 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var url = encodeURI(location.href); socialData = { type: 'GET', dataType: 'jsonp', url: 'http://urls.api.twitter.com/1/urls
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <
【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ
最近よくお問い合わせをいただく当ブログに設置しているオリジナルのSNSボタン8種類の全コードをご紹介します。コードはコピペでOK！STINGER5への設置方法も説明します。 シェアボタンのコードはツイッター、フェイスブック、グーグルプラス、はてなブックマーク、LINE、Pocket、RSS、feedlyの8種類です。RSSはSNSなのか!?という突っ込みはスルーでお願いします。 【WordPress】オリジナルSNSボタン設置方法！スマホ用シェア数つきSNSアイコンも公開 – ゆめぴょんの知恵 こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。 プラグイン【SNS Count Cache】でシェア数を取得する プラグイン【SNS Count Cache】を利用するとシェ
全8サイト！SNSのカウント取得方法まとめ 2014年6月版
ソーシャルシェアボタンをオリジナルデザインにしたかったり、いいね！数のデータを元にランキングシステムなどを作りたい場合に役立つ「ソーシャルカウントの取得方法」をまとめました。取得方法はサーバーサイド(PHP)、クライアントサイド(Javascript)の両パターンを取り上げています。よろしければ参考にしてみて下さい！なお、Twitterのカウントは2015年11月20日以降、取得できなくなりました。
【WordPress】オリジナルSNSボタン設置方法！スマホ用シェア数つきSNSアイコンも公開
完成イメージ：SNSシェア数つきソーシャルボタン ソーシャルボタンとして、ツイートボタン、Facebookのいいね！やシェアボタン、Google+1ボタン、はてなブックマーク（はてブ）ボタンに、feedlyやLINEを加えて表示しています。 このブログのソーシャルボタンは日々改良しているため、現時点(2014.9.4)のものを紹介します。 トップページ/ホームや、カテゴリー一覧などでは、下のようにSNSアイコンとカウンタ数を表示しています。 個別投稿記事では、記事上にシンプルなフラットデザイン風のソーシャルボタンを表示しています。もちろんSNSシェアのカウント数付きです。バイラルメディアの普及？により、オリジナルのSNSボタンもクリックされやすくなったと思います。 スマホサイト用のデザインでは、記事上も記事下にも自作のソーシャルボタンを設置しています。スマホサイトではPC以上に表示を高速化
Wordpressのオリジナルシェアボタン簡単作成。ソースコード有り
こんにちは、太郎です。 先日、オリジナルのシェアボタンを導入したらアクセスが2倍に増えた という記事をエントリーしたのですが、予想外にシェアをしていただきました。 はてブに関しては過去最高のシェア数でした。 なんでこんなにシェアされたのかなと思い、シェアしていただいた方に直接伺ってみると、 @okachan_man 了解です。 じゃあダウンロードできるようにして、タイトルにWordPressを入れて記事作って見ます！ — 周太郎 (@syuty) 2014, 7月 18 もっとシェアされるためのアドバイスを伺ったので、今回はソースコードを公開しようと思います。 ※初めはシェアしていただいた方だけへの特典だったのですが、その方に関しては細かい質問にも対応しますのでご了承いただけると幸いです。 html htmlのコードです。 htmlファイルの表示したい場所に追加してください。 投稿の下に差
Ridiculously Responsive Social Sharing Buttons
Love them or hate them, social sharing buttons appear to be with us for a while. It seemed like we were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container. RRSSB is built with Sass, so you can easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support. Add or remove icons
【WordPress】自作ソーシャルボタンを設置する際のポイント | MasterPeace21
前回、facebook,twitter,hatebuのソーシャルカウントを取得する方法を紹介しました。これは、カウントを取得するだけで、そこからシェアすることは出来ませんでした。今回は、シェア機能を付け加えてみたので、その際のポイントを紹介したいと思います。 なぜ自作にしたのか？ 純正のソーシャルボタンって結構重たくないですか？記事一覧ページにソーシャルボタンを1つずつ設置してしまうと、読み込みに支障が出るなと思ったのですます。ただ、それだけ。 今回は、設置する際のポイントという事でデザイン、カウントの取得は割愛させていただきます。以下を参照してくれればとおもいます。 Tweet数、いいね数、はてブ数をjQueryのAjaxで取得する方法。 | MasterPeace21 下準備！ まず、シェアする時には基本的にはURLにリンクとタイトルをパラメータとして入力するのですが、その際に日本語な
SNS投稿ボタンをオリジナル画像にするためのカスタマイズ。 | WebScripter.jp
いまやFacebook、Twitter、mixiなどSNSへの投稿ボタンをサイトに設置するのが当たり前になっていますね。投稿ボタンは各サービス側で用意されていて設置も簡単ですが、時にはそのデザインがサイトのイメージに合わないことも。実際、オリジナルボタンでお願いされるケースもあるのでこの際まとめてみました。 投稿ボタンのカスタマイズはすでに他のサイトでも紹介されていますが、作業する度に調べるのも面倒なので、自分へのメモも兼ねて紹介します。なお、ここで紹介する方法は、どのボタンもクリックで別窓が開く仕様になっています。また「俺にカウントなんて必要ないぜ」というワイルドな方にピッタリです（笑） 投稿ボタンの設置 Facebook Twitter Google+ mixi Pinterest はてなブックマーク Evernote Facebook 言わずと知れたFaceook。「いいね！」と「シ
[WordPress] 標準ソーシャルボタンを使わずに、共有するためのリンク指定 | rakuishi.com
各 SNS サイトから入手できるソーシャルボタンは、次の記事の方法を使えば比較的綺麗に並べることができます。→ 最小限の記述でソーシャルボタンを綺麗に並べる · rakuishi.com ですが、標準的なソーシャルボタンには以下のデメリットがあります。 各サービス間でボタンサイズが異なるため、見た目が統一されない 読み込みに時間がかかるため、ページ読み込み完了までのボトルネックになりやすい 代わりにただのテキストリンクにして同じように共有することができれば、上記の問題は無視できます（が、数字を気にしたい場合には向いていません）。この記事では、Twitter, Facebook, Pocket をテキストリンクから共有・後で読むためのコードを紹介します。 ※ 記事のタイトルと URL を取得するため、WordPress の記事ループ中に記述します。具体的には、<? if (have_p
![[WordPress] 標準ソーシャルボタンを使わずに、共有するためのリンク指定 | rakuishi.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/927c0c4b1e66fd219c5b0b8b2ec5dd63300e8740/height=288;version=1;width=512/https%3A%2F%2Frakuishi.com%2Fassets%2Fimages%2Fog.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kyco/jquery.kyco.easyshare: The simplest way to manage custom social media buttons for Facebook, Twitter and Google+.
Twitter,FB,Lineなどへのシェアを実現するシンプルなjQueryプラグイン「SNS Share」:phpspot開発日誌
レスポンシブかつフラットなソーシャルボタンを実装できる「rrssb」:phpspot開発日誌