ワイモバイルを通常よりおトクに契約する方法

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

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


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

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


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

usedoor facebookでシェア
usedoor Twitterでシェア
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 facebookでシェア
usedoor Twitterでシェア
usedoor はてなブックマークに保存
usedoor Pocketに保存
usedoor LINEでシェア
usedoor feedly





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

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

【2023年12月】最大3ヵ月無料!LYPプレミアムに無料で登録する方法 – さらに500円分のPayPayポイントやLINEマンガコインの特典あり

キャンペーン

LYPプレミアムが対象者限定で最大3ヵ月無料!さらに500円分のPayPayポイントやLINEマンガの600コインも入会特典でもらえちゃう

【2023年12月】Music Unlimitedを3ヵ月無料で利用する方法 – Amazonの音楽聴き放題が新規は3ヵ月間無料、再登録で3か月月額300円などキャンペーンまとめ

キャンペーン

Amazonの音楽聞き放題サービス「Music Unlimited」がおトクに利用できるキャンペーンを紹介。新規会員登録なら最初3ヵ月間無料(非プライム会員もOK)、再登録なら月額300円×3ヵ月などが開催中

【2023年12月】ソースネクストの割引クーポンまとめ – 年賀状ソフトのクーポンもあり。現在配布中の最新クーポンを全部製品別にまとめてみた

ショッピング

ソースネクストの割引クーポンを総まとめ!公式から一覧情報を頂いているので全てのクーポンがチェックできます。年賀状、Dropboxや1Password、ZEROセキュリティetc...と多数配布中!

【オススメは?】eSIMに対応しているキャリア・格安SIMまとめ&比較 – 月額料金やデータ容量別に比べてみた。eSIMをおトクに利用する方法

携帯電話

eSIM発行に対応しているキャリア、格安SIMを徹底的にまとめてみた。料金とデータ量などで自分にあうオススメのeSIMを見つけよう

【割引クーポンあり】1Password(有料版)をおトクに契約する方法 – ソースネクストの3年版がコスパよし!価格比較してみた

webサービス

1Password3年版がソースネクストに登場!大幅割引やクーポンなどで公式よりおトクな価格で1Passwordが使えちゃう


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

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

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

usedoor facebook
usedoor Twitter
usedoor feedly
usedoor RSS


新着ニュース&記事

【毎月11日&22日のゾロ目の日】Yahoo!ショッピング、オークション(旧:ヤフオク)、PayPayグルメで『ゾロ目の日』限定クーポンをゲットする方法

キャンペーン

ゾロ目の日はYahoo!ショッピング、Yahoo!オークション(旧:ヤフオク)、PayPayグルメなどで配布されるクーポンがアツい!ただ一部クーポンは争奪戦なのでお早めに!

【月曜日】auマンデイで映画を1,100円でおトクに鑑賞する方法 – auユーザー以外もOK!スマートパスプレミアムで割引鑑賞クーポンも

映画

auユーザーじゃなくてもOK!auスマートパスプレミアム会員なら月曜日はおトクに映画が観られる「auマンデイ」

【毎月10日&20日】最大40倍還元+α!『dショッピングデー』でおトクに買い物する方法 – 割引クーポンあり&dポイント消化にも最適。条件あり&要エントリー

セール

dショッピングでは毎月10日&20日におトクに買い物ができる「dショッピングデー」が開催。dポイント最大40倍+α&ポイント利用分も10%還元!

【先着8,000名まで!!】「OCNオンラインショップのお買物でdポイント最大20%還元キャンペーン」が開催 – お得にお買い物する方法

キャンペーン

OCNオンラインショップのお得なキャンペーン。エントリーするだけで支払い方法などに限らず16%ポイント還元。キャンペーン期間は12月7日17:00~18日14:00まで。


新着記事をもっと見る

usedoorをフォロー


注目・おすすめ記事

【dポイント】「期間・用途限定」とは?オススメの使い方、使えるお店や有効期限確認方法など

キャンペーンなどでもらえる『dポイント(期間・用途限定)』は割と用途が広い!そしてついにAmazonで使えるようになる!!


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

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


