【au Wowma!が熱い!!】超パワーアップで超たまる au WALLET ポイント!20%還元キャンペーン

最終更新 [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がハマった状態でツイート画面が立ち上がります。

つぶやいて欲しいなぁ…

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

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


< この記事をシェア >






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

現在開催中の「おトク」なキャンペーン、セール

激安の2ヵ月で199円!Amazonの読み放題サービス「Kindle Unlimited」に超おトクに登録する方法

キャンペーン

本やコミック、雑誌が読み放題になるAmazonのKindle Unlimitedが2ヵ月で199円と激安で利用できる!

【ドコモ】「ギガホ」「ギガライト」「ケータイプラン」にプラン変更して最大1,000dポイントをゲットする方法

キャンペーン

Amazonプライム年会費1年無料も対象のドコモの新プランにプラン変更するとdポイントがもらえるキャンペーンがスタート!要エントリー

【最大3万円還元】ソフトバンクのiPhone XS / XS Maxを購入して高額キャッシュバックをGETする方法

携帯電話

「iPhone XS / XS Max」でもキャッシュバックがもらえるぞ!さらにPayPayボーナスライトももらえます。これはマジで熱い!

【誰でも参加OK】東京ディズニーランドの新エリア、新アトラクションが先行体験できるチケットが当たるドコモ「ドリームキャンペーン」の参加方法

キャンペーン

当たればディズニーランドの新エリア、アトラクションがオープン前に体験できる!ドコモ以外の人でも応募OK!

【一括15,120円~】ワイモバイルのiPhone 6sとiPhone 7が安いぞ! – おトクにワイモバイルのiPhoneを購入する方法

携帯電話

ワイモバイルのiPhone 6sが一括15,120円~、iPhone 7は一括25,200円~と激安で販売しています。


≫ 開催中のキャンペーンをもっと見る

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

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


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




新着記事

【在庫情報あり】「ニンテンドースイッチ」を予約・おトクに購入する方法

ゲーム

イトーヨーカドーネット通販でニンテンドースイッチの在庫が復活!

【ファミマでdポイント40倍!!】ファミペイにdポイントカード、楽天ポイントカード、Tポイントカードをアプリに登録する方法

スマホアプリ

ファミリーマートがdポイント、楽天ポイント、Tポイントに対応!ファミペイはアップデートでアプリ内にポイントカードが登録できるようになった

【iPhone】知らない電話番号からの着信を消音にする方法 – 電話帳に登録していない番号や着信拒否している番号からの電話を消音にして履歴にだけ残す設定

iPhone / iPad

着信⇒この電話番号知らない…⇒とりあえず出ないというiPhoneユーザーにはオススメの「不明な発信者を消音」設定


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    【1月は…】ドコモ『ハピチャン』で”おいしい特典”を受け取る方法 – スーパーフライデーや三太郎の日のドコモ版。 ただし条件が…

    1月のハピチャンは…?4月までは「29歳以下のドコモユーザー」が対象。各月の特典内容や適用条件をまとめました~


    【1月版】格安SIM(MVNO)料金徹底比較・まとめ&キャンペーン情報! – 最安の格安SIMを調べる方法

    今、契約するなら一番おトクな格安SIMは?キャンペーンを利用してお得に契約しちゃおう!


    Pokemon GO Plusを”バッテリー充電式”にできる『Pocket Energy(ZPM001K)』の使い方、レビュー

    ポケモンGOプラスがバッテリー充電式になる衝撃的なアイテム!


    Android 9.0 Pieの基本操作まとめ – タスクボタンがなくなってジェスチャー操作が増えてる!アプリ切替や終了などはけっこう変わった

    9.0 Pieから操作方法がけっこう変わってます!これまでAndroidを使ってきた人には最初、違和感があるかも。


    注目の記事をぜんぶ見る

  • 最新記事

    【在庫情報あり】「ニンテンドースイッチ」を予約・おトクに購入する方法

    イトーヨーカドーネット通販でニンテンドースイッチの在庫が復活!


    【ファミマでdポイント40倍!!】ファミペイにdポイントカード、楽天ポイントカード、Tポイントカードをアプリに登録する方法

    ファミリーマートがdポイント、楽天ポイント、Tポイントに対応!ファミペイはアップデートでアプリ内にポイントカードが登録できるようになった


    【iPhone】知らない電話番号からの着信を消音にする方法 – 電話帳に登録していない番号や着信拒否している番号からの電話を消音にして履歴にだけ残す設定

    着信⇒この電話番号知らない…⇒とりあえず出ないというiPhoneユーザーにはオススメの「不明な発信者を消音」設定


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

  • usedoorをフォロー


  • 現在開催中の"おトク"なセール、キャンペーン、お買い得アイテムまとめ

    【誰でも参加OK】東京ディズニーランドの新エリア、新アトラクションが先行体験できるチケットが当たるドコモ「ドリームキャンペーン」の参加方法

    当たればディズニーランドの新エリア、アトラクションがオープン前に体験できる!ドコモ以外の人でも応募OK!


    【キャッシュバック】ソフトバンクのiPhone XRを激安で購入する方法

    ソフトバンクのiPhone XRが激安!通常よりお得に買えるぞ!


    【ドコモ】「ギガホ」「ギガライト」「ケータイプラン」にプラン変更して最大1,000dポイントをゲットする方法

    Amazonプライム年会費1年無料も対象のドコモの新プランにプラン変更するとdポイントがもらえるキャンペーンがスタート!要エントリー


    【1月版】dカード&dカード GOLDのおトクな使い方、徹底まとめ。ドコモユーザー以外にもメリット多数!おトクな入会キャンペーン開催中

    10%還元で噂のdカード GOLDと通常dカードの還元率、メリット、デメリット、比較、疑問を徹底的にまとめています


    格安SIM「LINEモバイル」をおトクに契約する方法 – 月額基本料金5ヵ月半額、LINE Pay残高/ポイントが必ずもらえる&冬の格安スマホセールで端末割引も

    ドコモ、au、ソフトバンク全ての回線が選べるLINEモバイル。キャンペーンを使えば、もっとおトクに契約できる!


    開催中のキャンペーンをぜんぶ見る

  • あわせて読みたい記事