SNS
黒歴史クリーナー http://kurorekishi.me/cleaner/getstartedkurorekishi.me ツイートの一括削除ツール！ ysklog.net どちらも「Favの保護」や「削除するツイートの期間設定」などができます。 黒歴史クリーナーは名前が良いですね。 両方使ってみましたが、…
https://twitter.com/intent/tweet でTwitterの投稿画面を立ち上げてくれることでおなじみのWeb Intentですが、 https://twitter.com/intent/tweet?text=ツイッターの自作ツイートボタン（Web Intent）に渡すパラメータは適切に設定しようと思いました。（UR…
【結論】 横長画像（正方形含む）は、 background-position: center center; background-size: cover; 的な感じでトリミングされ、縦長画像は、 background-position: center top; background-size: cover; 的な感じでトリミングされる。 【考察】 なんでだ…
TwitterCardsのsummary_large_imageを設定する際、いつもog:imageと同じサイズ（1200px × 630px）の画像を使いまわしていたのですが、最適なサイズはいくつなのだろう？と思い調べてみました。こちらのページ によると、幅280px以上、高さ150px以上である必…
長い人生において、いいねボタンやツイートボタンの初期化のタイミングを自在に操りたいと思うタイミングが1度や2度位あるかもしれませんし無いかもしれません。 今回はそんな時のために初期化の方法をメモしておきたいと思います。 ツイートボタンの初期化 …
（のちにキャッチーでポップな気の利いた文章に差し替える）いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。 実は 公式ドキュメント に詳しく載っているので気になる方…
kimizuka.hatenablog.comTwitterウィジェットを制作する際に、width、heightを渡せばその大きさになるのですが、限界もある模様です。https://dev.twitter.com/ja/web/embedded-timelines/parametersdev.twitter.com width 180px 〜 520pxiframeのmin-width…
前回の記事 でDISQUSってなんぞや？と思ったので調査して導入してみました。 Disqusとは disqus.comDisqus（ディスカス）は、Webサイトやブログに中央集権型のコメント機能を提供するオンラインサービスである。2007年に設立され、Big Head Labs Inc. の名前…
はてなブログにURLを埋め込むときに :embet:cite をつけるとOGPが展開されることがあります。kimizuka.hatenablog.com↑ こんな感じです。今回はその条件とそのときに表示されている情報を調査してみました。 meta情報なし jsrun.it HTML <html lang="ja"> <head> <meta charset="UTF-8" /> <title>OGPテスト - tit</title></meta></head></html>…
どちらも公式のAPIではないので油断はできませんが、現状は下記方法で取得することがでなくはないです。 公式ではないことには注意が必要です。 Twitter count.json停止に伴い動作しなくなりました。 http://urls.api.twitter.com/1/urls/count.json?url=対…
developers.facebook.comいつできたのかわかりませんが、 Send Dialog たるAPIをみつけました。Facebookメッセージを送るAPIだようです。 LINEで送るボタン のような使われ方を想定しているのかもしれないですね。こちらのAPIでGIFアニメのURLをシェアしよう…
DEMO こちらです。実装方法としては シェアダイアログ - シェア機能 - ドキュメンテーション - Facebook for Developers をつかってGIFアニメのURLをシェアしているだけです。developers.facebook.com 【関連記事】kimizuka.hatenablog.com
ツイートボタンは こちらのツール で簡単につくることができるのですが、いつの間にか吹き出しの位置を変えるオプションがなくなっているような気がします。（昔はチェックボックスがあったような気が。。。気のせいかもしれませんが）Twitter Publish 一応…
kimizuka.hatenablog.com以前、Twitterウィジェットのつくりかたをまとめました が、最近data-chrome属性でインターフェイスを変更できることがわかったので追記しておこうと思います。 インターフェース:data-chrome属性を使ってウィジェットのレイアウトや…
kimizuka.hatenablog.comこちらの記事の応用版です。 タイムラインにGIFアニメを表示します。 DEMO タイムライン上ではmp4として表示されるので、GIFアニメ感は損なわれますが、とても便利です。
Tumblrとは Tumblr（タンブラー）は、メディアミックスブログサービス。ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。アメリカのDavidville.inc（現: Tumblr, Inc.）により2007年3月1日にサービスが開始された…
https://dev.twitter.com/ja/web/embedded-timelines https://dev.twitter.com/ja/web/embedded-timelines いつのまにかひっそりとサポートを切られていました。https://dev.twitter.com/faq/twitter-for-websites-%26-widgetsAndroidは4.Xからサポートとな…
前回Tumblr API をつかって 最新の投稿（しかもTextのみ）を取得しました が、今回は様々な投稿タイプに対応させつつ最新20件を取得するように改修してみました。 Tumblr API で 投稿内容を取得する - みかづきブログ その3 DEMO JavaScript // forked from …
DEMO Tumblrの投稿内容をAPIで取得して表示するモックを作成しました。最新のものを1件表示し、クリックするとTumblrにジャンプします。 ※ 最新の投稿のタイプがテキストのときのみ動作します。 JavaScript $(function(){ var domain = "surprisewindow.tumb…
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>
ゴリラのイラストをツイートする - みかづきブログ その3先日投稿したこちらの記事ですが、実はこのような意図がありました。 順を追って説明していきます。 ツイートを行う際に画像を追加すると画像付きのツイートを投稿することができます。画像付きツイー…
[追記] jsdo.it終了に伴いDEMOを移動しました。blog.kimizuka.org---Facebookが関西弁に対応したということで早速調査してみました。locale は ja_KS の模様。なので、いいねボタンを設置する際のパラメータとして、 locale=ja_KSを渡せば ええやん！ボタン …
ゴリラのイラストをツイート
いまさらながらツイートにデフォルト文言を入力する方法まとめ - みかづきブログ その3こちらの記事で色々調べた結果、最近は share をつかっています。 shareをつかってハッシュタグを設定しようとして、 <a href="https://twitter.com/share?text=hey! #hey"></a> と書いても無視されてしまいます。 <a href="https://twitter.com/share?text=hey!&hashtags=hey"></a> と hashtags …
以前、 ツイートボタンをつかって投票ボタンをつくったこと がありましたが、今回は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>
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…
demo @ki_230 からのツイート つくりかた https://twitter.com/settings/widgets へアクセス 新規作成ボタンをクリック もろもろ設定してウィジェットを作成ボタンをクリック 出力されたコードをコピペ お手軽ですね。 ユーザータイムライン ユーザーお気に…
これまで、いつか調べなければと思いながら、申請が必要という噂を聞いて避け続けてきた Twitter Cards。本日ついに調査を開始してみたところ、 こちらのサイト から簡単に作成できることがわかりました。 ざっくりとした設定手順 カードの種類を選んで、フ…
手順 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} を検索したいハッシュタグ…
