カテゴリー別アーカイブ: SNS

eye_sns_icon

各種サービスロゴの利用ガイドラインまとめ

SNSをはじめとする各種サービスのロゴには色や大きさの指定をはじめ、権利や利用条件があります。ウェブサイトにバナーやボタンを自作で掲載する際の参考として、利用ガイドラインをリンクにまとめました。
※読み込みに時間がかかる場合がありますが、ご了承ください。

Twitterのブランドガイドライン

https://about.twitter.com/ja/press/brand-assets

https://about.twitter.com/ja/press/brand-assets

Facebook Brand Resources

https://www.facebookbrand.com/

https://www.facebookbrand.com/

Google+ ブランディングに関するガイドライン

https://developers.google.com/+/branding-guidelines?hl=ja

https://developers.google.com/+/branding-guidelines?hl=ja

LINE ロゴの利用について

http://line.me/logo/ja

http://line.me/logo/ja

Tumblr ロゴを自由に使おう

http://www.tumblr.com/logo

http://www.tumblr.com/logo

WordPress › Logos and Graphics

https://wordpress.org/about/logos/

https://wordpress.org/about/logos/

ブランドガイドライン | 法人向け Pinterest

http://ja.business.pinterest.com/brand-guidelines/

http://ja.business.pinterest.com/brand-guidelines/

Evernoteトレードマークの利用に関して

http://evernote.com/intl/jp/trademark/

http://evernote.com/intl/jp/trademark/

このエントリーをはてなブックマークに追加
LINEで送る

eye_tw_analytics

Twitter Cards とアナリティクスの設定・2

tw-analytics_01s

Twitter Cards 設定の完了後、承認されたらアナリティクスも使えるようになります…が、ヘッダーに “@***** does not have access to Twitter Analytics. If you’re a publisher, developer, or advertiser, learn how to get access.” と表示された状態で使用できないため、リンク先のガイドラインを読んでみると「ツイートがコンテンツにリンクされてから24時間後にレポートが利用できるようになる」とあったのでツイート後24時間待ってみましたが、やっぱりまだ使えない。いろいろ検索してみたところ、こちらにて次のように掲載されていました。

Twitter Cards が表示されたツイートが一週間以内に最低10個ないと起動しない

■ Twitter Analyticsにアクセスできない理由 – Genx Beats

…というわけで、別のTwitterアカウントを使って幾つかのツイートから Twitter Cards を表示してみたところ、ようやく Twitterアナリティクス にアクセスできるようになりました。

tw-analytics_02s

アナリティクスを開くと、ツイート, フォロワー, Twitterカード 別に、ツイートの反応やフォロワーの興味分野、性別など情報を見ることができます。

Twitterアナリティクス の詳細については下記の記事が詳しいので、そちらをご参照ください。

このエントリーをはてなブックマークに追加
LINEで送る

eye_tw_cards

Twitter Cards とアナリティクスの設定・1

2014年1月からスタートした、Twitter Cards アナリティクス を利用するために Twitter Cards を設定してみました。

Twitter Cards とは? Twitter Cards を設定するとツイート内にURLが含まれている場合、左下の[開く / 詳細]が[概要を表示]に変わり、そのページのタイトルや概要、アイコン写真などが表示されるため、ツイートの内容もより充実したものになります。

1. Developer(開発者)ページから、Twitter Cards を選択

https://dev.twitter.com/

Developer(開発者)ページ にアクセスし、左端の Twitter Cards をクリックします。

2. Twitter Cards から Card Catalog を選択

https://dev.twitter.com/cards

Twitter Cards ページ内 Four simple steps の① から、Try them をクリックすると、Card Catalog が開きます。

tw_cards_02

Summary=一般向き, Product=ショップ, Photo,Gallery=ギャラリー系, Player=ムービー…など、配信内容に適したカードのレイアウトを選びましょう。

3. Card Validator – カード情報の検証・1

tw_cards_03

Twitter Cards の Try Cards に必要な内容を入力し、生成した Sample Embed Code を 〈head〉 に追記します。必須項目は titledescription ですが、Facebook の OGP を先に設定している場合は cardsite のみ 〈head〉 内に追記すれば完了です。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ユーザー名">

4. Card Validator – カード情報の検証・2

tw_cards_04

〈head〉 に追記できたら Validate & Apply タブに切り替えてプレビューを確認し、エラーがなければ Request Approval ボタンをクリックします。

5. Request Domain Approval – Twitter Cards の承認

tw_cards_05

登録する Twitterアカウントと連結するウェブサイト情報の入力画面が表示されるので、必須項目*を入力後、Request Approval ボタンをクリックすると Twitter への申請は完了です。

6. 承認メールと Twitter の表示

tw_cards_06

申請後、数時間で承認メールが届きます。承認後のツイートから Twitter Cards が反映されるようになりました。

【承認前のツイート】

tw_cards_07

「開く」の表示が…

