スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ツイートボタン(Twitter公式)をブログに設置する方法

Twitter公式ツイートボタンの作成方法、ブログ(FC2)への設置方法と注意点です。
最近では、ブログにツイートボタンを自動で設置出来る様になっていますが、「各種SNSボタンを任意の場所に設置したい」と言う方は、ご自身でツイートボタンを設置してみましょう。
各種ブログサービスにより設定の違いがあるので、ここではFC2ブログへの設置方法とします。

◆ ツイートボタンを作る


Twitter公式サイトの「素材>Twitterボタン」のページに行きます。

Twitter - ツイートボタン作成画面

お好みのボタンを選択します(ここではスタンダードな「リンクを共有する」で解説して行きます)。

【ボタンのオプション】>「URLを共有」>「ページのURLを使う」でも良いのですが、そのままだとトップページに新着記事を複数表示していると、その画面からツイートボタンを押した場合、トップページのURLとタイトルがツイートされます。
トップページからの閲覧でも個別記事のタイトルとURLを反映させたい場合は、直下のテキストボックスに<%topentry_link> と、入力しましょう(FC2ブログ専用の変数で、個別記事のURLを抽出してくれます)。
【ツイート内テキスト】も、同様に個別の記事タイトルを反映させたい場合は、テキストボックスにFC2変数の<%topentry_title> を入力します。
「個別の記事タイトル:ブログタイトル」の様な表示をしたければ<%topentry_title>:<%blog_name> の様に入力します(:の区切りはお好みで)。
【】や『』で括る事や、文字数内でお好きな文章を書き込む事も出来ます。
【数を表示】は、ツイートされた回数を表示するので、必要無い方はチェックを外して下さい。

ここからは自動挿入してくれる部分です(設定するかはお好みで)。
【ユーザー】の所は、ツイッターIDを入力すると「@optima_jpさんから」と文末に挿入されます。
これにより、ツイートしてくれた方からリプライされる形になります。
【推奨】は、オススメのユーザーIDを(ツイート後に「~さんがあなたにフォローする様にお奨めしています」などの表示がされる)、【ハッシュタグ】は、お好きなタグを自動挿入出来ます。

【ボタン大】も、お好みで・・・。
【言語設定】は、各国のボタンの表示文字です。

右側のデモボタンで確認し、テキストをコピーして貼付けるだけです。

FC2ブログでそのまま使えるソースです。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title> 【<%blog_name>】" data-count="horizontal" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

data-textのところの<%topentry_title>はFC2ブログの変数で、個別記事のタイトルを抽出してくれます。
半角スペースを入れて、ブログタイトル(FC2ブログの変数で赤字部分)に【】を付けています。
【】を外して適当な区切りを入れるなり、ブログタイトル自体を外したり、お好みでご自由な文章を書き込んだり出来ます(このまま使うと、下記の様になります)。
個別記事タイトル 【ブログタイトル】 個別記事URL


◆ ツイートボタンの設置


まず、既にツイートボタンが自動挿入されている方は、機能をオフにします。
機能オフは、FC2ブログの管理画面の【環境設定】の【環境設定の変更】から行います。
画面上部の【ブログの設定】にカーソルを合わせ、記事の設定をクリックし、【Twitter】のところの「有効にする」のチェックを外して下さい。
続いてFC2ブログ管理画面の【環境設定】から、【テンプレートの設定】のHTMLソース内の<!--topentry--> ~ <!--/topentry--> 間の、任意の場所に貼付ければ完了です。
記事ごとに自動でツイートボタンが挿入され、各記事ごとの情報も反映されます。
<div class="sns_button"> ~ </div>など、適当な名前を付けておけば、cssにて位置調整が可能です。


前回の『ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置する方法』と、今回の『ツイートボタン』に続き、『いいねボタン』とそれらを横並びにする方法も、次回以降に記事にします。
このブログの記事下の様な設置方法です。







ジャパネットたかた メディアミックスショッピング




☆楽ランク CD・DVDランキング☆
☆リンクをクリックで楽天市場の各ページに跳びます。


関連記事



この記事へのコメント

管理人のみ通知 :

トラックバック


PR Link



☆動画MYページはこちら

バイオハザード オペレーション・ラクーンシティ バナー(120×60)









Link

このブログをリンクに追加する



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。