フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版（ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...） - みかづきブログ その3
（のちにキャッチーでポップな気の利いた文章に差し替える） いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。 実は 公式ドキュメント に詳しく載っているので気になる方はそちらも確認してみてください。ちなみに本記事には公式ドキュメントに載っていない生活の知恵的なテクニックも記載しております。 dev.twitter.com 目次 1. 公式ボタンの設置方法 1.1 ボタンの種類と入力項目 1.2 ページ内に公式ボタンを複数置きたい場合 1.3 ツイートの文字数を稼ぐためにURLの短縮を缶変えている場合 1.4 ユーザーを複数入力したい場合 1.5 推奨ユーザーを複数入力したい場合 1.6 ハッシュタグを複数入力したい場合 1.7 画像付きツイートを投稿させたい場合 1.8 動画付きツイートを投稿させたい場合
新しくなった「LINEで送る」について | rrlrlrll.org | おさしみにたんぽぽをのせるブログ
こんにちは。突然ですがLINEで送るボタンが実はいつの間にか新しくなっていたことを、皆さんご存知でしょうか。はあ知ってるし何言ってんのこいつと思った方はすみませんでした。なんだかGoogle先生で検索すると古いLINEで送るボタンの設置方法がhitしてしまうし、あまり見かけないので、実はこれあんまり知れ渡ってないのでは…とか思ったりしてしまいました。 新しいLINEで送るですが、LINE it!という名称で公開されているようです。何故it!かみたいな話は僕にはわかりかねますが、ともかく従来のLINEで送るとばばばんと違うのは、スマートフォンだけでなくPCブラウザからWebページを共有できることです。これでもうPC/SP共通のページを組んだ時にLINEで送るボタンをdisplay:noneする日々とおさらばというわけです。利用にはLINEのWebログインが必要ですが、LINEのWebログイン
【完全版】これであんたもシェア名人。Facebookシェアボタンの実装方法まとめ
どうも、イソップです。 Facebookシェアの実装方法って何種類もあってわかりづらかったのでまとめてみました。 シェアボタンはいいねボタンとどう違うのか。 それから公式ボタンの作成方法やリンクでのシェア設定、JavaScriptでの設定方法をご紹介します。 Facebookシェアとは Facebookのシェアは、シェアしたいサイトの情報を自分と友達のタイムラインに表示させる仕組みです。 勘違いしてほしくないのですが、「いいね！」とは少しだけ挙動が違います。 いいねは友達のタイムラインにいいねしたことが表示されますが、自分のタイムラインには表示されません。 いいねはリアクションで、シェアは共有という位置づけなので、Facebookで拡散させるにはシェアが断然効果的です！ また、シェアされる情報はシェアするページのOGP情報です。 ボタンの設定ではシェア内容は変更できませんのでご注意を！ そ
WordPress でオリジナルの SNS シェアボタンを実装する方法 | WP-E (仮)
2015年12月1日追記 : Twitter のツイート数取得 API count.json の提供終了に伴い、内容を修正しています。 EXP では以前まで WP Social Bookmarking Light を使っていましたが、つい最近オリジナルのシェアボタンに切り替えました。ただし、pocket は公式の API が公開されていないので公式ボタンを採用しています。この記事では Facebook、はてブ、Twitter のオリジナルシェアボタンの実装方法を紹介していきます。 目次 Facebook 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 はてなブックマーク 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 Twitter 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 pocket さいごに PHP JavaScript Faceboo
ソーシャルプラグインのパフォーマンスを解析してますか？
最近では多くのウェブサイトやブログで「いいね！」や「ツイート」などのソーシャルプラグインをつけているページはよく見かけますよね？ サイト管理者の多くはGoogleAnalyticsなどの解析ツールで、ソーシャルメディアからの流入は把握していても、ウェブサイトに埋め込んだそれぞれのプラグインがどれくらいのパフォーマンスを発揮したのかを見ていないのではないでしょうか？ Facebookではソーシャルプラグインのパフォーマンスが分析できる「ドメインインサイト」という機能が提供されています。設定も簡単なので是非とも設定されることをおすすめします。 ドメインインサイトの設定 STEP1 インサイトのダッシュボードにアクセス インサイトのダッシュボード（ https://www.facebook.com/insights/ ）にアクセスし、画面右上にある「ウェブサイトのインサイト」ボタンをクリック S
サイトに設置した「いいね!」の押され具合をデータで解析する方法 | 初代編集長ブログ―安田英久
今日は、ソーシャルメディア解析の話題を。自分のサイトに設置したFacebookの「いいね!」ボタンの使われ具合を分析する方法です。Facebookインサイトを使う方法と、APIでデータを取得する方法の2種類を紹介しましょう。 最近、Facebookの「いいね!」ボタンを見かけることも増えました。Web担でも2010年9月から「いいね!」ボタンを設定していて、先日の「TwitterやFacebookで共有されたリンクが検索順位に直接影響する――グーグルとBingが明言」の記事では何と840いいねを記録しました。 さて、この「いいね!」ボタンの押され具合を分析するにはどうすればいいのでしょうか？ 各ページを表示してボタンの横に表示される数字を目視で確認していくのもいいのですが、もう少しデータとして分析したいですよね。 それには、「Facebookインサイトを使う方法」と「APIを使う方法」の2
FacebookのOGPキャッシュ問題に終止符。キャッシュクリアボタン実装！
大変です。 Facebookのデバッガーに、明確にキャッシュクリアボタンが実装されました。 Open Graph Object Debugger https://developers.facebook.com/tools/debug/og/object/ The new function has been available on “Open Graph Object Debugger”(old “URL Linter”). That is the function that “definitely” clear the cache. Open Graph Object Debugger https://developers.facebook.com/tools/debug/og/object/ 今までこのキャッシュ問題には世界中の制作者が苦しめられてきました。 特に画像はなかなかキャッシ
Facebook OGP画像の最新サイズ（※2014年9月）、もう正方形は不要
↑このイラストが、Facebook OGP画像の最新サイズです（2014年9月末現在） といっても、ちょうど昨年の今頃に一度仕様変更があり、その時に最適なサイズに対応していた場合は今回は特別な対応は不要です。 約1年前、FacebookのニュースフィードのUIが変わり、OGPの画像（og:image）のサイズ仕様が変わりました。 軽くおさらいすると、つい最近まで、OGP画像の推奨サイズは下記のような形でした。 なんで正方形で作成しなければいけないかと言うと、今までは「PC版のユーザーのタイムライン」を見た場合のみ、og:imageが正方形で表示されていたからなんですね。 FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記） https://snowadays.jp/2013/09/2106 Face
Ajaxで動的に追加したSNSボタンを表示させる方法と、SNSボタンの再読み込みについて | Yuhiisk
どうも、イソップです。 Ajaxで読み込んだコンテンツの中にSNSボタンがあったとしても、レンダリングされません。 さぁ、困りました。 でも調べてみたら、表示させる方法がちゃ〜んと用意されていましたよ。 ボタンだけを再読み込み（リロード）したいときにも使えます。 Twitter JavaScript Interfaces for Twitter for Websites | Twitter Developers HTML <!-- 事前にtwitter-widgetの読み込み --> <script>!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
Twitterのパラメータ - P a s t i m e - R i R e L o g
メモ代わりも兼ねて書いとこ(*´ω｀*) 通常のツイート http://twitter.com/intent/tweet?&text=ここにツイートする文書 例: https://twitter.com/intent/tweet?&text=%e3%83%84%e3%82%a4%e3%83%bc%e3%83%88 リンク付きツイート https://twitter.com/intent/tweet?&text=ここにツイートする文書&url=リンク（URL） 例： https://twitter.com/intent/tweet?&text=%e3%83%84%e3%82%a4%e3%83%bc%e3%83%88&url=http://d.hatena.ne.jp/RIREX/ ハッシュタグを付ける https://twitter.com/intent/tweet?hashtags=ここに
ブログからTwitterに短縮URLで投稿できるリンクボタンを貼る方法
| 人気ページ | おすすめ記事 | 定番ツール | ブログからTwitterに短縮URLで投稿できるリンクボタンを貼る方法 ブログの個別ページに、そのページのURLをつぶやく事が出来るリンクやボタンを貼る方法。自サイトに短縮URL付きのツイートボタンを導入するのに結構苦労したので、メモ的に更新。
IE8でツイートボタン貼り付けるとエラーが出る件
2015年1月26日時点でのメモです。今後どうなっているかはわかりません。 先週くらい（2015年1月19日頃）からツイートボタンを貼り付けているページをIE8で見ると以下のエラーが出るようになった。 Script error widgets.js Code: 0 URI: https://platform.twitter.com/widget/js 相変わらず役に立たないエラーである。 発生しているページhttps://about.twitter.com/resources/buttons もはや公式の配布ページでエラー。 このまま貼り付けたり、jQueryプラグインとかでラップしているページでもエラーが出る。 発生してないページhttp://news.yahoo.co.jp/pickup/6147359 Yahoo!ニュースの記事ページのツイートボタンではエラーが出ていない。なぜかと思
LINEボタンでで今いるページのURLじゃないURLをシェアさせる方法 - mermaid1112の日記
LINEボタン(http://media.line.me/howto/ja/)の通常の設定だと 送るテキストを直接入力にしてもページタイトルと一緒にシェアさせるにしても 今いるページのURLのシェアになってしまうのですが、 下記の様にwithUrlをfalseにして textの中身にシェア文言とシェアさせたいURLを書けば 今いるページじゃないページのシェアができる。 <span> <script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script> <script type="text/javascript"> new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a","text":"シェア文言 http
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LINE Social Plugins