Help us understand the problem. What is going on with this article?

twitter/Facebook/LINEのシェアボタンのカスタマイズ方法

More than 3 years have passed since last update.

2014/6/2 : 投稿先の画像や文言を変更できるものに更新しました。
2014/7/4 : LINEボタンのhref="http://line.me/R/msg/text/ のあとに?(クエスチョンマーク)が無かったため、追加しました。?無しでも動作してたので気づきませんでした。ありがとうございます!

完成品

6.png

HTML

Twitterのツイートボタン

tweetする(装飾無バージョン)

<a class="twitter btn" href="http://twitter.com/share?url=[共有したいURL]&text=[任意のテキスト]&via=[ツイート内に含まれるユーザー名]&related=[関連アカウント]" target="_blank">tweetする</a>

このように表示されます。
1.PNG

お好みでいらない記述は消してください。
例えば関連アカウント入れる必要がないのならば、'&related=[関連アカウント]'を記述しないでください。

Facebookのシェアボタン

Facebookでシェアする(装飾無バージョン)

<a class="fb btn" href="http://www.facebook.com/share.php?u=[共有したいURL]" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Facebookでシェアする</a>

Facebookの場合、使う画像、文字等をカスタマイズしたいならば、OGPをつかいます。
以下がOGPを使うために必要な手順です。

まずheadタグに

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

prefix~を入れてください。

ちなみにprefixかxmlnsのどっちを入れればいいか最初迷いました。

headタグにprefix~足したあと、
以下metaをhead内に足してください。全て必須です。

<meta property="og:title" content="[タイトル]">
<meta property="og:description" content="[任意のテキスト]">
<meta property="og:image" content="[イメージ]">
<meta property="og:type" content="[タイプ]" />
<meta property="og:url" contetnt="[共有したいURL]">

参考:https://developers.facebook.com/docs/opengraph/creating-custom-stories/#objecttypes-properties

注意点①:og:type

"og:type"は、websiteのほかに、

activity sport Businesses bar company cafe hotel restaurant Groups cause sports_league sports_team Organizations band government non_profit school university People actor athlete author director musician politician public_figure Places city country landmark state_province Products and Entertainment album book drink food game product song movie tv_show articleなどから選べます。

例:<meta property="og:type" content="restaurant" />

注意点②:og:image

絶対パスでの指定(http://~から始まるURL)が必要。
ogはFacebookが参照するものだから。

注意点③:変更したのに変わらない場合

また、公開・変更した直後は、facebook debuggerでURLを入れないと、facebookクローラーが認識してくれなかったり、facebook側でキャッシュしている情報をリフレッシュしてくれるので変更後もすぐ確認できる。

https://developers.facebook.com/tools/debug/

facebook debuggerはこちら↑です。

それでもダメな場合は、待つ!といつの間にか反映されていたりします…。

注意点④:リダイレクトURLはだめ

share.php?u=[共有したいURL]がリダイレクトURLだと、ソーシャル情報は表示されなくなります。

LINEで送るボタン

LINEで送る(装飾無バージョン)

<a class="line btn" href="http://line.me/R/msg/text/?[任意のテキスト][共有したいURL]">LINEで送る</a>

[任意のテキスト]と[共有したいURL]の間に&は不要です。
LINEが入っているスマホでテストしてくださいね。
ちなみにPCでテストしてもwebサイトに送られるだけです。

完成品のCSS

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.btn{
    display: block;
    width: 300px;
    height: 20px;
    margin: 10px;
    padding: 20px;
    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
    text-decoration: none;
    color: #fff;
    text-align: center;
}

.twitter{
    background: #55acee;
}

.fb{
    background: #3b5998;
}

.line{
    background: #09B701;

}
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away