【11月版】IIJmioで安くiPhoneやAndroidスマホを買う方法・スマホ一覧 – ゴーゴーキャンペーンスマホ大特価セールで一括110円~

スマホ安売りでお馴染みのIIJmio恒例の『スマホ大特価セール』がゴーゴーキャンペーンとして開催!今回も特にAndroidスマホが大幅割引で激安に。2023年11月30日まで


【楽天モバイル】2回線目でもRakuten Hand 5Gが一括1円で買えたお話。複数回線でも割引対象となるキャンペーンの条件/詳細まとめ – おトクに購入する方法

楽天モバイルがRakuten Hand 5Gを一括1円で販売するキャンペーンを開催中!すでにRakuten UN-LIMITを契約中でも一括1円で買えた!細かい条件には注意



注目の記事をぜんぶ見る


最新記事&ニュース

【毎月11日&22日のゾロ目の日】Yahoo!ショッピング、オークション(旧:ヤフオク)、PayPayグルメで『ゾロ目の日』限定クーポンをゲットする方法

ゾロ目の日はYahoo!ショッピング、Yahoo!オークション(旧:ヤフオク)、PayPayグルメなどで配布されるクーポンがアツい!ただ一部クーポンは争奪戦なのでお早めに!


【月曜日】auマンデイで映画を1,100円でおトクに鑑賞する方法 – auユーザー以外もOK!スマートパスプレミアムで割引鑑賞クーポンも

auユーザーじゃなくてもOK!auスマートパスプレミアム会員なら月曜日はおトクに映画が観られる「auマンデイ」


【毎月10日&20日】最大40倍還元+α!『dショッピングデー』でおトクに買い物する方法 – 割引クーポンあり&dポイント消化にも最適。条件あり&要エントリー

dショッピングでは毎月10日&20日におトクに買い物ができる「dショッピングデー」が開催。dポイント最大40倍+α&ポイント利用分も10%還元!


【先着8,000名まで!!】「OCNオンラインショップのお買物でdポイント最大20%還元キャンペーン」が開催 – お得にお買い物する方法

OCNオンラインショップのお得なキャンペーン。エントリーするだけで支払い方法などに限らず16%ポイント還元。キャンペーン期間は12月7日17:00~18日14:00まで。



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


usedoorをフォロー


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

【誰でもOK!!】『ドコモオンラインショップ限定 機種購入割引』でiPhone・Androidスマホを大幅割引で購入する方法&対象機種まとめ – 機種のみ購入でもOK!

ドコモオンラインショップ限定機種購入割引で対処機種が大幅割引!機種単体(白ロム)購入も対象。割引の条件、対象機種は?


【2023年12月】楽天モバイル「紹介キャンペーン」で楽天ポイントをゲットする方法 – 招待リンクあり。適用条件や注意点などまとめ

2023年2月より楽天モバイルが友だち紹介キャンペーンを実施。8月より招待された人の特典が増額!今なら6,000ポイントがもらえる。今月の条件や注意点などまとめ


【2023年12月】ahamoのキャンペーンまとめ – ドコモ経由で10,000dポイント還元、アゲちゃうWeeeek~冬の陣~、にじさんじ、ahaクエストなど

ahamoと新規契約でdポイントがもらえたり、既存ユーザーでも対象の開催中のキャンペーンをまとめてみました。ドコモSIM経由のちょっと裏技っぽいおトクな契約方法も


【割引クーポンあり】1Password(有料版)をおトクに契約する方法 – ソースネクストの3年版がコスパよし!価格比較してみた

1Password3年版がソースネクストに登場!大幅割引やクーポンなどで公式よりおトクな価格で1Passwordが使えちゃう


【2023年12月】メルカリ/メルペイに招待コードを適用しポイントをゲットする方法 – 紹介キャンペーン利用で開始時に500ポイントがもらえる

メルカリ・メルペイを始めるなら最初に招待コードの登録がおトク!今なら必ずメルカリやメルペイの買い物時に利用できるポイントがもらえる



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