経緯

『(2015年)7月になってから TwitterのFollow Badgeが表示されない。
 サイトの表示も遅くなっている。』
という知り合いからの相談を受けて。

 

原因

フォローバッジの提供元サイトからスクリプトが読み込めていない様子。
サービスが終了したのかもしれません。
http://www.go2web20.net/twitterfollowbadge/1.0/badge.js(現在は開けません)

Twitter "Follow" Badge (http://www.go2web20.net/twitterFollowBadge/)

Twitter "Follow" Badge (http://www.go2web20.net/twitterFollowBadge/)

対処(A) 不要なら削除で

そのままだとサイトの読み込みも遅いので、Follow Badge 表示のスクリプトを削除してはどうか?と提案するも、「できれば元に戻したい」とのこと

 

対処(B) 戻してみる

Internet Archive からダウンロード

とりあえず Internet Archive からスクリプトをダウンロード。

バッジなどの画像もダウンロード。
(透過.png なのでブラウザが白背景だと見えませんが、「ページを別名で保存」で保存できます)

ダウンロードしたファイル一式
  • badge.js
  • icon-about.png
  • /bg-badge
    • follow-me.png
    • follow-us.png
    • follow.png
    • my-twitter.png

 

スクリプトを変更

ダウンロードしたスクリプト等を自分のサイトの「js」ディレクトリに置くという前提で進めます。

http://(自分のサイト)
    /js
        /twitterfollowbadge
            /1.0
                →(ここにファイル一式をアップロード)

なので、スクリプト(badge.js)の中で指定されているパス(4カ所)を変更。
/web/20150427140225/http://www.go2web20.net//js/ に置き換え。

例)変更前
/web/20150427140225/http://www.go2web20.net/twitterfollowbadge/1.0/

例)変更後
/js/twitterfollowbadge/1.0/

twitterページへのリンク(リダイレクト)も変更。

例)変更前 ※上のパス変更後から
document.getElementById('tfbTab').onclick=function(){window.open('/js/twitterfollowbadge/redir.htm?'+tfb.account);}

例)変更後
document.getElementById('tfbTab').onclick=function(){window.open('https://twitter.com/'+tfb.account);}

 

ファイル一式のアップロード

スクリプトとバッジを、自分のサイトの「js」ディレクトリにアップロード。

http://(自分のサイト)
    /js
        /twitterfollowbadge
            /1.0
                badge.js
                icon-about.png
                /bg-badge
                    follow-me.png
                    follow-us.png
                    follow.png
                    my-twitter.png

 

表示用スクリプトの変更

自分のサイトのページ内に挿入していた、Follow Badge 表示用スクリプトの参照先を変更。

例)変更前

例)変更後

 

確認

とりあえず、表示されるようになりました。