ベストセラー人気 WordPress テーマTop 30 詳細

プラグインを使用せずに、ソーシャル共有ボタンを追加する(Naver、カカオストーリー)

Last Updated:2021年8月12日| 10のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

WordPressは、プラグインを使用して、簡単にソーシャル共有ボタンを追加することができます。 Naver、カカオトーク、 Facebook, Twitter、カカオストーリーなどで共有するボタンを追加したい場合Korea SNSやソーシャル共有ボタンByコスモスパームプラグインを使用することができます。 プラグインを使用せずに Naver 共有ボタンを表示したい場合は、以下の内容を参照してください。

[この記事は2021年8月12日に最終更新されました。 ]

軽くて速いソーシャル共有ボタンのプラグイン

WordPress(WordPress)サイトでは、さまざまなソーシャル共有プラグインを利用することができます。 ソーシャル共有プラグインをインストールすると、サイトの速度に影響を与える可能性があります。 サイトに影響を最小限に抑えるため、以前の記事で紹介した ソーシャルメディアフェザーというプラグインに変えました。

しかし、 Naver バンドの文を共有したい方法を探してみるのプラグインを変更することは容易ではないでした。 だから、直接コードで追加することにしました。

コードで WordPress ポストにソーシャル共有ボタンを追加する

長い時間前にこのブログのプラグインを使用せずに Naver 共有ボタンを追加する方法について紹介したことがあります。

上記の文で紹介された方法を応用してもなりそうです。 私寀ーブログでSNS共有ボタンを表示するために使われているコードを応用して、このブログに Facebook, Twitter, Naver, Naver バンド、カカオストーリーなど共有することができるボタンを追加しました。 寀ー飾る - SNS共有ボタンの作成という文で紹介されたコードを参照していました。

WordPressでは、次のようなコードを任意の場所に追加します。

<!-- SNS 공유 버튼 -->
											<div class="sns-go">
												<ul>
													<li>
														<a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" rel="nofollow"><img src="../images/naver.png" width="35px" height="35px" alt="Naver 블로그 공유하기"></a>
													</li>
													<li>
														<a href="#" onclick="javascript:window.open('http://band.us/plugin/share?body='+encodeURIComponent(document.title)+encodeURIComponent('\r\n')+encodeURIComponent(document.URL)+'&route='+encodeURIComponent(document.URL), 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="Naver 밴드에 공유하기" rel="nofollow"><img src="../images/band.png" width="35px" height="35px" alt='Naver 밴드에 공유하기'></a>
													</li>
													<li>
														<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" rel="nofollow"><img src="../images/facebook.png" width="35px" height="35px"  alt="Facebook 공유하기"></a>
													</li>
														<li>
														<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" rel="nofollow"><img src="../images/twitter-icon.png" width="35px" height="35px"  alt="Twitter 공유하기"></a>
													</li>																						
													<li>
														<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url=' +encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;" target="_blank" alt="Share on kakaostory" rel="nofollow"><img src="../images/kakao.png" width="35px" height="35px" alt="카카오스토리 공유하기"></a>
													</li>
												</ul>
											</div>

共有ボタンのイメージのパスが適切に修正します。

上記のコードをポスト上部またはポスト下部に追加することができます。 追加する方法は、テーマに沿って少しずつ異なります。 チャイルドテーマを作成し、通常 single.php ファイルや single-content.php ファイルの適切な位置に追加することになります。

そしてCSSコードを使用してSNS共有ボタンを並べ替えることができます。 たとえば、このブログでは、次のようなCSSコードを使用していました。

/* SNS 공유 */
.sns-go ul {
  list-style-type: none;
  margin: 40px 0 0 0;
  padding: 0;
  overflow: hidden;
}

.sns-go li {
  float: left;
	padding-right: 5px;
}

.sns-go img {
    border-radius: 5px;
    width: 35px;
}

.single .entry-content {
	margin-top: 0.6em;
}

WordPressでのCSSコードを追加する方法は、 ここを参照してみてください。 上記のようなコードを使用すると、次の図のように共有ボタン画像が表示されます。

WordPress プラグインを使用せずに、ソーシャル共有ボタンを追加する

上記のコードを利用する場合に問題があるかたい、Googleの検索してみると同様の方法でプラグインを使用せずに WordPressにSNS共有ボタンを追加する方法を説明した文章が検索なりますね。 上記の方法で Facebook, Twitter, Naver バンドの文を共有したときまだ問題なく文がよく共有されています。 もし問題がある場合、以下のコメントでお知らせください。

2021年8月追加:カカオトーク共有ボタンを追加する

カトク共有ボタンを追加したい場合 Korea SNSのようなプラグインを使用すると、簡単に追加できます。 プラグインを使用せずに追加する場合は、上記のコードを次のコードスニペットを適切な場所に追加するようにします。

<li>
<a href="#" onclick="shareKatalk();"><img src="../images/kakaotalk.png"></a>
</li>

