freeSIM.tokyo

SIMフリー関連のはずが旅行とかAirSIMとか

フォローする

  • AIRSIM
  • AMP
  • Apple Watch
  • スマホ
  • 旅行
  • 海外通販
  • WordPress
  • その他
ホーム
AMP

AMPでTwitterやfacebookのシェアボタン(ソーシャルボタン)を付ける方法。

2017/4/18 2019/2/25 AMP

シェアする

  • 0
  • 1

AMPってValidate(文法チェック)も厳しいのでなかなかページのカスタマイズがやりづらいですね。Twitterやfacebokなどのソーシャルのシェアボタンもその1つ。
ところがampのマークアップの拡張で簡単にTwitterやfacebookのシェアボタンが簡単に付くんです。

AMPのソーシャルボタン用タグ「amp-social-share」

AMPにTwitterやfacebookなどのソーシャルへのシェアボタンを付けるには、AMP拡張の<amp-social-share>タグを使うことで実現できます。
こんな感じで表示されます。

「さんタク(サンタク)」の合コンで使ってたアプリは?「押したの誰だ?」 | freeSIM.tokyo

amp-social-shareについてはこちらでパラメータが解説されています。
amp-social-share – Accelerated Mobile Pages Project

AMPページへのTwitter/facebookのシェアボタンの付け方

実際にAMPページにTwitterとfacebookのソーシャルボタンを付ける手順はこちら。

目次

  • headにamp-social-share.jsを埋め込む
  • シェアボタンのタグを挿入
  • facebookは要app_id

headにamp-social-share.jsを埋め込む

ampへのAdsenseの表示と同じように、headにamp-social-share.jsのタグを挿入。

1
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

シェアボタンのタグを挿入

実際にボタンを設置したい所にタグを挿入します。例えばTwitterの場合は、このタグを入れます。

1
<amp-social-share type="twitter"></amp-social-share>

<

facebookは要app_id

facebookだけapp_idが必要です。開発者向けFacebookでサイト用のアプリを設定し、そのapp_idを「data-param-app_id=」で指定してあげます。

1
<amp-social-share type="facebook" data-param-app_id="********"></amp-social-share>

他にも、大きさやテキスト、URLを指定したりできるようです。リファレンスにあるサンプルコードはこんな感じ。

1
2
3
4
<amp-social-share type="linkedin" width="60" height="44"
  data-param-text="Hello world"
  data-param-url="https://example.com/">
</amp-social-share>

typeをみるとLinkdInで、width/heightで大きさ指定。data-param-textで紹介する文章を指定して、data-param-urlでURLを指定できるみたいですね。
typeで指定できるソーシャルネットワークはEmail,facebook,linkedin,pinterest,gplus,tumblr,twitter,whatsappとchrome拡張のWeb Share APIのようです。
このタグの中で「CANONICAL_URL」と「TITLE」はURLとタイトルとして定数になっているようなので、そう記述しておいても機能するっぽい。

1
2
3
4
5
<amp-social-share type="twitter"
    layout="container"
    data-param-text="チェックしてね! TITLE - CANONICAL_URL #freesimtokyo">
    Share on Whatsapp
</amp-social-share>

WordPress AMP対応 モダンWeb制作 レッスンブック
WordPress AMP対応 モダンWeb制作 レッスンブック

シェアする

  • 0
  • 1

フォローする

AMP, amp-social-share, facebook, Twitter, シェアボタン, ソーシャルボタン

関連記事

facebookログインのGrabPayにカード情報を記憶させる方法

Grabのアプリをfacebookログインで使っているとなぜかGrabPayに支払い方法が残らない・・・というときの解決方法。

記事を読む

Google Adsense LabsのAMP自動広告が使えるようになった

Google Adsense Labsの新機能の「AMP 自動テキスト広告およびディスプレイ広告」とやらが使えるようになりました。

記事を読む

Twitterキャプチャは簡単に捏造できるので信用しないほうがいい

たまにTwitterのキャプチャを貼って「こんなツイートしてた!」みたいな記事を見かけますが、簡単に捏造できるので信用しないほうがいいよ、っ...

記事を読む

脱力爆笑のスーパーポップたち

スーパーの値札・ポップのタイポで脱力・爆笑しちゃうものってありますよね・・・。

記事を読む

Search Console(サーチコンソール)でAMPエラー「重要ではない問題」が急増…?

GoogleのSearch Console(サーチコンソール)、旧ウェブマスターツールですね、ここでこのサイトのAMP(Accelerate...

記事を読む

PayPay祭りの全額キャッシュバックガチャ、いくら当たった?

ソーシャルを見るとみんなガンガン当たっているっぽいPayPay祭りの全額バックガチャ。

記事を読む


J-ALERT(Jアラート) 全国瞬時警報システムの警報音ってどんな音?

Search Console(サーチコンソール)でAMPエラー「重要ではない問題」が急増…?

カテゴリー別人気記事

  • AMPエラー対応:タグ「style amp-custom」内のテキストに「CSS i-amphtml- name prefix」が含まれていますが、これは許可されていません。
  • WordPressプラグイン「AMP」のカスタマイズが超簡単だった!
  • Googleに読み込まれたAMPページは後でも更新可能。それよりもエラーチェックを入念に。
  • AMPでTwitterやfacebookのシェアボタン(ソーシャルボタン)を付ける方法。
  • 「続きを読む」だけがAMP対応のサイトが増えてきた・・・?

新着記事

  • Tern Link N8 2014のブルホーン化
  • Tern Surgeのステムを30mm伸ばしたら車速を上げやすくなったかも
  • 自転車に骨伝導イヤホンはピッタリ。
  • ロードバイク用ライトにOlight RN1500はいい!
  • アリエクで買ってもいい自転車ガジェット

はてなブックマーク



何年.net
空港駐車場混雑情報
早割東京
Apple認定整備済製品情報
海外eSIM/SIM比較サイト eSIM.fun | 海外eSIM/SIM比較サイト eSIM.fun

  • AIRSIM
  • AMP
  • Apple Watch
  • スマホ
  • 旅行
  • 海外通販
  • WordPress
  • その他
© 2016 freeSIM.tokyo.