RECOMEND
You are here: HomeCaseTipsソーシャルボタン設置で気をつけること

ソーシャルボタン設置で気をつけること


みなさま、こんにちは。

前回の日記ではソーシャルボタンの設置方法について書きました。
そして今回はその補足として、よりユーザーが使いやすくするテクニックについて説明いたします。
※なお、今回はライブドアブログでの経験を基にした説明です。他のブログサービスにおいては勝手が異なる可能性がありますのでご了承ください。

 


・リンク時に記事名を先に表示させる。

TwitterのツイートボタンやFacebookのいいねボタンを押すとそのリンクの件名は「サイト名:記事名」となるはずです。このブログの場合だと「モデルケース|次世代研究所:記事名」といった感じですね。これだと場合によって記事名が尻切れトンボになってしまい、肝心の内容がわからないということになりかねません。

そこでこのように「記事名:サイト名」で表示させるように設定します。

サムネ変更3_copy

まずはブログ設定から、デザインの編集画面にいきます。そこから個別記事に関するHTMLページの編集を行います。
上部に「<title><$BlogTitle ESCAPE$> : <$ArticleTitle ESCAPE$></title>」と記述された行が見つかると思います。(Ctrl+Fで文字検索できます。)
これを「<title><$ArticleTitle ESCAPE$> : <$BlogTitle ESCAPE$></title>」と書き換えます。これを保存すれば完了です。

簡単なので是非試してみてください。

・リンクのサムネイル画像を変更する。

次にFacebookいいねやmixiチェックを行った際に表示されるリンク詳細のサムネイル画像を変更しましょう。
このサムネイル画像、何も設定をしていないとバナー広告など意図しない画像が表示されることがあります。

サムネ変更1_copy

これでは見栄えが悪すぎますね。
このサムネイル画像もHTMLを編集して設定することができます。

先と同様にブログ設定からHTMLの編集ページに行きます。ライブドアブログの場合、トップページ、個別記事、カテゴリ、月別アーカイブと分かれていますが、それぞれのヘッダー部分(<head>~</head>の間)に「<meta property=”og:image” content=”表示させたい画像のURL”/>」を挿入します。
これで保存すれば完了です。

ちゃんと設定できているか確認するには、URLリンターを使います。
ここにURLを入力するだけでサムネイル画像などの情報が確認できます。

urllinter

以上、ソーシャルボタンを導入する上で効果的なテクニックを紹介させていただきました。
このようなちょっとしたユーザビリティの改善が、今後ソーシャルで評判を高めるためには大事ですね。

 


Comments are closed.