【当サイト限定 ドコモクーポン配布中!】iPhone 8、7、Plus、iPadが5,400円割引になる『限定割引クーポン』をusedoor読者にプレゼント!

新着を見る



最終更新 [2014年7月15日]

[スポンサーリンク]


キーワード:アカウント, サイト作成, 登録,



facebookやTwitterなどSNSで使うよく見るシェアボタンをオリジナル画像またはスタイルシートなどで作成したオリジナルに変更する方法です。

各コードとWordPressで使う際のサンプルを記載しています。

usedoorでも現在、Facebookのシェアボタン(いいね!じゃないよ)とツイートするボタンをオリジナル画像にしています。
適切な設定を行うことで自分が設定したいオリジナル画像をシェアボタンとして使うことができるようになります。

usedoorでもシェアボタンを増やしていこうかと悩み中です。
オリジナル画像シェアボタンの組み込み方はこのエントリにまとめていきます。

OGPを指定しておこう

またSNSボタンを配置するにあたってヘッダーに「OGP」というものを導入しておく必要があります。
絶対に必要というわけではないのですが、自分側で設定しておくことでシェアされた時に自分が表示させたいように表示させることができるようになります。
Open Graph Protocol(通称:OGP)の設定方法 【wordpressサンプルあり】


ではオリジナルシェアボタンの導入を代表的なところから。


facebookのシェアボタンをオリジナル画像に変更する

Facebook シェアボタンの基本形

Facebook シェアボタンをWordPressで使う場合のサンプル

↑はURLに現在の記事のURL(これはWordPressというかPHPですが。。)、タイトルにWordPressのwp_titleを使ってtrimしているというものです。

この方法でハメたのがコレ↓


クリックしてみてください~
タイトルとURLがハマった状態でFacebookにジャンプします。

そのままシェアしてもらえると嬉しいなぁ。。

Twitterのツイートボタンをオリジナル画像に変更する

ツイートボタンの基本形

ツイートボタンをWordPressで使う場合のサンプル

この方法でハメたのがコレ↓


クリックしてみてください~
タイトルとURLがハマった状態でツイート画面が立ち上がります。

つぶやいて欲しいなぁ…

いろんなシェアボタンいろいろと書いていきます!

いまから色々なシェアボタン、オリジナルバージョンの埋め込み方を追記していきます!
末永く、またご指摘や方法を教えて頂ける方からのご連絡もお待ちしています!


< この記事をシェア >




usedoorの新着記事をチェック!

記事を書くヤル気が出るのでフォローよろしくお願いしますm(._.)m


このFacebookやTwitterなどSNSのシェアボタンをオリジナル画像にする方法【WordPressも対応】の最終更新日は2014年7月15日です。
記事の内容に変化やご指摘がありましたら問い合わせフォームまたはusedoorのTwitterまたはusedoorのFacebookページよりご連絡ください。

キーワード:アカウント , サイト作成 , 登録 ,




新着記事

【iOS 11~】iPhone・iPadのホーム画面上の複数のアプリアイコンをまとめて同時に移動させる方法

iPhone / iPad

特にiPadだと使いやすくて超便利!まとめてフォルダにブチ込むこともできちゃう

【iOS 11で進化】iPhoneの背面フラッシュライト(懐中電灯)の明るさを変更する方法

iPhone / iPad

iOS 10~コントロールセンターからサクッと懐中電灯の明るさを変更できちゃいますぜ

【iOS 11~】iPhone・iPadの標準カメラアプリでQRコードを読み取る方法 – オフにもできる

iPhone / iPad

ついにiOS標準機能に。もう専用のQRコードリーダーアプリは不要かも

「Newニンテンドー2DS LL モンスターボールエディション/ピカチュウエディション」を予約・購入する方法

ゲーム

『ポケットモンスター ウルトラサン・ウルトラムーン』の発売に合わせて2つの2DS LL限定エディションが登場!


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    【一括0円】機種変更もOK!ドコモタブレット『dtab d-01H』を一括0円でゲットする方法

    機種変更も一括0円!端末購入サポートOKな人はけっこういいぞー


    【話題】息を吹きかけると火がつく&USB充電ライター『KURUI』の使い方、レビュー – 返品交換になっちゃったけど。

    品薄が続くちょっと話題のKURUIライターがやっと届いたのでレビューしてみた。


    便利すぎ!LINEで超簡単に『乗り換え案内(ルート検索)』を使う方法 – 始発/終電/運行情報も一発!

    NAVITIME×LINEが手軽すぎてヤバい!ワンタップやアバウトなメッセージだけでサクッとルートがわかっちゃう


    注目の記事をぜんぶ見る

  • 最新記事

    【iOS 11~】iPhone・iPadのホーム画面上の複数のアプリアイコンをまとめて同時に移動させる方法

    特にiPadだと使いやすくて超便利!まとめてフォルダにブチ込むこともできちゃう


    【iOS 11で進化】iPhoneの背面フラッシュライト(懐中電灯)の明るさを変更する方法

    iOS 10~コントロールセンターからサクッと懐中電灯の明るさを変更できちゃいますぜ


    【iOS 11~】iPhone・iPadの標準カメラアプリでQRコードを読み取る方法 – オフにもできる

    ついにiOS標準機能に。もう専用のQRコードリーダーアプリは不要かも


    「Newニンテンドー2DS LL モンスターボールエディション/ピカチュウエディション」を予約・購入する方法

    『ポケットモンスター ウルトラサン・ウルトラムーン』の発売に合わせて2つの2DS LL限定エディションが登場!


    最新記事をもっとチェック

  • 人気記事ランキング

    【ミニスーファミ予約開始!!】『ニンテンドークラシックミニ スーパーファミコン』を予約・購入する方法

    【ミニスーファミ予約開始!!】『ニンテンドークラシックミニ スーパーファミコン』を予約・購入する方法

    ジョーシンが抽選受付開始!その他いくつか抽選の場所アリ。ミニスーファミの発売日は10月5日で、価格は7,980円!安い!...


    【9月版】のりかえでiPhone 7を買うならどこが安いか調べてみた! – ドコモ・au・ソフトバンクのiPhone 7料金比較・まとめ

    【9月版】のりかえでiPhone 7を買うならどこが安いか調べてみた! – ドコモ・au・ソフトバンクのiPhone 7料金比較・まとめ

    9月にiPhone7買うなら3キャリアどこが一番安い?MNPで購入した場合の料金を比較...


    『iOS 11』アップデートの感想・ツイートまとめ – iOSをアップデートする方法

    『iOS 11』アップデートの感想・ツイートまとめ – iOSをアップデートする方法

    iOS11にアップデートする前にみんなの反応をチェック!


    ランキングを見る

  • 使い方 カテゴリー

    暮らし
    趣味
    節約・稼ぐ
    WEB
    デジタル
  • キーワード

    Amazon Android apple au Chrome iOS iOS 8 iPad iPhone iPhone 6 iPhone 6 Plus iPhone 6s iPhone 6s Plus iPhone 7 iPhoneおトク Kindle MNP PC SIMフリー SoftBank Windows windows 10 アップデート オトク キャッシュバック クーポン スタンプ スマートフォン セキュリティ ソフトバンク タブレット ドコモ ドコモオトク ドコモオンラインショップ レビュー ワイモバイル 写真 削除 動画 新規契約 楽天モバイル 機種変更 注目・ピックアップ 無料 登録
  • usedoorをフォロー


  • あわせて読みたい記事