アメブロのプロフィールページにTwitterへのリンクを作成する

アメブロとTwitter両方使っている方で、アメブロからTwitterをやっているのかわからない方が多いので、Twitterへのリンク設置方法を説明させて頂きます。

いくつかご紹介しますので、どれか１つでも対応していただけると助かります。


今回はアメブロのプロフィールページにTwitterへのリンクを設置します。

※プロフィールページのカスタマイズは色々と制限がありちょっと難しいです。

　自己紹介の欄に以下の１行を追加していただくだけでも、見に来てくださる方は助かると思います。


[プロフィールページ] → [プロフィールの編集] → [自己紹介の編集] に以下を追加する。

<a href="https://twitter.com/あなたのTwitterID" target="_blank"><img src="http://stat.ameba.jp/user_images/20130511/14/secrethairloss/c7/4e/p/o0016001612534587195.png" />Twitterをフォロー</a>


【 設置例 】




■その他関連記事

アメブロ（ブラウザ）のサイドバーにTwitterフォローボタンを設置する方法

アメブロのサイドバーにTwitterのつぶやき一覧を設置する方法

アメブロ（ブラウザ）のサイドバーにTwitterフォローボタンを設置する方法

アメブロのサイドバーにTwitterのつぶやき一覧を設置する方法

アメブロとTwitter両方使っている方で、アメブロからTwitterをやっているのかわからない方が多いので、Twitterへのリンク設置方法を説明させて頂きます。

いくつかご紹介しますので、どれか１つでも対応していただけると助かります。


今回はアメブロのサイドバーにあなたのつぶやきを表示するウィジェットを設置します。

【 設置例 】




１．Twitterのユーザーウィジェット作成ページを開きます

ユーザーウィジェットを作成する

上記リンクをクリックするか、Twitterの[設定] → [ウィジェット] → [新規作成]を開いて下さい。




２．必要な設定をします



「タイムラインソースを選択」とありますが今回はそのまま「タイムライン」を利用します。

ユーザー名　：　あなたのTwitterIDを入力
　（すでに入力されていると思いますので、そのままで大丈夫です）

オプション　：　□＠ツイートを除外する
　　　　　　　　　＠ツイートも表示したい場合はチェックを外して下さい

　　　　　　　　□画像を自動的に開く
　　　　　　　　　画像を自動的に開きたくない場合はチェックを外して下さい

高さ　：　ウィジェットの高さを設定します

テーマ　：　明るい（白系）と暗い（黒系）を選択します

リンクの色　：　ツイート内のリンクの色を設定します

□カスタマイズ機能を無効にする　：　細かい説明は省略しますが、面倒なのがいやであればチェックを入れて置いて下さい


設定が完了しましたら「ウィジェットを作成」をクリックします。

右下にコードが出力されますので、全て選択してコピー（右クリックからコピー）します。


３．アメブロのフリープラグインに貼り付け反映させます

フリープラグインへの貼付けはこちらの記事を参考にしてください。


以上で作業は完了です。

サイドバーにTwitterウィジェットが設置されているか確認してみて下さい。


■その他関連記事

アメブロ（ブラウザ）のサイドバーにTwitterフォローボタンを設置する方法

アメブロ（ブラウザ）のサイドバーにTwitterフォローボタンを設置する方法

アメブロ（ブラウザ）のサイドバーにTwitterフォローボタンを設置する方法

アメブロとTwitter両方使っている方で、アメブロからTwitterをやっているのかわからない方が多いので、Twitterへのリンク設置方法を説明させて頂きます。

いくつかご紹介しますので、どれか１つでも対応していただけると助かります。


今回はブラウザのサイドバーにスクロールしても固定で表示される、Twitterフォローボタンを設置します。

【 設置例 】




１．ボタンを作るページにアクセスします

Twitter "Follow" Badge for your site/blog

※今回は上記ページを元に説明しますが、手順は大体同じですのでお好みのボタンをお使い下さい。

Twitterボタン: ブログ用のTwitterボタンブログパーツ配布サイト

犬と猫のtwitterブログパーツ・わんにゃんfollowme!!ボタン


こんなページです。




２．必要な情報を入力します



Twitter account: あなたのツイッターIDを入力

Label:　ボタンに表示される文字を選択

Color:　ボタンの色を選択
　（英数字の入力がわからない場合は、右のカラフルな丸をクリックしてお好きな色を洗濯して下さい）

Side:　左側（Left）に表示するか、右側（Right）に表示するか選択

From top:　上からどれくらいの位置に設置するか数値で入力
　（わからない場合はそのままで大丈夫です）


３．コードを取得する

入力が終わりましたら、「UPDATE CODE」をクリックしてコードを取得します。



クリックして全部選択してコピー（右クリックからコピー）します。


４．アメブロのフリープラグインに貼り付け反映させます

フリープラグインへの貼付けはこちらの記事を参考にしてください。


以上で作業は完了です。

ご自身のブログにTwitterボタンが設置されているか確認してみて下さい。


■その他関連記事

アメブロのサイドバーにTwitterのつぶやき一覧を設置する方法

アメブロ（ブラウザ）のサイドバーにTwitterフォローボタンを設置する方法

アメブロのサイドバーのプロフィールに「Twitterをフォロー」を追加する方法

アメブロとTwitter両方使っている方で、アメブロからTwitterをやっているのかわからない方が多いので、Twitterへのリンク設置方法を説明させて頂きます。

いくつかご紹介しますので、どれか１つでも対応していただけると助かります。


今回はアメブロのサイドバーのプロフィールに「Twitterをフォロー」を追加します。

少し上級者向けですので、わからない場合はご相談いただくか他の方法をとって下さい。


【 設置例 】



１．フリープラグインに以下のソース・コードを追加する

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
(function($){
$(function(){
var myTwitterID = 'あなたのツイッターID';
$('ul.profileBtnArea:eq(0)').append('<li><a class="readerBtn skinImgBtnS" id="profileTwitterBtn" href="http://twitter.com/'+myTwitterID+'/"><span>twitterをフォロー</span></a></li>');
});
}(jQuery));
</script>


※１行目の「jquery」というのはすでに追加されている方はいりません。


２．ブログデザインのCSSの編集に以下のソース・コードを追加する


#profileTwitterBtn span{
padding-left:18px;
background:url(http://stat.ameba.jp/user_images/20130511/14/secrethairloss/c7/4e/p/o0016001612534587195.png) 0px 6px no-repeat;
}


以上で作業は完了です。

サイドバーのプロフィールに「Twitterをフォロー」が設置されているか確認してみて下さい。


■その他関連記事

アメブロ（ブラウザ）のサイドバーにTwitterフォローボタンを設置する方法

アメブロのサイドバーにTwitterのつぶやき一覧を設置する方法

アメブロのフリープラグインに取得したソース・コードを貼り付け反映させる方法

アメブロのカスタマイズで取得したソース・コードを、フリープラグインに貼り付けて反映させる方法について説明します。


１．アメブロのフリープラグインに貼り付けます

[マイページ] → [ブログを書く] → [プラグインを追加] → [フリープラグイン]と進み、貼り付け（右クリックから貼り付け）て「保存」をクリックします。




２．フリープラグインをサイドバーに配置します

すでに利用されている方はこの手順はいりませんが、設置していない場合は[サイドバー]→[配置設定]からお好きな場所に、ドラッグ＆ドロップして「保存」をクリックして下さい。




以上で、設置作業は完了です。