SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
知らないで損してた！ ツイートボタンにdata-relatedを入れるとよい | PLUS1WORLD
このブログには以前からTwitterのツイートボタンを設置していましたが、ひょんなことからツイートボタンを再設置することにしました。 そのタイミングで改めて、ツイートボタンの仕組み（仕様）を確認すると今まで指定してこなかったパラメータに結構な価値があることに気が付きました。 ツイートボタンにdata-relatedのパラメータを指定すると、ツイート後にアカウントのフォローを促す事ができるのです。 ツイート後にフォローを促せる data-related Tweet Button | Twitter Developers Twitterのツイートボタンの仕様は上記のリンクに詳しく書いてあります。 ツイートボタンにパラメータ data-related="アカウント" を指定するとツイート後に指定したアカウントのフォローを勧めることが出来ます。 data-related="アカウント,アカウント２
Feedly. A fast and stylish way to read and share the content of your favorite sites.
Feedly button Build your feedly network and increase your repeat traffic. Step 1: Select your design Cick on the button you want for your blog. If you don't see the design you need create your own using our button kit. Step 2: Insert your feed URL This is the feed that will open on feedly when people will click on the button. Find out how to find you feed URL here. Step 3: Copy and embed the HTML
[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip
Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular Tooltip こちらはクリックで、「扇形に広がるツールチップ」がアニメーションで表示されます。 実装はデモページにも掲載されていますが、下記のようになっています。 HTML !-- content to be placed inside <body>…</body> --> <a class='button ctrl' href='#' tabindex='1'>★</a> <ul class='tip ctrl'> <li class='slice'><a href='#'>✦</a></li> <li class='slice'><a href='#'>✿
pocketのソーシャルボタンがリリースされてたのでつけてみた。 – 林家次男
いやー全然知らなかったです、ボタン、あったんですねぇ。 Pocket Button Pocket ってなあに そもそもですね。ざっくりいうと、あとで読むリストをつくるサービスです。 androidアプリや Pocket Button の設置方法 公式のボタン作るページへ行って3種類の中から選ぶだけ。これ簡単。 ボックスタイプならこうですね。スクリプトはフッターにでも置いとくとさらによいか。 <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a> <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.
Engadget | Technology News & Reviews
The Polaris Dawn crew is back on Earth after a historic mission
LINE Social Plugins
Click here if your browser does not automatically redirect you...
WordPressにプラグイン無しで、ソーシャルメディアを効果的に取り入れるスニペットのまとめ
ソーシャルメディアはインターネットで非常に重要な存在で、あなたのブログのトラフィックにも大きな影響を与えるものです。 ソーシャルメディアの中でも特に影響力のある、Facebook, Twitter, Google+, PinterestをWordPressに効果的に取り入れる有益なスニペットを紹介します。 WordPress snippets to work with social networks 下記は各ポイントを意訳したものです。 Facebookの「Open Graph」を加える Pinterestの「Pin it」ボタンをつける プラグインを使わずに「ツイート」を表示 「Google+」ボタンの設置 「Google+の更新」を表示 「TwitterとFacebookのボタン」を設置 「お気に入りのツイート」を表示 「Twitterでのシェア数」を表示 「TwitterとFaceb
Instagram バッジ試してみた
TechCrunch Japan さんで Instagram が Web サイトなどに設置できるバッジをリリースって記事が上がっていたので早速試してみました。 バッジといっても、Google+ で提供されているような 多機能的な感じではなく、単なる画像とそれを使ったリンク用の HTML が渡されるだけですが、先にリリースされた Web プロフィールページとあわせて、自分の Instagram を色んな人に見てもらう機会を増やすことができそうですね。 Instagramがバッジをリリース―簡単なコードを埋め込むだけでブログやウェブサイトからInstagramのウェブ・ページにリンクが張れる ： TechCrunch Japan バッジ用ソースコードの取得は簡単で、Web 版の管理画面ログインすれば、そこに 「Badges」 という項目があります。Web 版プロフィールページのヘッダメニューか
SNSボタンをオリジナル画像で設置する方法
TwitterやFacebookへのボタンは公式サイトでボタンを作れますが、そのボタンはそれぞれオリジナルのボタンで設置することもできます。 ボタンの仕組みが変わると動かなくなるかもしれませんが、以下の方法で設置できます。今回紹介しているのはTwitter・Facebookシェア・mixiチェック・Google+です。 Twitter コードは以下になります。 <a href="http://twitter.com/share?count=horizontal&original_referer=ページのアドレス&text=ツイートさせたいテキスト&url=ページのアドレス&via=Twitterアカウント" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=
Google +1 をウェブサイトに表示
Documentation You can add and customize the +1 button to meet the needs of your website, such as modifying the button size and load technique. By adding the +1 button to your website, you allow your users to recommend your content to their circles and drive traffic to your site. The +1 button can also improve the time spent on your site by providing recommendations for further reading. Use of the
All about Pinterest
Pinterest is a visual discovery engine for finding ideas like recipes, home and style inspiration, and more. With billions of Pins on Pinterest, you'll always find ideas to spark inspiration. When you discover Pins you love, save them to boards to keep your ideas organized and easy to find. You can also create Pins to share your ideas with other people on Pinterest. You have to meet minimum age re
Facebookの「フィード購読ボタン」をウェブサイトに設置する
Facebookから新しいソーシャルプラグイン「フィード購読ボタン（Subscribe Button）」が2011年12月9日に公開されました。 Introducing the Subscribe Button for Websites 本エントリーでは、フィード購読ボタンの機能と設定方法について説明します。 １．フィード購読について まず、Facebookのフィード購読とは、Facebook上の友達でないユーザーの投稿（フィード）を読んだり、逆に自分の投稿を友達以外のユーザーに公開できる機能です。 例えば、友達でないユーザーのフィードを購読するには、購読したいユーザーのページに表示されている「フィードを購読」をクリックするだけです。なお、ユーザーが購読を許可していなければ、このボタンは表示されません。 フィード購読の基本的な機能については以下の記事を参照してください。 Facebookフ
30 Free Social Media Icon Sets for UI Designers – Speckyboy
The icons, glyphs, or logos of popular social media platforms such as Facebook, X, Snapchat, Instagram, LinkedIn, and others, are often used on websites, mobile apps, email campaigns, and YouTube videos to provide users with an easy way to follow and engage with a person, brand or organization on social media. By using recognizable social media icons, you can make it easier to be found and followe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome to nginx!
Loading...
「LINEで送る」ボタン、まずはスマートフォン向けWebサイト・アプリ開発者向けに公開 | LINE公式ブログ
Pressable CSS Buttons | CSSDeck