みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

SNS

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

SNS

黒歴史クリーナー http://kurorekishi.me/cleaner/getstartedkurorekishi.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を渡せばその大きさになるのですが、限界もある模様です。https://dev.twitter.com/ja/web/embedded-timelines/parametersdev.twitter.com width 180px 〜 520pxiframeのmin-width…

Disqusを導入してみる

SNS

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

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

SNS

はてなブログに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>…

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

SNS

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

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

SNS

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

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

SNS

DEMO こちらです。実装方法としては シェアダイアログ - シェア機能 - ドキュメンテーション - Facebook for Developers をつかってGIFアニメのURLをシェアしているだけです。developers.facebook.com 【関連記事】kimizuka.hatenablog.com

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

SNS

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

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

SNS

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

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

SNS

kimizuka.hatenablog.comこちらの記事の応用版です。 タイムラインにGIFアニメを表示します。 DEMO タイムライン上ではmp4として表示されるので、GIFアニメ感は損なわれますが、とても便利です。

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

SNS

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

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

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 で 投稿内容を取得する その2

SNS

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

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

[追記] jsdo.it終了に伴いDEMOを移動しました。blog.kimizuka.org---Facebookが関西弁に対応したということで早速調査してみました。locale は ja_KS の模様。なので、いいねボタンを設置する際のパラメータとして、 locale=ja_KSを渡せば ええやん!ボタン …

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

SNS

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

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

SNS

いまさらながらツイートにデフォルト文言を入力する方法まとめ - みかづきブログ その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>

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

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} を検索したいハッシュタグ…