ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeHTML&CSS講座 > あなたのサイトにシェアボタンを設置する方法

あなたのサイトにシェアボタンを設置する方法

投稿日:2013年5月23日       ソフトウェア:HTML

このチュートリアルではあなたのサイトにシェアボタンを設置する方法について紹介します。


Step1:はじめに

情報というのは、とても貴重な財産です。
情報を持っている人こそが、財産をたくさん持っていると言えるでしょう。
ウェブには、「情報はシェアすべし」という暗黙のルールがあります。
特に、その情報がびっくりするようなものや、
役立つもの、面白いものなら、なおさらです。

ウェブの世界で一目置かれたいなら、すばらしい情報をシェアしましょう。

ネットにはたくさんのシェアボタンがあふれています。
そのため、まずは正しいシェアボタンの選び方をマスターしましょう。
ブログにどのようなソーシャルボタンを設置すればいいか
わからないこともあるでしょう。
あなたのニーズに合ったデザインのボタンが
見つからないこともあるでしょう。
また、ブログにシェアボタンを簡単に
設置する方法がわからないということもあるでしょう。
でも、大丈夫です。
ここでは、いくつかの簡単なボタンの作り方を紹介します。

長くてごみごみしたコードは書きたくない、
細かなカスタマイズはしないという人には、
ここで紹介する方法がピッタリだと思います。
HTMLの初心者でも問題なくついてこれると思います。
それでは、はじめていきましょう。

Step2:HTML構造
<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')">
{sharing is sexy}</a> <a onclick="Share.twitter('URL','TITLE')">
{sharing is sexy}</a><br /> or
<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>





Step3:JavaScript

JavaScriptファイルを作成して、次の情報をいれましょう。

ここでは写真のみに集中できるようにページを作ります。

ページ全体に背景色を加えて、ページをラップするDIVを記述します。

Now create a js file that contain such information:

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を取得して、
テーブルにラベルを追加し、カウンターを一つ増やします。
とても簡単な方法です。CSSを使えばボタンのデザインは
簡単に変更することができます。
Photoshopでデザインして使うことができます。
どんなデザインだってできてしまいます。

もちろん、この例はとても原始的ですが、シェアボタンを
作り始めるにはいい練習になると思います。頑張ってください。





引用:Web Design Library  著者:Stacy Summers 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング