Myブログ大変だよ・Bloggre: 1月 2018

SNSボタンの設置方法・はてなブログ

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村


貴方のウェブサイトにSNSボタンを追加する方法
各SNSボタンは記事下に配置します。
「テーマ」でHTMLの編集、「Ctrl」と「F」キーを同時に押します。
data:post.body」を検索し、その下に設置します。


はてなブックマークボタンの設置
 詳細は、はてなブックマーク サイト を参照してください。
下記コードを追加します。
<!-- はてな この要素がJavaScriptによってシェアボタンに変わる -->
<a class='hatena-bookmark-button' data-hatena-bookmark-lang='ja' data-hatena-bookmark-layout='vertical-balloon' data-hatena-bookmark-title='Syncer' href='http://b.hatena.ne.jp/entry/http://kpkoubou.com' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='https://b.st-hatena.com/images/entry-button/button-only@2x.png' style='border: none;' width='20'/></a>
<!-- [head]内や&#12289;[body]の終了直前などに配置 -->
<script async='async' charset='utf-8' src='https://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'>
  {lang: &quot;ja&quot;}
</script>

パラメータ一覧
href
ブックマーク対象のURLアドレスを、http://b.hatena.ne.jp/entry/に続く形で指定する。
hatena-bookmark-title
ブックマークされた時にエントリーされるタイトルを指定する。
hatena-bookmark-layout
simple … カウント表示なしでボタンも小さい。
simple-balloon … ボタンが小さく、カウントは右側に表示。
standard-balloonは、ボタンが横長でカウントは右側に表示。
vertical-balloon … ボタンが横長でカウントは上部に表示。
hatena-bookmark-lang
ボタンの言語を日本語(ja)、または英語(en)で指定する。
スポンサーリンク
このエントリーをはてなブックマークに追加 LINEで送る

にほんブログ村 ネットブログ ネット広告・ネットマーケティングへ
にほんブログ村

SNSボタンの設置方法・Tweet

/> 貴方のウェブサイトにSNSボタンを追加する方法
各SNSボタンは記事下に配置します。
「テーマ」でHTMLの編集、「Ctrl」と「F」キーを同時に押します。
data:post.body」を検索し、その下に設置します。


・Tweet のシェアボタンの設置
  詳細は、Twitter サイト を参照してください。

下記コードを追加します。
<!-- tweeter シェアボタンに変換される [size]パラメータを使う -->
<a class='twitter-share-button' data-dnt='true' data-size='large' href='https://twitter.com/share'>Tweet</a>
<!-- [head]内や&#12289;[body]の終了直前などに配置 -->
<script>
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,&quot;script&quot;,&quot;twitter-wjs&quot;));
</script>
スポンサーリンク



パラメータ


url







URLアドレスを指定すると、シェアカウントの対象となり、最初から投稿フォームに入力される。
via
ユーザーアカウント(@arayutw)を指定すると、このアカウント名が、最初から投稿フォームに入力される。先頭のアットマーク(@)は不要。
text
テキストを指定すると、最初から投稿フォームに入力される。
related
ユーザアカウント(@arayutw)を指定すると、ユーザーがシェアした後に、そのアカウントをフォローしませんか?と進める画面が表示される。先頭のアットマーク(@)は不要で、複数指定する場合はコロン(:)で区切る。
count
ボタンの形。horizontalがデフォルトでカウントが右に表示される。verticalはカウントがボタンの上部に表示される。noneはカウント表示なし。
lang
Twitterのボタン表示の言語を2文字の国コードで指定する。英語にする場合はen。
counturl
URLアドレスを指定すると、urlに指定したものより優先して、こちらがシェアカウントの対象になる。例えば、文字数の関係などで、ツイート本文には短縮URLをセットしたい場合などには、urlに短縮URLを指定して、カウント対象の正規のURLはこちらに指定する。
hashtags
ハッシュタグ(syncer)を指定すると、最初から投稿フォームに入力される。
size
ボタンの大きさを指定する。デフォルトはmediumで、大きくしたい場合はlargeを指定する。
dnt
シェアボタンを通して、Twitterに送信されたデータが、Twitterがユーザーにお勧め情報などを表示するのに活用することを拒否するか否か。デフォルトはfalseで許可している状態。trueを指定すると拒否できる。
スポンサーリンク
このエントリーをはてなブックマークに追加 LINEで送る

にほんブログ村 ネットブログ ネット広告・ネットマーケティングへ
にほんブログ村

SNSボタンの設置方法・Googl+

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村

