たねっぱ！ » ソーシャル https://taneppa.net コツコツあつめるWeb作りのためのたね　たねっぱ！Web系情報ブログ　Webのお役立ちネタ配信中！ Tue, 09 May 2023 00:02:06 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 TwitterCardが表示されるようにして記事が拡散されやすくしよう！ https://taneppa.net/tw_card/ https://taneppa.net/tw_card/#comments Sun, 04 Oct 2015 23:30:19 +0000 tanippa! https://taneppa.net/?p=2810 広報や宣伝としてのSNSの役割が大きくなっている事はもはや周知の事実だと思います。WEBサイトにおいてもFacebookのogpメタタグなんかは実装しているサイトはかなり見かけます。ただTwitterCardに関しては体感的に実装しているサイトは少ない気がします。

折角ある機能を使わないのは勿体無いので、今回はTwitterCardを表示させるための方法をご紹介したいと思います。

TwitterCardの表示方法

TwitterCardの見た目

img_tmp01

Twitterカードは実装すると、上のような見た目でTwitter上で表示されます。上の例は「Summary」タイプのTwitterCardなのですが、Summaryタイプを含め現在4タイプの表示方法が存在しています。

タイプ 概要
Summaryカード 標準的なタイプ
Summary(Large Image)カード 画像が大きいSummaryカード
Appカード アプリのダウンロードリンクを表示できるカード
Playerカード 動画等をTwitter上で再生出来るカード（このカードを使っているサイトではVineが有名）

過去にPhoto,Gallery,Productカードが存在していましたが、SummaryカードとSummary(Large Image)カードに統合され、現在では使用不可(deprecated)となっています。

今回はこの中で一番標準的なSummaryカードを例として、使い方を説明したいと思います。

ソースコード

HTMLソースのheadタグ内に、以下のmetaタグを記述する必要があります。

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="(記事のタイトル)" />
<meta name="twitter:description" content="(記事の説明)" />
<meta name="twitter:image" content="[サムネイルURL(絶対パス)]" />

例えば、この記事のmetaタグは以下のようになっているはずです。

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="TwitterCardが表示されるようにして記事が拡散されやすくしよう！  |  たねっぱ！" />
<meta name="twitter:description" content="今回は、記事がTwitter上で拡散されやすくするための機能であるTwitterCardを表示させるための方法をご紹介したいと思います。" />
<meta name="twitter:image" content="https://taneppa.net/wp-content/themes/taneppa/images/fb.jpg" />

画像を大きく表示するためにSummary(Large Image)を使用したい場合は、「twitter:card」の「content」を「summary_large_image」にすればOKです。

表示のチェック

metaタグを記述するだけではまだ不十分です。Card validatorを利用して、記述や表示に問題がないか確認しましょう。問題なくカードが表示され、Logにエラーが出ていなければOKです。

img_tmp02

確認が終われば、実際に呟いてみて表示を確認しましょう。

以上

以上がTwitter Cardの実装方法になります。TwitterCardに関してはやって悪くなることはないはずですので、積極的に導入していきましょう！

以上、たにっぱでした〜

]]> https://taneppa.net/tw_card/feed/ 0 「LINEで送る」ボタンを実装する方法 https://taneppa.net/send-by-line/ https://taneppa.net/send-by-line/#comments Wed, 13 Mar 2013 07:30:09 +0000 katoppa! https://taneppa.net/?p=510 ユーザ数が1億人を突破したLINE！

どうも。katoppa!です。

LINEのユーザ数が1億人を突破したというニュースは耳に新しい話題ですね。
「LINE」登録ユーザー数が世界1億人を突破、各種記念キャンペーンを開始 – インターネットコム
53ecbfdb
（※NHN Japan Corporation | 「LINE」、世界1億ユーザーを突破より引用）

若年層への浸透率も高いLINEは、Web業界でも今や看過できない重要なソーシャルツールになっています。そんなLINEへURLやテキストを送ることができる「LINEで送る」ボタンが、公式にリリースされていますよ。
img_icon_design
今回はそのボタンの実装方法をご紹介します。

「LINEで送る」、実装してみまSHOW！

まずは公式サイトのページへアクセス！
設置方法｜LINEで送るボタン

http://media.line.naver.jp/howto/ja/

次に、幾つか生成するスクリプトの設定をしましょう。
まずボタンのタイプを選択します。
line01
更に「送るテキスト」を設定。特定の文字列をLINEで送る場合は「直接入力」を、サイトのタイトルとURLをLINEで送る場合は「ページタイトルとURLを使う」を選択してください。（よくわかんないという人は、とりあえず「ページタイトルとURLを使う」を選んでやってみましょう！）
line02
最後に、プレビューを確認して、問題なければソースコードをコピーしましょう。
line03

あとは、HTMLファイルの「LINEで送る」を実装したい箇所に先ほどのソースコードをペーストするだけ。

ここでちょっと注意！

facebookのいいね！ボタンや、twitterのツイートボタンとは少し異なる点がありますので、お気をつけください。
実は、「LINEで送る」というボタンは、現在スマートフォンのみで利用できるボタンです。PCサイトで実装しても、LINEで送ることができず、LINE公式サイトが表示されます。
line

PCサイトで表示してもユーザの混乱を招く結果になるかもしれませんので、「スマホで見た場合のみ表示する」など、工夫する必要がありそうです。

その他にも、文字列やURLは、エンコードをUTF-8にしておく必要があります。そうでない場合、文字化けしてしまうとのこと。

以上です！
正しく使って楽しくユーザビリティを高めましょうー。

]]> https://taneppa.net/send-by-line/feed/ 0