あなたのサイトの共有ボタンをステップバイステップで作成する方法

公開: 2021-05-21

ソーシャル共有ボタンは、すべてのWebサイトに不可欠な要素です。個人のブログでもビジネスのブログでも、オンラインポートフォリオでも、eコマースプロジェクトでも、ソーシャルボタンを使用すると、顧客はFacebook、Twitter、Instagram、Pinterestでコンテンツに関する情報を簡単に広めることができます。簡単なソーシャル共有ボタンをWebリソースに実装する一方で、リーチを大幅に拡大し、価値のあるコンテンツや商品を探して新しいクライアントがサイトにアクセスするのを歓迎できます。ソーシャルメディアネットワークの力は、最近過小評価されるべきではありません。 FacebookやInstagramでビジネスが見つからない場合、ターゲットオーディエンスに連絡を取り、その商品やサービスをより多くの人々に売り込む機会を逃します。名前が示すように、ソーシャル共有ボタンを使用すると、コンテンツをWeb上で共有しやすくなります。現代のユーザーが自分のFacebookページで好みの製品へのリンクを共有することは一般的な方法です。すべてのソーシャル投稿には、クライアントと同じ興味や好みを持つフォロワーがアクセスできます。

さらに、ソーシャルメディアボタンを使用すると、ソーシャルメディアグループまたは選択した個人にコンテンツを簡単にブロードキャストできます。ソーシャルメディアの共有数は、人々がより価値があり魅力的だと感じるコンテンツを示しています。そのため、多くのブランドがソーシャルメディアのシェアを増やし、ブランドの認知度を高めるために懸命に取り組んでいます。

数回クリックするだけで、好みのコンテンツについての情報を簡単に広めることができます。ソーシャルボタンを使用すると、顧客はWebサイトにとどまるときにリンクをブロードキャストできます。ほとんどの場合、共有ボタンをタップして、リンクを表示するソーシャルメディアプラットフォームを選択するだけです。

共有ボタンをステップバイステップで作成する方法

インターネットにはさまざまな共有ボタンがたくさんあります。主なタスクは適切なボタンを選択することです。自分のブログに必要なソーシャルボタンがわからないこともあります。ニーズに合ったデザインのボタンが見つからない場合があります。ブログに共有ボタンを実装するための簡単でクールな方法が見つからない場合があります。パニックにならない！この記事では、いくつかの基本的なソーシャル共有ボタンを作成する方法を紹介します。

Webデザインコース

在宅学習のためのオンラインコーディングクラス
完全なPhotoshopマスタリーバンドル

巨大で混雑したコードや複雑な詳細のカスタマイズを扱いたくない場合は、このチュートリアルがぴったりです。 HTMLの初心者でも、簡単にフォローできます。だから、シートベルトを締めて始めましょう！

ステップ1

最初にすべきことは、HTMLファイルを開いて、以下のコードを貼り付けることです。

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a> <a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
また
<a href="http://www.facebook.com/sharer/sharer.php?s=100& p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D= URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a> <a href="https://twitter.com/intent/tweet?original_referer= http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url =URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

あなたのサイトの共有ボタンをステップバイステップで作成する方法1

ステップ2

次に、そのような情報を含むjsファイルを作成します。

Share = {
 facebook: function(purl, ptitle, pimg, text) {
 url = 'http://www.facebook.com/sharer.php?s=100';
 url += '&p[title]=' + encodeURIComponent(ptitle);
 url += '&p[summary]=' + encodeURIComponent(text);
 url += '&p[url]=' + encodeURIComponent(purl);
 url += '&p[images][0]=' + encodeURIComponent(pimg);
 Share.popup(url);
 },
 twitter: function(purl, ptitle) {
 url = 'http://twitter.com/share?';
 url += 'text=' + encodeURIComponent(ptitle);
 url += '&url=' + encodeURIComponent(purl);
 url += '&counturl=' + encodeURIComponent(purl);
 Share.popup(url);
 },
 popup: function(url) {
 window.open(url,'','toolbar=0,status=0,width=626, height=436');
 }
 };

それだけです:)共有ページに直接配置されている共有ボタンをクリックした統計を追跡するための非常に簡単な方法。この問題は、データベース内のテーブルと単純なajaxの助けを借りて解決されました。

popup: function(url,soc) { window.open(url,'','toolbar=0,status=0,width=626, height=436'); }

このスクリプトは、URLからIDを取得し、テーブルにラベルを追加したり、特定のソーシャルネットワークのカウンターを1つ増やしたりします。これは、共有ボタンのシンプルなソリューションです。 CSSを使用してボタンの外観を簡単に変更できます。また、Photoshopで独自のボタンをデザインして、ここで使用することもできます。あなたはほとんどすべてをすることができます！

もちろん、この例は少し原始的ですが、独自のクールな共有ボタンの作成を開始するのはクールなポイントです。試してごらん！

人気のソーシャルメディアネットワークでは、Webサイトの投稿やページに埋め込んで、好みのコンテンツをブロードキャストできるカスタムコードを生成できます。 FacebookとTwitterは、それぞれの機能をサポートする最も人気のあるソーシャルネットワークの2つです。そのようなソーシャルボタンをあなたのサイトに統合する方法を見てみましょう。

Facebookの共有ボタンを追加する方法

Facebookの共有ボタンを使用すると、顧客はWebサイトの投稿や取引につながるリンクをカスタム作成のテキストで共有できます。

このボタンをWebサイトに追加するには、最初にこのページに移動する必要があります。

次に、セットアップページのいくつかのフィールドの意味を見てみましょう。

いいねへのURL-このフィールドは、Facebookで共有したいサイトのページを追加します。
幅-ボタンの幅はここで設定されます。
表示する動詞-ここでは、「いいね」または「お勧め」ボタンのテキストを選択できます。
配色-ここでは、明るいサイトまたは暗いサイトのボタンデザインを選択できます。
フォント-ボタンラベルのフォントを選択します。

設定を選択したら、「コードを取得」ボタンを見つけてクリックします。次に、コードを含むウィンドウが表示されます。これも2段階で挿入する必要があります。

<body>タグの直後にコードを挿入します。

ボタンを表示するためのコード：

Facebookのボタンを表示する場所に次のコードを貼り付けます。

Twitter共有ボタンを追加する方法

Twitterの共有ボタンをWebサイトに追加する際、Twitter開発者が覚えておくべきことがいくつかあります。

ユーザーが自分のTwitterアカウントにログインしていない場合は、メッセージを調整するためにログインするように求められます。
ツイートは、人がアクセスしたWebページにリンクされます。ユーザーは、ツイートのメッセージを自由に調整できます。
「ツイート」をクリックすると、ポップアップボックスにTwitterの関連アカウントのリストが表示されます。ユーザーは、それらをフォローする場所を決定するか、それらを無視することができます。
1日あたりの回数に制限はなく、同じユーザーがタイムラインに何かをツイートできます。

Twitter共有ボタンを追加するには、次の手順を実行します。

publish.twitter.comにアクセスし、Twitterボタンをタップします。
サイトに追加するTwitter共有ボタンの種類を選択します。
ツイートとそれに含まれるメッセージを調整しながら、どの@accountに言及したいかを言及します。
完了したら、コードをコピーしてサイトに貼り付けます。

それはほとんどそれです。このガイドがお役に立てば幸いです。それについての最もよい事はあなたがあなたのウェブサイトにソーシャルシェアボタンを追加するためにどんな深いコーディングスキルも持ってはいけないということです。自動化されたコードジェネレーターは、WebサイトのHTMLに直感的に調整、コピー、貼り付けできる、すぐに使用できるソリューションを提供します。