【激アツ!!】楽天モバイル回線契約で14,000ポイントがもらえる

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

シェアボタンをオリジナルにしよう


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

この記事内には広告リンクが含まれています。

\\どうかフォローをお願いします…//


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

< この記事をシェア >

usedoor Twitterでシェア
usedoor facebookでシェア
usedoor はてなブックマークに保存
usedoor Pocketに保存
usedoor LINEでシェア
usedoor feedly


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

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

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

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

OGPを指定しておこう

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


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


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

Facebook シェアボタンの基本形

<a title=”facebookでシェアする” href=”http://www.facebook.com/sharer.php?u=【シェアしたいURL】&t=【記事のタイトル】” target=”_blank”>
<img src=”【画像URL】”>
</a>


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

<a title=”facebookでシェアする” href=”http://www.facebook.com/sharer.php?u=<?php echo(“http://” . $_SERVER[“HTTP_HOST”] . $_SERVER[“REQUEST_URI”]); ?>&t=<?php echo trim(wp_title( ”, false)); ?>” target=”_blank”>
<img src=”【画像URL】>
</a>

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

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


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

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

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

ツイートボタンの基本形

<a href=”http://twitter.com/share?url=【ツイートしたいURL】&text=【ツイートしたいタイトル】&via=【@につけたいユーザー名】&related=【ツイートに関連するユーザー】&hashtags=【ハッシュタグ】” target=”_blank”>
<img src=”【画像URL】”>
</a>


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

<a href=”http://twitter.com/share?url=<?php echo(“http://” . $_SERVER[“HTTP_HOST”] . $_SERVER[“REQUEST_URI”]); ?>&text=<?php echo trim(wp_title( ”, false)); ?>&via=sitename” target=”_blank”>
<img src=”<?php echo $twimg; ?>”>
</a>

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


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

つぶやいて欲しいなぁ…

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

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

< この記事をシェア >

usedoor Twitterでシェア
usedoor facebookでシェア
usedoor はてなブックマークに保存
usedoor Pocketに保存
usedoor LINEでシェア
usedoor feedly



\\どうかフォローをお願いします…//



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

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

【第4弾開始!!】ワイモバイル「10周年大感謝祭」まとめ – 誰でも参加OK!PayPay大還元、紹介、スマホ安売り、抽選会などで構成される大型キャンペーン開催!

キャンペーン

ワイモバイルが10周年を記念した大型キャンペーン~第4弾~を4月1日から開催!ワイモバを契約中の人もしてない人も参加できてPayPayが当たるなど特典多数!

【ドコモ】『オンラインショップおトク割』でスマホをおトクに購入する方法 – 端末のみ購入もOK!対象機種、割引金額、適用条件まとめ

携帯電話

ドコモオンラインショップが新たな割引「オンラインショップおトク割」をスタート!5G WELCOME割併用で超大幅割引となる機種も!

【紹介コードあり】Yahoo!フリマの「友達紹介キャンペーン」でPayPayポイント500円相当をゲットする方法(2025年7月)

キャンペーン

Yahoo!フリマ(旧PayPayフリマ)を始めるなら「友達紹介キャンペーン」の紹介コード入力で500円分のPayPayポイントがもらえる。2025年7月31日まで

【機種変更でも実質6,800円~!!】ワイモバイルで折りたたみスマホ「Libero Flip」をおトクに購入する方法 – 一括9,800円&PayPayポイント還元で購入できる

携帯電話

ワイモバイルの折りたたみスマホ「Libero Flip(A304ZT)」が値下げ!機種変更でも一括9,800円と激安!!さらに必ずPayPayポイントがもらえる

【既存ユーザーも対象】楽天モバイルで「YouTube Premium」を3ヵ月間無料で申し込む方法 – 対象となる条件、注意点など

Youtube

楽天モバイル契約者はYoutube Premiumが3ヵ月無料で利用できる。条件はシンプルで既存ユーザーも対象!注意点もアリ


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

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

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

usedoor Twitter
usedoor facebook
usedoor feedly
usedoor RSS


新着ニュース&記事

ワイモバイル、iPhone 15とiPhone SE(第3世代)を値下げ

ニュース

2025年7月11日より、ワイモバイルオンラインストアで「iPhone 15」「iPhone SE(第3世代)」が値下げ。

【在庫/抽選販売情報あり】Nintendo Switch 2の予約・発売日や価格、ショップなど販売情報まとめ – 初代から進化したポイントも解説

ゲーム

ついに待望の「Nintendo Switch 2」が発売!抽選販売情報やスペック、進化したポイントなどを解説。

【プライムデー】最大10%還元!Amazonふるさと納税でプライムデーキャンペーン開催!簡単な条件でおトクに寄付できる

キャンペーン

2025年のプライムデーにあわせてAmazonふるさと納税でもキャンペーン開催。寄付金額の最大10%分のポイント還元!7月14日まで

ドコモ、au、ソフトバンクから「Galaxy Z Flip7」「Galaxy Z Fold7」が発売

ニュース

Galaxy AI搭載の折りたたみスマートフォン「Samsung Galaxy Z Flip7」「Samsung Galaxy Z Fold7」が2025年8月上旬以降に発売。7月17日より予約受付を開始。

【プライムデー】4ヵ月無料!Amazonの音楽聴き放題「Music Unlimited」をおトクに登録する方法 – プライムデー連動の大型キャンペーン開催中!

キャンペーン

Amazonの音楽聞き放題サービス「Music Unlimited」が4ヵ月間無料で利用できるプライムデー連動キャンペーン開催!7月15日(火)まで。非プライム会員でも3ヵ月無料


新着記事をもっと見る

usedoorをフォロー


注目・おすすめ記事

【iPhone】マスクを装着したままでFace IDでロックを解除する方法まとめ – iOS 15.4以降、iOS 15.3以前、Apple Watch着用など

iOS 15.4から正式機能になった「マスクをしたまま顔認証でiPhoneのロックを解除」を設定してみた!その他、iPhone 12未満のモデルで使える小ワザも


【iPhone・Androidスマホ】『緊急速報』をオン⇔オフする方法 – 外出自粛や緊急地震速報、Jアラートなどを無効化もできる。届かない、非対象機種の対処方法も

緊急地震速報&ミサイル発射も警告してくれるJアラートはちゃんとスマホで受信出来た方がいい!外出自粛はちょっとウザいけどしょうがない


【完全無料!!】Amazon Musicの音楽を無料で聴く方法 – 非プライム会員でも利用OKの『Amazon Music FREE』登場!できることや機能制限、利用環境など

Amazonの音楽聞き放題サービスに無料版の『Amazon Music FREE』が登場!マジで無料で音楽が聴ける(もちろん制限あり)


楽天ポイントを「Appleギフトカード」に交換する方法 – Apple Gift Card 認定店での買い物手順。期間限定ポイントの消化にアリ!クーポンも登場

期間限定の楽天スーパーポイントも利用OK!iPhoneも買えるAppleギフトカードに交換できる。セール時は安く購入することもできておトク


【プライムデー】3ヵ月無料!Amazon「Audible」のキャンペーンまとめ – プライムデー連動の大型キャンペーン開催中!

7月31日までAudibleが過去最長クラスの3ヵ月無料で利用できるプライムデー連動キャンペーン開催中!Amazonの朗読サービス「Audible」に登録するならキャンペーンの利用がオススメ



注目の記事をぜんぶ見る


最新記事&ニュース

ワイモバイル、iPhone 15とiPhone SE(第3世代)を値下げ

2025年7月11日より、ワイモバイルオンラインストアで「iPhone 15」「iPhone SE(第3世代)」が値下げ。


【在庫/抽選販売情報あり】Nintendo Switch 2の予約・発売日や価格、ショップなど販売情報まとめ – 初代から進化したポイントも解説

ついに待望の「Nintendo Switch 2」が発売!抽選販売情報やスペック、進化したポイントなどを解説。


【プライムデー】最大10%還元!Amazonふるさと納税でプライムデーキャンペーン開催!簡単な条件でおトクに寄付できる

2025年のプライムデーにあわせてAmazonふるさと納税でもキャンペーン開催。寄付金額の最大10%分のポイント還元!7月14日まで


ドコモ、au、ソフトバンクから「Galaxy Z Flip7」「Galaxy Z Fold7」が発売

Galaxy AI搭載の折りたたみスマートフォン「Samsung Galaxy Z Flip7」「Samsung Galaxy Z Fold7」が2025年8月上旬以降に発売。7月17日より予約受付を開始。


【プライムデー】4ヵ月無料!Amazonの音楽聴き放題「Music Unlimited」をおトクに登録する方法 – プライムデー連動の大型キャンペーン開催中!

Amazonの音楽聞き放題サービス「Music Unlimited」が4ヵ月間無料で利用できるプライムデー連動キャンペーン開催!7月15日(火)まで。非プライム会員でも3ヵ月無料



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


usedoorをフォロー


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

ワイモバイルを通常よりおトクに契約する方法 – SIMのみで26,000円相当還元!!

ワイモバイルオンラインストアでワイモバイルのSIMカードを契約すると最大26,000円相当の還元がもらえる!


【楽天モバイル】スマホ料金チェック⇒回線契約で最大9,000ポイントがもらえるキャンペーン開催。診断だけで100ポイントも!特典、条件などまとめ

楽天モバイルがスマホ料金チェックを行ってから回線を契約するとのりかえで9,000ポイント、新規契約で5,000ポイントをプレゼントするキャンペーンを毎月開催


【ドコモ】『端末購入割引』でiPhone・Androidスマホ・ケータイをおトクに購入する方法 – 適用条件と割引による値下げ、現在の対象機種まとめ

ドコモの分離プラン導入後に新たに登場した「端末購入割引」 条件を満たしていれば機種変更でも対象のiPhoneやAndroidがおトクに買える!


【紹介コードあり】「Oliveアカウント紹介プログラム」で1,000円相当のVポイントをゲットする方法

紹介コードを入力してエントリーすると紹介した人・紹介された人それぞれに1,000円相当のVポイントが貰える「Oliveアカウント紹介プログラム」。


【最大10,000dポイント】毎日運試し。わくわく毎日くじでdポイントをゲットする方法

毎日引けるdポイントが当たるくじが登場。最高は10,000dポイントらしいけど…



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