【承認後のツイート】

tw_cards_08-1

「概要を表示」に変化。

tw_cards_08-2

「概要を表示」のクリックで、リンク先ページの概要や画像が表示されます。

tw_cards_08-3

スマートフォンの表示はこちら。

Twitter Cards が設定できたら、次に Twitter Cards アナリティクス を設定します。
※ ツイートがコンテンツにリンクされ、24時間後にレポートが利用できるようになるため、続きは明日以降の公開予定です。

【追記】
・24時間経ちましたが、未だに Twitter Cards アナリティクス は使えません…(4/18 P.M.6:00)
・問題解決して Twitter Cards アナリティクス にアクセスできるようになりました…(4/19 P.M.8:00)

このエントリーをはてなブックマークに追加
LINEで送る

eye_fb_ogp

FacebookのOGP設定

FacebookのOGP設定をすると、Facebook外のウェブページに設置した「いいね!」ボタンのアクションなどがニュースフィードに表示され、記事を見てもらう機会が多くなります。また、Twitter Cards を設定する際にも便利なので、今回設定してみました。

【設定方法】

1:HTMLの文頭に以下の要素を追加

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
2:<head>~</head>内に以下のHTMLタグを追加

<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website,article または blog" />
<meta property="og:description" content="ページの概要" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="フェイスブックに投稿したときに表示するサムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="fb:admins" content="fb:adminsナンバー" />

補足:fb:adminsナンバーの探し方

プロフィール写真のリンクにある5桁の数字が fb:adminsナンバー です。プロフィール写真のマウスオーバー時に表示されるブラウザのアドオンバーまたは右クリックの要素の検証から確認できます。

fb_admin-num_472

href=”https://www.facebook.com/123456789012345/photos/a.123456789012345.12345.123456789012345/123456789012345/?type=1&source=11″

※ URL内の数字は仮のものです。

<a class="profilePicThumb" id="u_0_1l" href="https://www.facebook.com/123456789012345/photos/a.123456789012345.12345.123456789012345/123456789012345/?type=1&source=11" rel="theater">
なお、Wordpressでの設定は下記のサイトが参考になりました。
■ Facebook投稿時にサムネイルを表示するためのOGP設定-WordPressカスタマイズ – Web Shufu

3:Facebook Developers のデバッガーでチェック

fb_admin-debug-st

設定が済んだら、Facebook Developers のデバッガーでチェックします。

fb_admin-debug

デバッガーでエラーがなければOK。これでFacebook外のウェブページに設置した「いいね!」ボタンのアクションもニュースフィードに表示されるようになりました。

このエントリーをはてなブックマークに追加
LINEで送る

Twitter のプロフィールウィジェットを設置する

Twitter のウィジェットを利用すると、ツイートを自分のウェブサイトやSNSサイトのページに表示できるようになります。プロフィールウィジェット・検索ウィジェット・お気に入りウィジェット・リストウィジェット がありますが、今回はプロフィールウィジェットの設置についての解説です。
 
 
1. Twitterの素材

ログイン後、ウィンドウの右下にTwitter社やヘルプ、利用規約などの掲載欄から、素材をクリックします。
 

 
2. 素材

フォローボタン、ツイートボタン、ウィジェット、Twitterロゴとアイコン からウィジェットを選択します。
 

 
3. ウィジェットの選択

ウィジェットは自分のサイトFacebookにそれぞれ設定することができます。今回は自分のサイトを選択します。
 

 
4. ウィジェットの選択

プロフィールウィジェット・検索ウィジェット・お気に入りウィジェット・リストウィジェット があります。今回はプロフィールウィジェットを選択します。
 

 
5. プロフィールウィジェットのカスタマイズ[設定]

ユーザー名を入力すると、そのアカウントのツイートがプレビューされます。
 

 
6. プロフィールウィジェットのカスタマイズ[カスタマイズ]

データの取得、スクロールバー表示、ツイートの表示方法、表示するツイート数 などについて設定します。
 

 
7. プロフィールウィジェットのカスタマイズ[デザイン]

プロフィールウィジェットのカラーを変更します。
 

 
8. プロフィールウィジェットのカスタマイズ[サイズ]

プロフィールウィジェットのサイズを設定します。
 

 
9. プロフィールウィジェットの書き出し

書き出されたコードを任意のWEBページに張り付けると、プロフィールウィジェットが表示されます。
 

 
追記. プロフィールウィジェットが表示されない場合
Twitterで公式に公開されているツイートボタンやフォローボタンで使用されている widget.js はUTF-8で読み込まないとエラーになるため、
widget.js を指定しているscriptタグに charset=”utf-8″ を追加します。

<script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

また、表示に時間がかかる場合もあるので、しばらく時間をおいて様子を見ることもおすすめします。それでもダメな場合は、再起動やブラウザキャッシュのクリア後、リトライしてみましょう。
 
 

このエントリーをはてなブックマークに追加
LINEで送る