【最新版】格安SIM(MVNO)料金徹底比較・まとめ - 携帯料金が絶対下がるぞ

新着を見る



最終更新 [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ページよりご連絡ください。

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






usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    【Android版LINE】画面上部に表示される通知のみを非表示(OFF)にする方法

    バージョン6.2.0から画面上部にポップアップ風の通知が。。消すのが難しい。。


    LINE『クローンiPhone』をできないようにする方法、自分でできるセキュリティ対策まとめ

    LINE 5.10.0からクローンiPhoneはできなくなる!でも自分でできるセキュリティ対策はしっかりと!


    【Instagram】インスタで『見たら消える』写真・動画を送る方法、友だちが見たかを確認する方法

    Snapchatのアレがインスタ日本版でも使えるようなったぞー。慣れが必要かも


    【4月6日発売!!】新型『Fire TV Stick 2』を予約する方法 – 価格、スペック、発売日、現行モデルとの比較などまとめ

    やっと発売日が近づいてきたぞー。お急ぎ便を利用すれば発売日到着っぽい!


    注目の記事をぜんぶ見る

  • 最新記事

    【50%OFF】iPhone・iPadが簡単にデュアルモニター化できるiOSアプリ『Duet Display』をおトクに購入する方法

    Windows・MacがiPhoneやiPadでマルチモニター化できちアプリが半額セール中


    【1,000本&期間限定】Evernoteプレミアムパックを29%OFFでおトクに購入する方法 – eSHOPで3年版が約5,000円オフでお買い得

    【5月31日まで】Evernoteが2年分の料金で3年間使えちゃう。今回は1,000本限定なのでお早めに!


    【ドコモ】2017夏モデル機種一覧&全キャンペーンまとめ – 最新機種をおトクに購入する方法

    各モデルの特徴とキャンペーン、おトクな購入方法まとめました


    【激安】人気マンガ「orange(1~5巻)」を10円で購入する方法

    読んでいない人は10円(各巻)で買って読んじゃおう!これはマジで激安!


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

  • 人気記事ランキング

    【5/20~抽選販売受付!】「ニンテンドースイッチ」を予約・購入する方法

    【5/20~抽選販売受付!】「ニンテンドースイッチ」を予約・購入する方法

    ビックカメラ.comで5/21(日)24時まで抽選販売受付中!マイニンテンドーストアで5/25(木)~注文再開!...


    【5/27抽選販売!】「PS VR」を予約・購入できるオンラインショップ・店舗まとめ – 「Playstation VR」を購入する方法

    【5/27抽選販売!】「PS VR」を予約・購入できるオンラインショップ・店舗まとめ – 「Playstation VR」を購入する方法

    ソニーストア各店舗で「特別体験会&販売」が実施中!5/27(土)にビックカメラで抽選販売!...


    ランキングを見る

  • 使い方 カテゴリー

    暮らし
    趣味
    節約・稼ぐ
    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をフォロー


  • サイト運営・コード・htmlの他の記事

    サイト運営・コード・htmlの記事一覧