貴方のウェブサイトにSNSボタンを追加する方法
各SNSボタンは記事下に配置します。
「テーマ」でHTMLの編集、「Ctrl」と「F」キーを同時に押します。
data:post.body」を検索し、その下に設置します。


・Google+ のシェアボタンの設置
  詳細は、Googl+ サイト を参照してください。

下記コードを追加します。
<!-- 共有ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://yoursit.jp/'/>
<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script async='async' defer='defer' src='https://apis.google.com/js/platform.js'>
  {lang: &quot;ja&quot;}
</script>

スポンサーリンク

パラメータ

href
URLアドレスの指定。

annotation
シェアボタンのデザインを指定。
 inline:プロフィールとカウント数を表示
 bubble:ボタン右に表示
 vertical-bubble:ボタンの上に表示
 none:表示なし

width
ボタンの横幅(ピクセル)を指定。

height
ボタンの縦幅(ピクセル)を指定。(15,20,24,60の中から指定)

align
ボタンの配置を right か left で指定。



スポンサーリンク
このエントリーをはてなブックマークに追加 LINEで送る

にほんブログ村 ネットブログ ネット広告・ネットマーケティングへ
にほんブログ村

SNSボタンの設置方法・Facebook

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村


貴方のウェブサイトにSNSボタンを追加する方法
各SNSボタンは記事下に配置します。
「テーマ」でHTMLの編集、「Ctrl」と「F」キーを同時に押します。
data:post.body」を検索し、その下に設置します。


・Facebook のいいね!ボタンの設置
  詳細は、Facebook wabサイト を参照してください。

下記コードを追加します。
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/ja_JP/sdk.js#xfbml=1&amp;version=v2.0&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

シュアボタンを追加する為下記コードを追加します。
<div class='fb-share-button' data-layout='button' expre:data-href='data:blog.canonicalUrl'/>
<!-- Your like button code -->
<div class='fb-like' data-action='like' data-href='http://yoursit.jp' data-layout='button_count' data-share='false' data-show-faces='true'/>




スポンサーリンク

パラメータ

action (data-action)
ボタンをクリックにのアクション like:いいね! recommend:シェア

colorscheme (data-colorscheme
ボタンの色の指定 light/dark

href (data-href
いいね!、またはシェア対象、URLアドレス。

kid-directed-site (data-kid-directed-site
13歳未満を対象にしたサイトは true を指定する。

layout (data-layout)
ボタンのデザインを指定。
standard ・・・小さいボタンの右に説明部を記載。
 box_count ・・・ボタンの上にカウント表示。
 button ・・・カウント非表示。

ref (data-ref
シェアする時のテキスト50文字まで使用可能。

share (data-share)
true にすると、いいね!の下に、シェアボタンを追加。

width (data-width)
ボタンの幅を指定。



スポンサーリンク
このエントリーをはてなブックマークに追加 LINEで送る

にほんブログ村 ネットブログ ネット広告・ネットマーケティングへ
にほんブログ村

Google Publisher Toolbarの使い方

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村


Google chrom の拡張機能、Google Publisher Toolbarを導入すると、出来ること。

・アドセンスの収益管理
・自己クリックの回避
・広告のブロック

導入は下記をクリック
  Google Publisher Toolbar
スポンサーリンク


Google Publisher Toolbarのインストール
ウェブストアを開き拡張機能をインストールします。


赤い四角で囲った「CHROME に 追加」ボタンをクリックし拡張機能をインストールします。

私はインストール済の為「CHROME に 追加済み」になっていますが、インストール前はCHROME に 追加」と表示します。

インストールが終わったら、Googleアカウントの確認です。

右上にあるアイコンをクリックします。



Google AdSeense 「有効にする」ボタンをクリックします。



Googleアカウントを設定して完了です。


・自己クリックの回避
AdSenseは自己クリックに対して非常に厳しいので、誤クリック防止に右下のスライダーを移動します。


広告オーバーレイのスライダーを左に移動し「ON」にします。


ONにすると、広告は緑色のマスクがかかります。


これで、自己クリックを防止できます。


・アドセンスの収益管理
赤い四角の部分に有益金額を表示します。
AdSenseにログオンしなくても、GoogleChromの画面で確認できます。


AdSense広告が設置されていると、下記のように表示します。


赤い四角の部分をクリックすると、広告の詳細を表示します。

・広告のブロック




広告をブロックするには、「ブロック」ボタンをクリックします。

スポンサーリンク
このエントリーをはてなブックマークに追加 LINEで送る

にほんブログ村 ネットブログ ネット広告・ネットマーケティングへ
にほんブログ村