X_NOTE: facebook

ラベル facebook の投稿を表示しています。すべての投稿を表示

2015年3月12日木曜日

FacebookカバーのPCとスマートフォンのサイズ（2015.03.12）

FacebookページPC版カバーのサイズは公式サイトに画像付き分かりやすく出ているがスマートフォンサイトではそのPC版カバーをどのくらいトリミングされて見えるのか記載されていなかったのでメモ。

◯Facebookカバー画像サイズ PC
幅851px x 高さ315px

◯Facebookカバー画像サイズ SP （PCカバーのトリミングサイズ）
幅560px x 高さ315px

※スマートフォン上では幅640px x 高さ360pxとして表示されるようだけれど
PC画面上では上記の大きさでトリミングされるので重要な情報は端には置けない。。

【参考サイト】
Facebookヘルプセンター
「Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。」

2014年5月13日火曜日

Facebook広告用、OGP画像の最適サイズメモ。2014.05.13現在

Facebookの仕様がコロコロ変わるのであくまで現時点でのメモ。

・上記の画像の設定でいけそうですが
OGP画像推奨サイズは600×315px以上、1200×630pxらしいです。

参考サイト：FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版　※9.21追記）

ほぼ同じだと思いますが広告用の画像は広告の種類によって最適なサイズが違うらしい。
参考サイト：【Facebook最新情報】広告・リンク投稿の画像表示を最適化！画像を大きく＆クリック率を上げるために必要な設定基準はコレ！

※書き出す画像の形式は.pngが推奨。.jpgで書きだした時Facebook側の圧縮で画像が荒れたので。

2013年12月9日月曜日

facebook シェアボタン設置まとめ 2013 12月

1.<html>に以下のコードを入れる。
（html5バージョン、何故入れるかは忘れました。）

2.ogpを設定する。
（※アプリIDが無くても動きますがアプリIDを取得するとfacebookアプリのインサイトで情報が見れるようになります。アナリティクス的に調べることが出来る。）

3.facebook開発者ツールでサイトURLを入れて以下の2つのコードを
取得する。
https://developers.facebook.com/docs/plugins/share-button/

・facebook SDK※アプリIDなしバージョン（<body>直下に置く）

・facebookボタンのリンク（ボタンを置きたい好きな場所に置く）

4.htmlに<ul><li>などで並べる。無理な時は<table>レイアウトにする。

5.IE8以下対策、現在のシェアボタンのコードはhtml5用でIE8に対応していないので
条件分岐させてIE8以下用のコードを用意する。

<table id="sns_btn_box">
<tr>
<td><p class="fb-share-button" data-href="サイトURL" data-type="button_count">
</p>
</td>
<td><a href="https://twitter.com/share" class="twitter-share-button" data-url="サイトURL" data-lang="ja">ツイート</a><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);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td>
</tr>
</table>

6.シェアした時の画像はpngでないと荒れる。
画像の大きさは公式では1500×1500とか
みたいですが、スマホ用でシェアした時の最大サイズが500いくつだったので600px×600pxで用意すればバッチリなはず。

<参考URL>

2012年5月7日月曜日

SNSボタン(アイコン型を設置)facebook,yahoo,twitter,google,はてなブックマーク

○SNSボタン(アイコン型を設置)facebook,yahoo,twitter,google,はてなブックマーク

( 1 )twitterアイコンのつぶやくボタンを設置する。


<a href="http://twitter.com/share?count=horizontal&amp;original_referer=ここに絶対パスでページのURLを書く&amp;text=タイトル部分&amp;url=

ここに絶対パスでページのURLを書く(ツイート時に表示される)

&amp;" onclick="window.open(this.href, 'mywindow6', 'width=750, height=550, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="ここにオリジナルの

twitterアイコンを入れる" width="18" height="18" /></a>

( 2 )facebookアイコンのシェアボタンを設置する。


<a href="http://www.facebook.com/share.php?u=ここに絶対パスでページのURLを書く" onclick="window.open(this.href, 'mywindow6', 'width=750, height=550, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="ここにオリジナルのfacebookアイコンを入れる" width="18" height="18" /></a> 





( 3 )はてなブックマークボタンを設置する。

<a href="http://b.hatena.ne.jp/entry/ここに絶対パスでページのURLを書く

" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="18" height="18" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

( 4 )Yahoo!ブックマークボタンを設置する。※ページURL等は書かなくてOK

<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&amp;u='+encodeURIComponent(location.href)+'&amp;ei=UTF-8','_blank','width=750,height=550,left=100,top=50,scrollbars=1,resizable=1',0);"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" style="border:none;"></a>

( 5 )googleブックマークボタンを設置する。


<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=

ここにhttp://以下のページURLを書く&title=タイトル部分

" onclick="window.open(this.href, 'mywindow6', 'width=750, height=550, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img alt="" src="http://www.google.co.jp/favicon.ico" border="0" width="16" height="16" /></a>

参考サイト
「facebook,twitter,はてぶボタンの設置方法」
http://es.istgut.jp/tips/facebooktwittermixi.html
http://b.hatena.ne.jp/guide/bbutton

「yahooブックマークボタン設置方法」
http://bookmarks.yahoo.co.jp/settings/tools/savelink

「googleブックマークボタン設置方法」
http://blog.seiji.me/blog/2008/05/13/161/

「小窓の開き方」
http://amenti.usamimi.info/windowopen.html

2012年2月7日火曜日

ブログの投稿をfacebookへ連動させる(テストを兼ね)

Facebookのアプリ「RSS Graffiti」を使ってブログの投稿をfacebookへ連動させられる。
しかし設定時にRSS Graffitiのエラーが出るので注意。

参考ソース：ブログの投稿をFacebook（フェイスブック）に連動、連携させる。