Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
【Labs】facebook・TwitterのOGP設定
6月更新・前月(5月)の人気記事トップ10 06/06/2024 ( 02 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について ( 01 ↓) 【Mac】macOSをHigh SierraからMontereyにアップグレード ( 03 – ) 【Mac】Safariでソースコードを見る方法 ( 04 – ) 【jQuery】入門2. jQueryをHTMLに組み込む ( 05 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法 ( 08 ↑) 【Labs】CSSだけでドロップダウンメニュー ( 09 ↑) 【Labs】PHPのエラー表示をなくす方法 ( 06 ↓) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方
Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー
[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法 | ヨッセンス
こんにちは。WordPressの記事も、たま～には書くヨス（プロフィールはこちら）です。 今現在（2013年10月）、WordPressのプラグインは22個入っています。プラグインはやっぱ少ない方が、サイト表示が軽くなるのでちょっとずつ減らしていきたいと思っています。超長期的にｗ。 さて今回は、全ページに自動でOGP情報を書き出してくれるコードを紹介します! OGPってなに? さっそくですが、「OGPってなに?」というところからお話します。だって、ネット業界に7年もいた私も一年前まで知りませんでしたから。 そうなんです。このOGPという言葉はそんなに古くから言われていた言葉ではないんです。というか必要もなかったんです。Facebookを始めとしたSNSが大流行する前までは。 SNSで表示したい情報を載せるとこ OGPは「Open Graph Protocol（オープン・グラフ・プロトコル）
![[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法 | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/49b8218618ac5fb85b3f8142d9547b6fa332b27d/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fogp-250.gif)
html999 » はじめてのOGP設置方法とどこまで設定するかを考える
いまさら感ありますが、はじめてOGPを設定する機会があったのでまとめます。 （薄い知識でお届けします） そろそろ企業サイト（かため）のようなWebサイトでも、Faviconとセットくらいの感覚で設定するようおすすめした方がよさそうです。 （注意：OGPの仕様がころころかわるので、すぐに間違いになる可能性があります！だいたい2013年の4月頃に調べた内容を元にしています。気づいたところがあれば更新していく予定） ※og:imageの推奨サイズが変更になっていたので修正しました（2014/12/07追記） OGPとは SNS向けの記述で、<head>～</head>内に記述するmeta情報。 facebookなど（他にもmixi、Google＋などが対応しているらしい）で、そのページがシェア（facebookの「いいね！」とか）されたときにSNS上で表示される情報を指定するためのもの。 どんな
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
ウェブサイト運用者必見！ Facebookのリンク付き投稿の画像表示が大きくなる！
Facebookのリンク付き投稿で表示される画像サイズが大きくなりました。既に行っているサイトもいくつか見受けられますが、今回のアップデートはCTRを上げるために超重要だと思いますので、必ずチェックしておきましょう！ 何が変わったの？ 最初にも述べた通り、リンク付き投稿で表示される画像サイズが変更されました。 従来のリンク付き投稿がこちら。 アップデートに対応した画像サイズがこちらです。 モバイル版も同様のアップデートが行われています。 (従来のサイズ) (新サイズ) このサイズ変更は、Facebook広告のアップデート計画に基づいて行われたものです。そのため、サイズはFacebook広告で推奨されたものと同じと考えられます。Facebook Studioで公開された資料によれば、デスクトップ、モバイルのサイズは以下の通りです。 推奨設定 テキスト： 90文字 リンク先のタイトル： 25文
［Facebook］リンク投稿時のサムネイルサイズの仕様が変更になったので検証してみました（2013年9月）｜Tips*Blog｜株式会社コプロシステム
こんにちは、コプロシステムWebデザイングループの石川です。 Facebookの仕様変更。 小さなモノから大きなモノまで、世界中で使われているSNSの仕様変更はほぼ毎日繰り返されていて、時にはWebクリエイターたちを混乱に陥れることで有名です。（言い過ぎ？） そんな中、先週の9月10日（米国時間）に大きな仕様変更がありました。 既にお気づきの方も多いかもしれませんが、FacebookへWebページやブログ記事などのURL（リンク）を投稿した時にニュースフィードに表示されるサムネイルのサイズが大きくなった という仕様変更です。 ↑比較してみると一目瞭然ですね。 「サムネイルのサイズが大きくなった」ということはつまり、「ニュースフィードを閲覧している人の目に付きやすく、クリックされやすくなった」ということです。 ただ、このサムネイルのサイズ、すべてのリンク投稿が対象というわけではなく、一定のル
OGPの仕様追加：記事にひもづくFBページや個人アカウントとの連携を強める
2013年06月21日02:32 by oklahomer OGPの仕様追加：記事にひもづくFBページや個人アカウントとの連携を強める カテゴリ 先日の開発ブログで、OGPの仕様追加が公開されました。これを用いることで、記事がニュースフィード上に流れるとき、その記事にひもづくFBページへのいいね！や個人アカウントのフォローを促すことができるようになります。 方法 方法は簡単で、Facebookページを紐づけるならarticle:publisherを指定 <meta property="article:publisher" content="https://www.facebook.com/cnn" /> 個人アカウントを紐づけるならarticle:authorを指定します。 <meta property="article:author" content="https://www.faceb
Google+ は OGP より Microdata を優先するみたい
Google+ にリンクを投稿する際、ページに指定された OGP よりも Microdata の方が優先されることで起こった問題と、その解決方法について解説します。 この Blog では、Google+ ページも運用していて、記事を更新した際にそっちにも投稿しています。 ところが、ちょっと前からリンクを投稿したときに、OGP （Open Graph Protocol） に指定した概要文 （og:description の値に入れてるテキスト） とかが無視されて、Blog 自体の概要が出ちゃって、なんでかなぁって思いながらも今度調べよってことで放置していたわけですが、さっきちょっと時間を見つけてテストしてみたら、どうも Microdata の指定の仕方でこういう現象が起こるらしいことがわかったので、共有します。 具体的にどういう現象が起こるか OGP に指定した概要文が無視される件ですが、例
新ニュースフィード対応時の画像サイズ
2013年04月06日21:09 by oklahomer 新ニュースフィード対応時の画像サイズ カテゴリ ニュースフィードのリニューアルにより、今後はより大きなサイズでニュースフィード上に画像が表示されることになります。アプリからの画像投稿としては、ウォール投稿、アルバムへの投稿、Open Graphアクション投稿などが挙げられますが、新しいニュースフィードに最適化するため、画像投稿時の仕様が一部変わります。また、OGPが設定されたwebページのシェアでもog:imageに指定した画像が利用されるため、その画像についても新しい仕様に合わせるのがいいかもしれません。 新仕様 最低200 x 200pxで、最適なのは600 x 600px以上となります。200 x 200pxに満たない場合、新しいニュースフィード上には表示されません。長方形の画像はクロップされます。 また、以下の制限も適用さ
オウンドメディアにGoogle AnalyticsやFacebook、Zenbackの設定をする方法-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
TOP > オウンドメディアにGoogle AnalyticsやFacebook、Zenbackの設定をする方法 こんにちは。マーケティング担当の伊藤大地です。 先月から、Movable TypeにSix Apart ブログ風のテーマをインストールして、イマ風のソーシャル連携したオウンドメディア・ブログを構築する連載をやっております。テーマをインストールした前回に続いて、今回はオウンドメディアのアクセス数を増やすための基本的な設定として、Google AnalyticsやFacebook App IDの設定、Zenbackの設置をしたいと思います。 ここまでのテーマのインストールについては、前回の記事「Six Apart ブログ風のオウンドメディアを作ってみよう！」をご覧ください。 Zenbackの設置 まずは、最も簡単に設定が終わるブログウィジェット「Zenback」の設置です。自社サー
ユーザIDを取得する - shima111の日記
前回は「次回、いよいよノートデータを取得する」と言いましたが、その前にもう一つやらないといけないことがありました。APIでデータを取得する際に「誰の」データかを指定するのですが、その時に必要になるのが「ユーザID」です。 ユーザIDの取得は非常に簡単なのですが、アカウント名を登録しないといけません。(アプリ作成の時も聞かれたと思いますが、このアカウントを登録するためにも携帯メールアドレスが必須という仕様はどうにかならんのかいな) 「アカウント設定」から適当にアカウントを決めます(以下の画面参照) そして、以下のURLにより自分のユーザIDを取得します。 https://graph.facebook.com/アカウントすると以下のように表示されると思います。IEだと上手く表示されないかもしれませんので、他のブラウザでお試しください。 { "id": "ユーザID", "name": "XXX
Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順（OGP済みなら10分でOK） | 初代編集長ブログ―安田英久
今日は、Twitterが本格的に展開を進めている「Twitter Cards（ツイッターカード）」を表示するための、サイトの変更方法を解説します。Facebookでシェアされたときの表示を指定する「OGP」を設定しているサイトなら、10分で完了するような内容です。 2012-09-06： 申請後しばらくしたら、自分のアカウントでカードが表示されるようになり、Web担のサイトのURLでカードが表示されるようになりました。 Twitter Cards（カード）とは？Twitter Cardとは、Twitterが進めているツイート表示のリッチ化の仕組みのこと。ツイート内にURLが含まれている場合に、ツイートの詳細表示でそのページのタイトルや概要、アイコン写真などを表示するものです。 このカード表示は6月にスタートしたのですが、まだすべてのTwitterアカウントで有効になっているわけではなく、カ
OGPとは? 改めてOGPの重要性について考える時が来た。 | Last Day. jp
こんにちはFacebook大好き@sayobsです。今日は改めてフェイスブックのOGPの大切さを説明したいと思います。 OGPというのはThe Open Graph protocolの略でフェイスブックを始めmixiやGoogle＋等のSNSとウェブページを連携させるための情報をコンピュータが読めるように記述したものです。 ↓のような記述でHTMLのheadタグに入力していきます。facebookのOGP設定です。 Meta Tag: Meta Tag: Meta Tag: Meta Tag: Meta Tag: Meta Tag: Meta Tag: Meta Tag: ちなみに僕はWordPressのプラグインを使っているので簡単にOGPを設定できてます。 WordPressのOGP設定は「Open Graph Pro」がベスト | Last Day. jp「WP-OGP」はバグがあっ
いいね！を超える拡散力、「Open Graph」とは？ (1/2)
FacebookのGraph APIとJavaScriptライブラリー「jAction」を使ったFacebookモバイルアプリの作り方を解説する本連載。今回は、注目を集めるFacebookアプリの新機能「Open Graph」について紹介します。 あらゆる活動を共有する「Open Graph」と「いいね！」の違い FacebookのOpen Graphとは、「映画を観た」「音楽を聴いた」「買い物をした」など、ユーザーのさまざまな活動（アクティビティ）を、Facebookのタイムライン上に共有する機能です。2012年1月の発表以来、海外のFacebookアプリを中心に導入が進んでおり、国内でも「Yahoo! ニュース」が導入したことで話題になりました。
About Twitter Cards
<g> <g> <defs> <rect id="SVGID_1_" x="-468" y="-1360" width="1440" height="3027" /> </defs> <clippath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;" /> </clippath> </g> </g> <rect x="-468" y="-1360" class="st0" width="1440" height="3027" style="fill:rgb(0,0,0,0);stroke-width:3;stroke:rgb(0,0,0)" /> <path d="M13.4,12l5.8-5.8c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L12,10.6L6.2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記）
http://blog.e-riverstyle.com/2012/11/prefixogpogfburi.html
FacebookのOGP画像サイズはどんなサイズがいいの | BOCUNO BLOG