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> <
はてブ数1000越え記念に、はてブカウンターの使い方を調べた | Creazy!
いつの間にかブログ全体の被はてブ数が1000usersを越えていました。 こんなに早く越えるとは思っていませんでした。 どう考えてもこのエントリーのおかげです。 ・ Macのネット環境高速化「dolipo」はナゼこんなに速いのか 改めて、ブクマしてくれたみなさんと、dolipoの作者drikinさんにドリドリ感謝です。 さて、そんなカウンター画像を設置しようとタグの貼り方を確認してたら、意外な使い方を発見したので書いときます。（オレが知らなかっただけかもだけど、新鮮な気持ちでGo!） まずは基本のはてなブックマークカウンターの設置方法 貼り方は公式のヘルプに書いてあります。 はてなブックマークカウンターは任意の”ウェブサイト全体”の被ブックマーク数をカウンター画像として表示する機能です。自分の日記やブログが全体で何件ブックマークを獲得しているかを画像カウンターでお知らせします。 via:
櫻田潤 | インフォグラフィック・エディター
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
og:image 徹底解説、意味も設定画像スペックもこれでばっちり！ 2024年1月更新-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
この記事のポイントは… 主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイキャッチ画像の概要と設定方法を詳しく紹介する記事です。 アイキャッチ画像（サムネイル画像やOGP画像とも呼ばれます）とは、サイト内やSNSのタイムライン上に記事URLと共に流れる記事の顔となる画像のこと。 アイキャッチ画像を利用するために必要な知識、画像の仕様と非デザイナー向けの作成方法、アイキャッチ画像をHTMLのメタ要素OGP内で指定する方法を記事内で詳しく解説しています。 この記事は、2024年01月12日に更新しました！ ウェブ記事のアイキャッチとなるタイトルを載せた画像、ソーシャルメディア上で、良く見ませんか？まさにこの文章のすぐ上にある「徹底解説」と書かれた画像も、アイキャッチ画像のひとつです。 この記事は、主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイ
ソーシャルボタンなんて押せれば見た目なんてどうでもいいじゃない – No.1026
ウェブサイト高速化勉強会に行って来ました 内容に関してはまとめてくださってる方がいるのでその辺参照。 2012/09/29 ウェブサイト高速化勉強会 #tnmk0929 – Togetter ウェブサイト高速化勉強会に参加してきた #tnmk0929 – Shinya’s Daily Report ソーシャルボタンなんか直書きしちまえよ というわけで、デフォルトで書いてしまうと非常に重い高速化を妨げるソーシャルボタン。 非同期にすればいいという話を耳にしたり、先に画像だけ出して後からカウント等を呼んでくるようなサイトを見かけたりします。 No.1026はというと、シンプルイズベスト。カウント？いらない。画像？いらない。 押せて動けばいいじゃない。 というわけで、割りと紹介しつくされた感があるコードですが、一応書くとNo.1026ではWordPress使ってるので↓な感じです。 気づいてない
[JS]超軽量で設置も簡単！Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount
デモページ：カウント付きで縦並び SocialCountの使い方 使い方のステップは、2つ。 これ以上ないくらいに簡単です。 Step 1: 外部ファイル スタイルシートとスクリプトを外部ファイルとして設置します。 まずは、スタイルシートをhead内に。 <head> <link rel="stylesheet" href="../src/socialcount.css"> </head> アイコンを使用する場合は、もう一つ外部ファイル（socialcount-icons.css）を加えます。 続いて、スクリプトをページの下の</body>の上に。 ... <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="../src/socialcount.js"></script> </bod
http://www.tanyavarma.co.in/
Notice of Termination of AddThis Services. What’s Changing? As part of a periodic product portfolio review, Oracle has made the business decision to terminate all AddThis services effective as of May 31, 2023. Key Dates Existing AddThis users can expect that after May 31, 2023: the user must immediately cease its use of AddThis services, and promptly remove all AddThis related code and technology
5KBの読込でソーシャルボタンの実装が簡単にできる「Socialite.js」:phpspot開発日誌
Socialite.js 5KBの読込でソーシャルボタンの実装が簡単にできる「Socialite.js」 jQuery等に依存せず、単体で動作するあたりが特徴です。更に、ページ内に多数のソーシャルボタンを置くと重くなってしまいがちですが、スクロールと共にシェア数を読み込めるようなデモも用意されており、一気に読み込ませたくないケースでも使うことが可能。 残念ながら日本のサイトには対応していません。 関連エントリ 様々にCSSでデザインされたソーシャルボタンセット Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」
jQueryで複数ユーザーのtwitterタイムラインを表示する「A jQuery Twitter Ticker」
その名の通り、JavaScriptライブラリのjQueryでtwitterタイムラインを表示します。 単一ユーザーというのは多くありましたが、A jQuery Twitter Ticker -- Tutorialzineは複数ユーザーにも対応しています。 またデザインもキレイなので、使いやすいかもしれません。 sponsors 使用方法 A jQuery Twitter Ticker -- Tutorialzineからファイル一式をダウンロードします。 <link rel="stylesheet" type="text/css" href="demo.css" /> <link rel="stylesheet" type="text/css" href="jScrollPane/jScrollPane.css" /> <script type="text/javascript" src="
Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです
FacebookやらTwitterやらはてなやらmixiやら何やらソーシャルボタン付けたいけれど、 角丸とかフォントとか大きさがまちまちだし幅とるしカウント数いらないし… 記事の下とかにあるならいいけど、 これが記事の上にあったりすると微妙に嬉しくない。 なんとか、 って具合に、アイコンだけ並べておけないだろうか。と思ったわけです。 分けて書こうと思ったけど、あんまりマメ子じゃなくてすぐ忘れるので、一気にダーッとメモします。 ≫Facebookのシェアをスマートに！ ≫ボタンをオリジナル（自作）にする簡単なカスタマイズ ≫FacebookシェアのオリジナルボタンをMovabletypeに入れる。 ≫Facebookに投稿するコンテンツの見せ方にこだわる ≫OGPのmetaタグをMovableTypeに入れてみる ≫テストユーザーで投稿テストしてみる ≫Twitterのボタンをオリジナルにす
【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） [C!]
MovableType 小技集 【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） ソーシャルメディアの各サービスがこぞって「いいね！」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思います。 目次（兼ショートカット） Twitter「Twitterボタン」 Facebook「Share」「Like（いいね！）」 mixi「mixiチェック」 GREE「Social Feedback（いいね！）」 Evernote「Site Memory（Clip）」 Google+「＋１」 Tumblr「Share on Tumblr」 Pinterest「
![【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） [C!]](https://cdn-ak-scissors.b.st-hatena.com/image/square/81e0b24df3879e2c544ed147f55618364bfffef0/height=288;version=1;width=512/https%3A%2F%2Fcreazy.net%2Fwp%2Fwp-content%2Fuploads%2F2017%2F12%2F6943392493_78691ae59d.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなコードで生成するジェネレーター
http://indigonote.com/2011/05/17/javascript-twitter-button/
「LINEで送る」ボタンを手軽に設置できるようになりました | LINE公式ブログ