読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

過去のツイートをすべて削除したいときにつかうウェブサービス

SNS

黒歴史クリーナー kurorekishi.me ツイートの一括削除ツール! ysklog.net どちらも「Favの保護」や「削除するツイートの期間設定」などができます。 黒歴史クリーナーは名前が良いですね。 両方使ってみましたが、両方ツイート数表示がおかしくなりました。…

ツイッターの自作ツイートボタン(Web Intent)に渡すパラメータは適切に設定しようと思いました。(URL、ツイート本文、ハッシュタグ)

SNS

https://twitter.com/intent/tweet でTwitterの投稿画面を立ち上げてくれることでおなじみのWeb Intentですが、 https://twitter.com/intent/tweet?text=ツイッターの自作ツイートボタン(Web Intent)に渡すパラメータは適切に設定しようと思いました。(UR…

TwitterCards(ツイッターカード)では、ランドスケープ(横長)とポートレート(縦長)でsummary_large_imageのトリミングの位置が変わってくる

SNS

【結論】 横長画像(正方形含む)は、 background-position: center center; background-size: cover; 的な感じでトリミングされ、縦長画像は、 background-position: center top; background-size: cover; 的な感じでトリミングされる。 【考察】 なんでだ…

TwitterCardsのsummary_large_imageのサイズ

SNS

TwitterCardsのsummary_large_imageを設定する際、いつもog:imageと同じサイズ(1200px × 630px)の画像を使いまわしていたのですが、最適なサイズはいくつなのだろう?と思い調べてみました。こちらのページ によると、幅280px以上、高さ150px以上である必…

動的に生成したいいねボタン・ツイートボタンを初期化する

長い人生において、いいねボタンやツイートボタンの初期化のタイミングを自在に操りたいと思うタイミングが1度や2度位あるかもしれませんし無いかもしれません。 今回はそんな時のために初期化の方法をメモしておきたいと思います。 ツイートボタンの初期化 …

フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版(ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...)

SNS

(のちにキャッチーでポップな気の利いた文章に差し替える)いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。 実は 公式ドキュメント に詳しく載っているので気になる方…

Twitterウィジェットの最大幅を520px以上に設定する

SNS

kimizuka.hatenablog.comTwitterウィジェットを制作する際に、width、heightを渡せばその大きさになるのですが、限界もある模様です。dev.twitter.com width 180px 〜 520pxiframeのmin-widthが180pxに、 iframe内のdiv.timeline-Widgetにmax-widthが520pxに…

Disqusを導入してみる

SNS

前回の記事 でDISQUSってなんぞや?と思ったので調査して導入してみました。 Disqusとは disqus.comDisqus(ディスカス)は、Webサイトやブログに中央集権型のコメント機能を提供するオンラインサービスである。2007年に設立され、Big Head Labs Inc. の名前…

はてなブログにおけるOGP調査

SNS

はてなブログにURLを埋め込むときに :embet:cite をつけるとOGPが展開されることがあります。みかづきブログ その3kimizuka.hatenablog.com↑ こんな感じです。今回はその条件とそのときに表示されている情報を調査してみました。 meta情報なし http://jsrun.…

JavaScriptで特定のURLのツイート数(Twitter)とのシェア数(Facebook)を取得する

SNS

どちらも公式のAPIではないので油断はできませんが、現状は下記方法で取得することがでなくはないです。 公式ではないことには注意が必要です。 Twitter count.json停止に伴い動作しなくなりました。 http://urls.api.twitter.com/1/urls/count.json?url=対…

Send Dialog をつかってGIFアニメを送る事ができるボタンをつくる

SNS

Send Dialogdevelopers.facebook.comいつできたのかわかりませんが、 Send Dialog たるAPIをみつけました。Facebookメッセージを送るAPIだようです。 LINEで送るボタン のような使われ方を想定しているのかもしれないですね。こちらのAPIでGIFアニメのURLを…

FacebookのタイムラインにGIFアニメを表示するシェアボタン

SNS

DEMO こちらです。実装方法としては Share Dialog をつかってGIFアニメのURLをシェアしているだけです。Share Dialogdevelopers.facebook.com 【関連記事】TwitterのタイムラインにGIFアニメを表示するシェアボタン - みかづきブログ その3kimizuka.hatenabl…

