各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなコードで生成するジェネレーターTwitter, Facebook, Google+, Pocketなど、各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなHTML/CSSのコードで生成するジェネレーターを紹介します。
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
SNSボタンをオリジナルデザインにする方法
普通に設置する場合 普通のテキストリンクとして設置する場合には以下のコードを使用します。CSSは適宜調整して下さい。 ※FacebookやGoogle+はogp設定をしていないと正しくシェアできません。opg設定については下記参考サイトが分かりやすいです。 facebook いいねボタン設置時のOGP設定方法♪ ｜ フリーランスWebデザイナーの仕事 Twitter ツイートボタン <a href="http://twitter.com/share?url=共有したいＵＲＬ&text=ツイート内に含める文字&via=ツイート内に含まれるユーザー名&related=関連アカウント">ツイート</a> Facebook シェアボタン <a href="http://www.facebook.com/share.php?u=共有したいＵＲＬ" onclick="window.open(this.
ブログのソーシャルボタンをオリジナル画像にしてみた！ - みずかるちゃー
ブログのソーシャルボタンをオリジナル画像にしてみた！どうも！記事を書くよりブログ整備のほうが楽しい瑞佳(@mizuka123)ですｗ いったいなんのためのブログなのやら･･･ｗ そんなことよりソーシャルボタンのオリジナル化ですよ！ ありきたりなソーシャルボタンから変えてみるとブログの印象が変わって見えますよね． ソーシャルボタン？ まずはソーシャルボタンとはなんぞや？ ソーシャルボタンとは、ブログやニュースサイトなどのウェブサイトからSNSやソーシャルブックマークなどのソーシャルメディアに情報を入出力するために設置される、ボタン型のインターフェースのことである(Wikipedia) はいそこっ！「うわっ，少ねっ！」とか言わないｗ ソーシャルメディアを使う人が増え，影響力が増したことから最近のブログやニュースサイトには当然のようについていますね． このブログは見る人がまだ少ないのでこんなもん
複数のソーシャルボタンを設置し動的に呼び出す - という話
サイトシェア用と記事シェア用に、同じ種類のソーシャルボタンを置くことになった時のメモ。 ソーシャルボタンは一つ置くだけでかなりレンダリングに時間がかかるので、記事シェア用は静的に設置し、サイトシェア用は動的に呼び出すようにした。 動的に呼び出すのはTwitter,Facebook,Google,はてブの4つ。 まずは普通に記事シェア用のボタン群を各SNSの説明に書かれている通りに設置する <!-- twitter --> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'htt
ウェブサイトの画像にAmazonのアフィリエイトリンクを簡単に設定できる「Amazon Publisher Studio」の使い方
ウェブサイトの画像にAmazonのアフィリエイトリンクを簡単に設定できる「Amazon Publisher Studio」の使い方を紹介します。 １．完成イメージ まず最初に、「Amazon Publisher Studio」でウェブサイト上の任意の画像に設定したアフィリエイトリンク（赤枠部分）です。 このリンクにマウスをポイントすると、次のように商品情報が表示されます。 ということで、「Amazon Publisher Studio」の使い方を紹介します。 「Amazon Publisher Studio」を利用するにはサイトの登録が必要なので、その手順から説明します。 なお本エントリーの説明では、Amazonアソシエイトの登録が事前に完了していることが前提です。 ２．「Amazon Publisher Studio」へのサイトの登録 アソシエイト管理画面の上部メニューにある「Publi
レスポンシブWebデザインでもPC表示切替ボタン｜Webデザイン｜開発ブログ｜株式会社Nextat（ネクスタット）
どうやら世の中には「スマートフォン向けサイトはPC向けサイトより情報が少ないのではないか？」と考えるユーザが一定数いるようです。 ※有意な数のアンケートを取ったわけではないので、割合はわかりませんが。 かく言う私も、スマートフォン向けのサイトで情報を探すときにPC版表示に切り替えたいと思うことはよくあります。 モバイル向けのページをhttp://example.com/s/などのように別ページとして表示している場合はリンクを貼れば済む話です。 しかし、レスポンシブWebデザインを採用している場合は同じようにはいきません。 せっかくレスポンシブWebデザインを採用しているのだから、PC版をわざわざ表示することはないというのが制作側の本音なんですけどね。 前述のスマホでは情報が見られないかもしれないと思っているユーザのために、以下のPC向け表示もどきを導入するのも悪くはないかと思います。 方法
Feedly購読ボタンを設置する
Feedly購読ボタンを設置する方法を紹介します。 完成イメージ Feedly購読ボタンを設置することで、ウェブサイトやブログを訪問した閲覧ユーザーが簡単にFeedlyに登録できるようになります。 他のブログでもFeedlyボタンの設置方法は結構紹介されているようですが、「feedly button」の作成ページから紹介しているところがほとんどなので、ここではそのページに辿りつくためのリンクから紹介します。 １．設置方法 ログインしている場合は、サイドメニュー下のリンクから一旦ログアウトします。 Feedlyのトップページ右上にある「Publishers」をクリック。 「Add a feedly button to your site」をクリック。 「Build a feedly button」をクリック。 「feedly button」のページにジャンプします 「Step1」で設置したい
Pocketボタンの設置方法
にわかに「Pocketが流行っている」ということで、当ブログにもPocketボタンを設置してみました。 １．Pocketとは 「Pocket」はクラウドブックマーキングサービスです。分かりやすくいえば「あとで読むサービス」で、Pocketのアカウントを取得してURLをクラウド上に保存することで別のPCやタブレット端末などで読むことができます。 Pocket 「Pocket」は老舗サービス「Read It Later」が改名したものです。 ということでPocketボタンの設置方法を紹介します。Pocketのアカウントと取得しなくても設置可能です。 Pocketボタンを設置することで、Pocketユーザーが簡単にブックマークできるようになります。それと同時に自分のブログがどの程度読まれているか知ることができるようになります。 冒頭のスクリーンショットは、当ブログで一番ブックマークが多いと思われ
Googleリーダー廃止も近いのでブログにFeedly登録用のボタンを設置しました。 | ジョナサンブログ
Googleリーダー廃止まであと一ヶ月。 そろそろ乗り換え先を検討されてる方も多いかと思う。 廃止のニュースを耳にしたのは今年の3月だが、その間僕は全く動じる事はなかった。 Googleリーダーが無くなってもRSSリーダーは無くならないと信じていたからだ。 むしろ、どんなサービスが現れるのかとワクワクしていた。 そしてFeedlyという最高のサービスと出会った。 参考：RSSリーダーをFeedlyに変えたら未読がゼロになった話 2013年7月1日まではGoogleアカウントでFeedlyにログインすれば、登録フィードを簡単に移行する事が出来る。 当ブログでも「ジョナサンブログ」をFeedlyで購読するための専用バナーを設置したので、設置方法を紹介しよう。 ブログに「Feedlyで読む」ボタンを設置 Feedlyの公式サイトにPublisher toolsというページがある
Twitter 「Join the conversation ウィジェット」 提供終了
「Join the conversation ウィジェット」 の提供終了に伴い、このウィジェットを設置している方は新版の 「埋め込みタイムライン」 に差し替えをしておきましょうということで、簡単にその設置方法について触れてみたいと思います。 日本語版 Twitter Blog で告知されていますが、去年の 8月に提供開始された Twitter API v1.1 への完全移行 （つまり、API v1.0 の提供終了） に伴い、旧版の Twitter ウィジェット、通称 「Join the conversation ウィジェット」 の提供が 2013年 3月 5日で終了します。 Blog などに設置している方は、今のうちに同様の機能を持った新版の 「埋め込みタイムライン」 に差し替えをしておきましょうということで、簡単に 「埋め込みタイムライン」 の設置方法についても触れてみたいと思います。
WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」
WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」を紹介します。 最近ベータ版がリリースされた「Recommendations Bar」もさくっと表示できました（下のスクリーンショットは空記事のブログで試したものなので何も表示されてなくて正常です）。 １．機能 このプラグインを利用すれば、WoprdPressにソーシャルプラグインを簡単に表示できるようになります。 具体的には次のものが設定できるようです（バージョンは1.0.2）。 Social Publisher（タイムラインやFacebookページへの投稿） Like Button Subscribe Button Send Button Comments Recommendations Bar 以下、設定方法です。 ２．インストール WordPress管理画面
『Facebookのシェアボタンをブログに設置しよう！』
佐渡の洋食屋店長のブログ佐渡の洋食屋店長のマニアックなブログです。 グルメネタは少なく、マニアックなネットTEC的なネタ、佐渡ネタが豊富なブログです。 え？いいね！ボタンがあるから要らないって？ いやいや、違うんですって・・・Facebookのシェアボタンにはシェアボタンのいい所があるんですよ。 例えば、このアメブロにいいね！を押してくれた方のウォールを見てみましょう。 こうなりますよね。 OpenGraphProtocol（オープングラフプロトコル）を設定していないと画像サムネイルが選べないのです。 OGP（オープングラフプロトコル）についての記事はこちら。 ですが、シェアボタンならこういうことも出来るんです！ ほらね？同じ記事ですが、サムネイルがわかりやすく表示されましたね。 これ、実際使ってみるとひじょ～～～～～～～に便利です。 デメリットをあげるとすれば、いいね！ボタンはワンアクシ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://inakadenet.com/2299