OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 ただしくOGPが設定されていないと、せっかくSNSでURLがシェアされてもアクセス数が伸びず、大きな機会損失に繋がってしまう可能性があります。 今回は、WebサイトにおけるOGPの正しい設定方法や、適切な画像サイズ、OGPが正しく設定されているかの確認方法をご紹介したいと思います。 OGPとは？ OGPとは、「Open Graph Protcol（オープングラフプロトコル）」の略称で、TwitterやFacebook、LINEやSlackなどでWebサイトをシェアした時に表示されるタイトルや画像を設定するためのものです。 例えば、TwitterでWebサイトをシェアすると上記の画像のようにリンクがカードで表示されますね。 このように、OGPが正しく設定されて
Twitterで自分や他者に送られてきたリプライを可視化するシステム「リプライユーザ可視化システム」（β版）が開発されました。「炎上時にTwitterで多くの人から攻撃されているように見えても、実は全体から見ると少数」ということが分かるシステムです。 ねとらぼアカウントの分析結果 このシステムは東京大学大学院准教授で計算社会科学を研究している鳥海不二夫（@toritorix）さんが開発。「炎上に加担する人は1.5％程度しかいない」という研究結果を受けて、「たくさんに見える誹謗中傷が実は全体から見ればごくわずかな人々の手によるものだ、といいうことを分かりやすく可視化するため」開発したとしています。 利用方法は、サイトにアクセスして「Start Mention Analyzer」からTwitterアカウントを連携。「自分へのリプライを確認する」から自身のアカウントに送られたリプライの一定期間の
リンクをコピー ブログやWEBサイトなどにツイッターのタイムラインを埋め込んでいる人も多いかと思います。 WordPressのサイトではブロックやウィジェットを使って埋め込むことも可能です。 今回は、これの埋め込み手順とデザインカスタマイズの解説です。 まずはタイムラインの埋め込み方法です。 こちらのページに行き、 https://publish.twitter.com/# タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。 URL、ちなみに当ブログの場合は以下です。 https://twitter.com/souken_blog 次に、左側の「Embedded Timeline」をクリックします。 最後に、コードが表示されるのでこれをコピーして、ブログなりWEBサイトなりに貼り付けます。 これでタイムランが表示されるようになります。 細かくカスタマイズ
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
<!-- Sharingbutton Facebook --> <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="Share on Facebook"> <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xm
ブログの記事を共有してもらうのにSNSはとても効果があり、ほとんどのブログではデフォルトでFacebookやTwitterなどのSNSで共有するボタンが設けられていて、そのボタンを押すと各サービスへ飛んでコメントやツイートを残すことができます。私がよく使っているのはTwitterです。 共有するだけならそのままでいいのですが、Twitterで共有された時に記事のタイトルとURLだけではなく、概要と記事内の写真（アイキャッチ画像）を表示させるためにはTwitter Cardsというサービスを利用する必要があります。 Twitter Cardsは自分が投稿していないツイートでも自分のブログのURLが含まれていたら自動的に概要を表示してくれるので、導入するのと導入しないのとでは無視出来ないほど差が出てくる可能性があり、ブログなど自分のサイトを持っている方は導入されることをおすすめします。 が、T
2015年12月1日追記 : Twitter のツイート数取得 API count.json の提供終了に伴い、内容を修正しています。 EXP では以前まで WP Social Bookmarking Light を使っていましたが、つい最近オリジナルのシェアボタンに切り替えました。ただし、pocket は公式の API が公開されていないので公式ボタンを採用しています。この記事では Facebook、はてブ、Twitter のオリジナルシェアボタンの実装方法を紹介していきます。 目次 Facebook 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 はてなブックマーク 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 Twitter 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 pocket さいごに PHP JavaScript Faceboo
サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <
Twitter, Facebookなどで利用できる似顔絵を作成できるジェネレーターを紹介します。 かわいい悪魔風の、おもちゃっぽいもの、動物もの、まんがやキャラクターもの、アートなもの、かなりリアルに作れるものまで、さまざまなものがあります。
2. • 山本 裕介(@yusuke)! • 株式会社サムライズム 代表取締役! • 過去の職場: 自己紹介 2000年∼ 新日鉄情報通信システム! 2002年∼ BEA Systems! 2006年∼ FAST Search & Transfer! 2008年∼ RedHat! 2011年∼ Twitter, Inc. 3. • 山本 裕介(@yusuke)! • 株式会社サムライズム 代表取締役! • 過去の職場: 自己紹介 2000年∼ 新日鉄情報通信システム! 2002年∼ BEA Systems! 2006年∼ FAST Search & Transfer! 2008年∼ RedHat! 2011年∼ Twitter, Inc. SOAPに悩まされるSOAPに悩まされるSOAPに悩まされる
iOSアプリ開発担当の菅原です。 TwitterAPI1.0は2013年6月12日に廃止を予定されており、Twitterを利用する全てのサービスを対象に最新のバージョン1.1への移行が必要となっております。 ※ 廃止日は何度か変更されており、直近ですと2013年5月7日に2013年5月8日廃止が2013年6月12日に変更されました。 Twitter APIの概要やAPI1.1から新設されたツイートの表示方法を定めたディスプレイガイドラインにつきましてはTwitter API1.1 画像で見る新ディスプレイガイドラインまとめをご覧下さい。 今回はTwitter API1.1のREST APIの変更点についてお話します。 目次 REST API とは 重要な変更点 REST API 全解説 TimeLines Tweets Search Streaming Direct Messages
某氏に教えてもらったんだけど、ソーシャルボタンをカスタマイズしてオリジナルのボタンにしたい場合、SharrreというjQueryプラグインを使うのが良い。 Sharrre - A plugin for sharing buttons 設置簡単コード分かりやすいカスタマイズしやすい挙動安定してるいろんなSNSに対応してるという感じで大変やりやすい。 使い方設置<script src="/js/jquery.sharrre.min.js"></script> こんな感じで設置。 HTML書く<ul class="share-items"> <li class="item facebook" data-url="http://example.com/" data-title="Share"></li> <li class="item twitter" data-url="http://examp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
