ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Main Menu
Tweet
Facebook
Line
:-?
フラット表示 前のトピック | 次のトピック
投稿者 スレッド
webadm
投稿日時: 2020-6-23 13:49
Webmaster
登録日: 2004-11-7
居住地:
投稿: 3068
SNS対応ボタン追加
本サイトはSNSが登場してtwitter連携を試してみたものの3日坊主に終わり、その後10年近くSNSを利用していなかったので昨今のHTML5対応になってから登場した"いいね"ボタンとかやSNSでのURLの共有ボタンはすっかり対応が遅れていた。

以前作成していたtwitterやfacebookのアカウントを確認して、ついでにLineのアカウントも作成して、それらのSNS用のボタンを各ページに追加。

Twitterボタンに関してはHTML5以前からあるのでどのページに張り付けてもちゃんとそのページのURLリンクでtweetできるので問題なし。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


Facebookに関してはHTML5以降対応のようで、data-hrefとかの属性を使用してurlを指定する仕様になっていたが、HTML5ではdata-hrefはデフォルトで現在のページのurlなので、省略するだけでよかった。

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v7.0" nonce="L4tk5uCk"></script>
<div class="fb-like"  data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>


問題はLineだが、こちらはurlをdata-urlという独自の属性で定義しなきゃいけない仕様で、しかもそこでjavascript関数をコールすることは想定していなくて、そのままjavascriptに変換する方式のようで困った。良く調べると、どうやらdata-urlが指定されていない場合は、HTML共通のurl属性を見に行くようなので、そちらでjavascript関数でlocal.hrefの値を返す関数を定義して参照すればいけた。

<div class="line-it-button" data-lang="ja" data-type="like" data-url="{X_SITEURL}" style="display: none;"></div>
<div class="line-it-button" data-lang="ja" data-type="share-a" data-ver="3" url="getHref()" data-color="default" data-size="small" data-count="true" style="display: none;"></div>
 <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
<script type="text/javascript">
function getHref(){
    var href= location.href;
    return href;
}
</script>


それと今時スマホを持っていないとLineのアカウント作るのに最低でもiPadがないとだめだということが判明。昔はWindows用のLineアプリでもアカウント作れたみたいだが、ダウンロードしたWindows用のLineアプリは既に作成済みのアカウントにログインすることしかできなかった。

LineのアカウントはiPadにLineアプリを導入して、携帯電話番号は手持ちのガラケーの番号を登録し、メールアドレスは個人のメールアドレスを登録(WindowsのLineアプリからログインするにはメールアドレスを指定するしかない)する必要があった。

Lineにログインすると、いちいちiPadのLineアプリに入力する認証番号が表示されるので、iPadに入力する必要があった。

スマホがあれば一台で済むんだけどね。
フラット表示 前のトピック | 次のトピック

題名 投稿者 日時
 » SNS対応ボタン追加 webadm 2020-6-23 13:49

投稿するにはまず登録を
 
ページ変換(Google Translation)
サイト内検索