ツイートボタンの吹き出しの位置をボタンの上にもってくる

SNS

ツイートボタンは こちらのツール で簡単につくることができるのですが、いつの間にか吹き出しの位置を変えるオプションがなくなっているような気がします。(昔はチェックボックスがあったような気が。。。気のせいかもしれませんが)Twitterボタン | About…

Twitterウィジェットを極限までシンプルにする

SNS

Twitterウィジェットを設置する - みかづきブログ その3kimizuka.hatenablog.com以前、Twitterウィジェットのつくりかたをまとめました が、最近data-chrome属性でインターフェイスを変更できることがわかったので追記しておこうと思います。 インターフェー…

TwitterのタイムラインにGIFアニメを表示するシェアボタン

SNS

画像付きツイートの仕様を調べてタイムラインに画像を埋め込んだツイートを投稿するボタンをつくる - みかづきブログ その3kimizuka.hatenablog.comこちらの記事の応用版です。 タイムラインにGIFアニメを表示します。 DEMO タイムライン上ではmp4として表示…

【追記あり】Tumblrをカスタムするための準備を整える

SNS

Tumblrとは Tumblr(タンブラー)は、メディアミックスブログサービス。ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。アメリカのDavidville.inc(現: Tumblr, Inc.)により2007年3月1日にサービスが開始された…

TwitterウィジェットがAndroid2.Xで表示されない

埋め込みタイムライン | Twitter Developers いつのまにかひっそりとサポートを切られていました。FAQ | Twitter DevelopersAndroidは4.Xからサポートとなっております。[ 2015.02.27 現在 ] DEMO

Tumblr API で 投稿内容を取得する その2

SNS

前回Tumblr API をつかって 最新の投稿(しかもTextのみ)を取得しました が、今回は様々な投稿タイプに対応させつつ最新20件を取得するように改修してみました。Tumblr API で 投稿内容を取得する - みかづきブログ その3 Tumblr API で 投稿内容を取得する…

Tumblr API で 投稿内容を取得する

SNS

