タグ

SNSとシェアボタンに関するh1rokey0401のブックマーク (2)

  • SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

    サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <

    SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
  • FacebookやTwitterなどSNSのシェアボタンをオリジナル画像にする方法【WordPressも対応】 - usedoor

    facebookやTwitterなどSNSで使うよく見るシェアボタンをオリジナル画像またはスタイルシートなどで作成したオリジナルに変更する方法です。 各コードとWordPressで使う際のサンプルを記載しています。 usedoorでも現在、Facebookのシェアボタン(いいね!じゃないよ)とツイートするボタンをオリジナル画像にしています。 適切な設定を行うことで自分が設定したいオリジナル画像をシェアボタンとして使うことができるようになります。 usedoorでもシェアボタンを増やしていこうかと悩み中です。 オリジナル画像シェアボタンの組み込み方はこのエントリにまとめていきます。 OGPを指定しておこう またSNSボタンを配置するにあたってヘッダーに「OGP」というものを導入しておく必要があります。 絶対に必要というわけではないのですが、自分側で設定しておくことでシェアされた時に自分が表示

    FacebookやTwitterなどSNSのシェアボタンをオリジナル画像にする方法【WordPressも対応】 - usedoor
  • 1