そして、次のコードを目の前に追加します。

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<!-- 카카오톡 공유 JavaScript -->
<script>
// 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('JavaScript 키');
function shareKatalk() {
<!-- 카카오 Link 공유 API 사용-->
Kakao.Link.sendScrap({
requestUrl: location.href
});
};
</script>

JavaScriptキーはカカオ開発者ページ(developers.kakao.com/)に接続して、開発者アカウントに登録した後、「私のアプリケーション>でアプリケーションを追加すると、作成されます。 アプリケーションを追加して、Webプラットフォームを登録する必要が正常に動作します。

上記のようにコードを追加してもカトク共有ボタンが正常に動作しない場合、上記のJavaScriptコードを... の間に追加してテストしてみてください。

JavaScriptのため、ページの読み込み速度が遅くなる場合には、 WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法を参考にしてJavaScriptをロードを試みることができます。

WordPress GeneratePress テーマにソーシャル共有ボタンを追加する

GeneratePress を使用する場合は、フックを使用して、簡単に目的の場所にコードを追加することができます。 GeneratePress テーマでサポートしているフックについては、「GeneratePress テーマフックを使用する」を参考にしてみてください。

私は作業を容易にするために GeneratePress プレミアムバージョンで提供されるのElementsを使用してコードを追加しました。 無料版を使用している場合には、テーマの関数ファイルにコードを作成して追加します。

WordPress GeneratePress テーマにソーシャル共有ボタンを追加する

フックソーシャル共有ボタンが表示される位置のフックを指定するようにします。 after_entry_titleを選択すると、記事のタイトルの下に表示されます。 記事の下部に表示する after_contentを選択します。

そして 表示ルールでポストのみ共有ボタンが表示されるようにルールを設定します。

WordPress GeneratePress フックを使用する

最後に、

以上で WordPressでプラグインを使用せずに、ソーシャル共有ボタンを表示することができるいずれかの方法について説明しました。 このような作業が難しく感じられるKorea SNSのような WordPress プラグインを使用すると、特別な心配しないで Naver など共有できるソーシャル共有アイコンを表示することができます。

参照



10のコメント

コメント

  1. htmlをsingle.phpに貼り付けたところ、正常に動作します! ところが、カカオトークと Naver カフェを追加したいのですがどのようにあのようにコードを抽出するのかよく分からない〓〓助けてください〓〓

    応答
    • こんにちは、バクセフイ様。 Naver カフェは、この記事で紹介された Naver ブログを共有するに含まれています。 Naver ブログを共有するボタンをクリックしてみてください。 その後、 Naver カフェに共有することができるオプションも付属しています。

      https://www.screencast.com/t/1nMIYnE5ju

      カカオトークは、最新のカカオトークのAPIを確認してみるべきでしょすることです。 最新記事では、次の記事を参照してみてください:

      https://morningcalm7.blogspot.com/2021/03/kakaotalk-link.html

      応答
  2. こんにちは、記事よく読みました。 インストール後に共有ボタンを押すと、共有されますが、その商品のページの共有がされず、(共有ウィンドウに私のサイトにログインするように)共有ウィンドウ浮遊ね。商品の詳細ウィンドウに共有ボタンを入れ、そのページを共有したいのですが可能でしょうか? ショーピパイ関連アプリを敷いても同じ症状です。 現在のショーピパイ自体でサポートしている共有押すとリンクだけ開いてコピーのみできるだけ使用中です。

    応答
    • こんにちは、ハムシク様。 ショーピパイでは、テストしてみなくてエラーが発生している正確な理由については、確認することはできない点ご了承ください。 本文で述べたように、この記事で紹介された方法は、寀ーブログで使用されるコードは、応用したものです。 一般的な状況では、正常に機能するものと思われます。

      応答
  3. こんにちは〜! 共有ボタンの画像ファイルはどこにアップロードする必要がいいですか? ㅠㅠ

    応答
    • こんにちは、ニュニュ様。

      メディアライブラリにアップロードください。

      次の記事を参照してみてください:

      https://www.thewordcracker.com/basic/how-to-add-image-to-wordpress-sidebar-widget/

      応答
  4. こんにちは。 久しぶりにコメント残すなりますね。 必要がなく使用アンハダガもう必要やるようにしたい追加しようとします。 簡単な方法を紹介しジュショショありがとうございます。

    応答
    • 久しぶりですね。 元気ですよね?笑

      プラグインを使用せずに直接コードを追加したい場合に考慮してみることができます。
      私は個人的 Naver バンドに共有しようとコードを作成して使用しています。

      応答
      • さすがれます。 てCSSを学ぶために忙しいという言い訳でずね。 事実、時間を内面出すことが..ㅠㅠ
        勉強を心に決めて計画を組んでみますね^^

      • インターネットに記載されているコードを応用して誰でも簡単に作成することができます。笑

        私も、Pythonを勉強しようと決心しているが...(忙しいという言い訳で)なかなか時間を出せずにいますね。〓〓