DEMO Tumblrの投稿内容をAPIで取得して表示するモックを作成しました。最新のものを1件表示し、クリックするとTumblrにジャンプします。 ※ 最新の投稿のタイプがテキストのときのみ動作します。 JavaScript $(function(){ var domain = "surprisewindow.tumb…

JavaScriptでFacebookのシェア数を取得する

http://graph.facebook.com/?id=#{シェア数を取得したいURL} で簡単に取得することができます。 DEMO http://kimizuka.fm のシェア数を取得しています JavaScript $.ajax({ url:'http://graph.facebook.com/?id=http://kimizuka.fm/' }).done(function(evt) …

デフォルトのツイートボタンのツイート本文を動的に差し替える

公式サイト からつくれるツイートボタンはiframeのsrcにツイート本文が埋め込まれます。 なので、iframeのsrcを書き換えてappendしなおすとツイート本文を差し替えることができます。 DEMO HTML <div> <input class="txt" placeholder="シェア文言" /> <a class="btn make">作成</a> </div> <div id="box"> </div>

画像付きツイートの仕様を調べてタイムラインに画像を埋め込んだツイートを投稿するボタンをつくる

SNS

ゴリラのイラストをツイートする - みかづきブログ その3先日投稿したこちらの記事ですが、実はこのような意図がありました。 順を追って説明していきます。 ツイートを行う際に画像を追加すると画像付きのツイートを投稿することができます。画像付きツイー…

世界のいいねボタン一覧の仕様を調べて「ええやん!ボタン」を設置する

SNS

Facebookが関西弁に対応したということで早速調査してみました。locale は ja_KS の模様。なので、いいねボタンを設置する際のパラメータとして、 locale=ja_KSを渡せば ええやん!ボタン になるようです。 DEMO いいね!とええやん!でボタン幅が変わってし…

ゴリラのイラストをツイートする

SNS

ゴリラのイラストをツイート

ツイッターのシェアボタンにハッシュタグを設定する

SNS

いまさらながらツイートにデフォルト文言を入力する方法まとめ - みかづきブログ その3いまさらながらツイートにデフォルト文言を入力する方法まとめ - みかづきブログ その3こちらの記事で色々調べた結果、最近は share をつかっています。 shareをつかって…

いいね!ボタンをつかって投票ページをつくる

以前、 ツイートボタンをつかって投票ボタンをつくったこと がありましたが、今回はFacebookのいいね!ボタンをつかって実装してみました。 デモページ 解説 デモページのソースはこんな感じになっています。 <ul class="box"> <li class="btn red"><div class="fb-like" data-href="http://jsrun.it/kimmy/redFB" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div></li> <…</ul>

いまさらながらツイートにデフォルト文言を入力する方法まとめ

SNS

intent https://twitter.com/intent/tweet?text=hey!PCでもスマフォでもOK。 単純にテキストを渡すだけならこれでOK。 status https://twitter.com/?status=hey!PCでは動きますがスマフォでは動かない気がします。 share https://twitter.com/share?text=hey…

Twitterウィジェットを設置する

SNS

demo @ki_230 からのツイート !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.par…

Twitter Cardsをつかおう

SNS

これまで、いつか調べなければと思いながら、申請が必要という噂を聞いて避け続けてきた Twitter Cards。本日ついに調査を開始してみたところ、 こちらのサイト から簡単に作成できることがわかりました。 ざっくりとした設定手順 カードの種類を選んで、フ…

Instagram(インスタグラム) API でハッシュタグ検索

手順 CLIENT ID を作成する Instagram Developer Documentation でCLIENT IDを作成 下記APIにアクセスする https://api.instagram.com/v1/tags/{TAG_NAME}/media/recent?access_token=&client_id={CLIENT_ID}&count=10※ {TAG_NAME} を検索したいハッシュタグ…

ありがとうボタンを設置する

SNS

みんなの「ありがとう」をたくさん集めて世界をちょっとだけ幸せにするサービス、THANKS 。そんなTHANKSが提供するありがとうボタンを設置してみます。 基本的にはhtmlに、 <script type="text/javascript" src="http://thanks.kayac.com/api.php/button/builder.js"></script> と書くだけで設置できます。色々設定したい人は こちらのページ にオプションが載…

httpsのページにはてブボタン(はてなブックマークボタン)を設置する

基本的には、こちらのページ のページのアドレスにhttpsからはじまるURLを入力すればOKです。httpからはじまるページでつくったはてなブックマークボタンは、 画像を http://b.st-hatena.com/images/entry-button/button-only@2x.png から、 JavaScriptを ht…

Feed Dialogをつかってシェア時のディスクリプションを変更する

こちら を参考に簡単に設定できます。

ツイートボタンをつかって投票ページをつくる

ツイートボタンには、こんな感じに投稿数を全面に押し出したタイプのボタンが用意されています。 今回はこちらのボタンをつかって投票フォームをつくってみましょう。ツイート !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d…

mixi版 いいねボタンを設置する

SNS

こちら からディベロッパー登録を行い、mixi Pluginタブから作成できます。(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = '//static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head…

GREE版 いいねボタンを設置する

SNS

こちらのページ から簡単に作成できます。世の中にはいろんなSNSボタンがありますね。

Pokectボタンを設置する

SNS

こちら から簡単に作成できます。 !function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js…

LINEで送るボタンを設置する

SNS

こちらのページ で貼付けコードを簡単に作成することができます。 <span> <script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140127" ></script> <script type="text/javascript"> new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"}); </script> </span> デフォルトでは、 new media_line_me.LineButton({"pc":false,"…

Twitterのフォローするボタンを設置する

SNS

公式ボタン こちらのサイト で簡単につくれます。@ki_230さんをフォロー オリジナルボタン <a href="https://twitter.com/intent/user?screen_name=フォローしたいアカウント">ボタン画像とかテキストとか</a> という感じで作成できます。 テキストでつくってみると、@ki_230をフォローするこんな感じです。

インタラクティブな投稿を試してみよう。

google+のインタラクティブな投稿機能を試してみました。

+1ボタンを設置してみよう。

google+ の +1ボタンを設置してみました。こちらの 公式サイトから簡単に設置することができます。

世界のいいねボタンを押してみよう。

先日、Facebookのいいねボタンをサイトに設置する際、パラメータとして言語を設定できることに気づきました。例えば、いいねボタンをフランス語で表示したいなら、 locale=fr_FRという値をパラメータとして渡すと、と、フランス語になり、若干おしゃれさがア…