Skip to main content

Show twitter trackbacks on your blogger blog

What about displaying all twitter ReTweets on your blogger blog along with the comments like you see in most of the wordpress blogs.If you like this idea follow the tutorial below....

Thanks to Mike More who developed this plugin in javascript based on APIs plugin for Wordpress Topsy , which runs on PHP.

There are several ways to configure this plugin , experienced user can explore all options by going on the project page .Here i will show you nice and easy way to implement this on your blog.

Before continuing make sure you backup your template.

How to show Twitter trackbacks in blogger comments.

To add this to your blogger ,you need to add three elements of code to your template : Javascript ,CSS ,small HTML where you want the w idget to display.

CSS 
To include CSS definitions, find the code of your template line ]]></ b: skin> and immediately before it, paste the following code:

ul.ttw-inner (border: 1px solid silver; height: 48px; overflow: hidden; margin: 0; padding: 4px;)
ul.ttw-inner li{float:left;list-style-type:none;position:relative;margin:0;} ul.ttw inner-li (float: left; list-style-type: none; position: relative; margin: 0;)
ul.ttw-inner span.ttw-author-img{display:block;width:48px;height:48px;overflow:hidden;left:0;position:absolute;margin:0 5px 0 0;} ul.ttw span.ttw-inner-author-img (display: block; width: 48px; height: 48px; overflow: hidden; left: 0; position: absolute; margin: 0 5px 0 0;)
ul.ttw-inner strong a{margin-right:5px;} ul.ttw the strong-inner (margin-right: 5px;)
ul.ttw-inner span.ttw-body{display:block;margin-left:55px;} ul.ttw span.ttw-inner-body (display: block; margin-left: 55px;)
ul.ttw-inner span.ttw-meta{color:#999;display:block;font-size:0.764em;margin:3px 0 0;} ul.ttw span.ttw-meta-inner (color: # 999; display: block; font-size: 0.764em; margin: 3px 0 0;)
ul.ttw-inner span.ttw-meta a{color:#999;text-decoration:none;} ul.ttw span.ttw-inner-meta a (color: # 999; text-decoration: none;)
ul.ttw-inner span.ttw-meta a:hover{text-decoration:underline;} ul.ttw span.ttw-inner-meta a: hover (text-decoration: underline;)

Javascript
Now look for the line </heads> and add before it the following code snippet


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> <script type='text/javascript'> //<![CDATA[ //<![ CDATA [ /* Twitter Trackbacks Widget v1.0 / * Twitter Trackbacks Widget v1.0 Blog : http://www.moretechtips.net Blog: http://www.moretechtips.net Project: http://code.google.com/p/twitter-trackbacks-widget/ Project: http://code.google.com/p/twitter-trackbacks-widget/ Copyright 2009 [Mike @ moretechtips.net] Copyright 2009 [Mike@moretechtips.net] Licensed under the Apache License, Version 2.0 Licensed under the Apache License, Version 2.0 (The "License"); You May Not except use this file in compliance with the License. */ You May Obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 * / (function($){$.fn.twitterTrackbacks=function(allOptions){var defaults= {debug:0,url:"",url_querystring:0,n:10,show_n:1,inf_only:0,inf_tip:0,stay_time:5000,enter_time:200,exit_time:200,animate:"opacity",show_avatar:1,show_author:1,show_date:1,image_width:48,reply:"reply",retweet:"retweet",topsy_author_url:0,header:"",info:'<a class="ttw-info" title="get Twitter Trackbacks Widget!" target="_blank" href="http://www.moretechtips.net/">.i</a>'}; allOptions=$.extend({},defaults,allOptions);return this.each(function(){var div=$(this);var count=0,ul=null,vp=-1,startI=-1,endI=-1;var op=allOptions;var effectParams=new Object;var topsyURL="";var requested=function(json){if(!json.response.list){if(op.debug){div.html('<b style="color:red">Error: ' (json.response.errors?json.response.errors.join(","):"unkown") "</b>")}return}var rs=json.response.list;count=rs.length;if(count==0){return}topsyURL=json.response.topsy_trackback_url;ul=$('<ul class="ttw-inner"></ul>').appendTo(div.html(op.header));for(var i=0;i<count;i ){addLI(rs[i])}if(op.show_n>0){fadeIn()}};var addLI=function(x){var uname=x.author.url.replace("http://twitter.com/","");var id="";if(x.permalink_url){id=x.permalink_url.replace("http://twitter.com/" uname "/status/","")}else{x.author.photo_url="http://cdn2.topsy.com/asset/master.16412.82c193e596/img/twitter_user.png"}if(!x.author.influence_level){x.author.influence_level=0}var li=$("<li" (op.show_n>0?' style="display:none"':"") ' class="ttw-inf-' x.author.influence_level '">' (op.show_avatar?'<span class="ttw-author-img"><a href="' (op.topsy_author_url?x.author.topsy_author_url:x.author.url) '" title="' x.author.name (op.inf_tip?" [influence level: " x.author.influence_level "/10]":"") '"><img src="' x.author.photo_url '" height="' op.image_width '" width="' op.image_width '" border="0"/></a></span>':"") '<span class="ttw-body">' (op.show_author?'<strong><a href="' (op.topsy_author_url?x.author.topsy_author_url:x.author.url) '">' x.author.name "</a></strong>":"") '<span class="ttw-content">' x.content '</span><span class="ttw-meta">' (op.show_date?'<a class="ttw-date" href="' (x.permalink_url?x.permalink_url:topsyURL) '">' x.date_alpha "</a>":"") (op.reply&&id?' - <a class="ttw-reply" href="http://twitter.com/home?status=@' uname "%20&in_reply_to_status_id=" id "&in_reply_to=" uname '">' op.reply "</a>":"") (op.retweet?' - <a class="ttw-retweet" href="http://twitter.com/home?status=' encodeURIComponent("RT @" uname " " x.content) '">' op.retweet "</a>":"") (op.info?" - " op.info:"") "</span></span></li>").appendTo(ul);var cont=$("span.ttw-content",li);cont.html(linkify(cont.html()))};var fadeOut=function(){$("li",ul).eq(startI).fadeOut(op.exit_time,fadeIn);if(op.show_n>1){$("li",ul).slice(startI 1,endI).fadeOut(op.exit_time)}};var fadeIn=function(){vp ;if(vp*op.show_n>=count){vp=0}startI=vp*op.show_n;endI=(vp 1)*op.show_n;$("li",ul).eq(startI).animate(effectParams,op.enter_time,"linear",fadeStill);if(op.show_n>1){$("li",ul).slice(startI 1,endI).animate(effectParams,op.enter_time,"linear")}};var fadeStill=function(){ul.animate({opacity:1},op.stay_time,"linear",fadeOut)};var linkify=function(d){return d.replace(/bhttps?://S /gi,function(b){var c="";b=b.replace(/(.*|?*|!*)$/,function(m,a){c=a;return""});return'<a class="ttw-link" href="' b '">' ((b.length>25)?b.substr(0,24) "...":b) "</a>" c}).replace(/B@([A-Z0-9_]{1,15})/gi,'@<a class="ttw-at" href="http://twitter.com/$1">$1</a>').replace(/B#([A-Z0-9_] )/gi,'<a class="ttw-hashtag" href="http://search.twitter.com/search?q=%23$1">#$1</a>')};var request=function(){var data={url:op.url,infonly:op.inf_only,perpage:op.n};$.ajax({url:"http://otter.topsy.com/trackbacks.js",data:data,success:requested,dataType:"jsonp"})};var init=function(){if(div.attr("options")){try{op=eval("(" div.attr("options") ")")}catch(e){div.html('<b style="color:red">' e "</b>");return}op=$.extend({},defaults,op)}effectParams[op.animate]="show";if(!op.url){op.url=location.protocol "//" location.host location.pathname (op.url_querystring?location.search:"")}request()};init()})}})(jQuery);jQuery(document).ready(function(){jQuery("div.twitter-trackbacks").twitterTrackbacks()}); (Function ($){$. fn.twitterTrackbacks = function (allOptions) (var defaults <b>= (debug: 0, url: "", url_querystring: 0, n: 10, show_n: 1, inf_only: 0, inf_tip: 0, stay_time: 5000, enter_time: 200, exit_time: 200, animate: "opacity", show_avatar: 1, show_author: 1, show_date: 1, image_width: 48, reply: "reply" retweet "retweet" topsy_author_url: 0, header: "", info: '<a class="ttw-info" title="get Twitter Trackbacks Widget!" target="_blank" href="http://www.moretechtips.net/">. i </ a> '); </b>allOptions = $. extend ((), defaults, allOptions); this.each return (function () (var div = $ (this); var count = 0, ul = null, vp =- 1, start =- 1, endi =- 1; var op = allOptions; effectParams var = new Object; topsyURL var = "" var Requested = function (json) (if (! json.response.list) (if (op.debug ) (div.html ('<b style="color:red"> Error:' (json.response.errors? json.response.errors.join (","):" unkown ") "</ b > ")) return) var rs = json.response.list; rs.length count = if (count == 0) (return) = topsyURL json.response.topsy_trackback_url; ul =$('< ul class =" TTW -inner "> </ ul> '). appendTo (div.html (op.header)) for (var = i 0, i <count; i ) (addLI (rs [i])) if (op.show_n > 0) (var FadeIn ()}}; addLI = function (x) (var uname = x.author.url.replace (http://twitter.com/ ",""); var id = ""; if (x.permalink_url) (id = x.permalink_url.replace (http://twitter.com/ " uname " / status /","")} else (x.author.photo_url = "http:// cdn2.topsy.com/asset/master.16412.82c193e596/img/twitter_user.png ") if (! x.author.influence_level) x.author.influence_level = 0) (var li li =$("<" (op . show_n> 0? "style =" display: none "':"") ' class = "TTW-inf-' x.author.influence_level '">' ( op.show_avatar?' <span class =" TTW-author-img "> <a href ="' ( op.topsy_author_url? x.author.topsy_author_url: x.author.url) '" title = "' x.author.name (op.inf_tip?" [Influence level: " x.author.influence_level" / 10 ]":"") '">< img src = "' x.author.photo_url '" height = "' op.image_width '" width = "'op.image_width '" border = "0 "/></ a> </ span >':"") '< span class =" TTW-body ">' ( op.show_author? '<strong > <a href="' (op.topsy_author_url?x.author.topsy_author_url:x.author.url) '"> 'x.author.name "</ a> </ strong >":"") '<span class="ttw-content">' x.content '</ span> <span class="ttw-meta">' (op.show_date? "<a class =" TTW-date "href ="' ( x.permalink_url? x.permalink_url: topsyURL ) '">' x.date_alpha "</ a >":"") ( op.reply & & id? '- <a class =" TTW-reply "href =" http://twitter.com/home?status = @ ' uname "% 20 & in_reply_to_status_id =" id "& in_reply_to =" uname '">' op.reply "</ a >":"" ) (op.retweet? '- <a class = "TTW-retweet" href = "http://twitter.com/home?status =' encodeURIComponent (" RT @ " uname " " x.content) '">' op.retweet "</ a >":"") ( op.info?" - " op.info :"") "</ span> </ span> </ li> "). appendTo (ul); var cont = $ (" span.ttw-content ", li); cont.html (linkify (cont.html ()))}; var fadeout = function (){$(" li , ul). eq (start). fadeout (op.exit_time, FadeIn) if (op.show_n> 1 ){$(" li ", ul.) slice (start 1, endi). fadeout (op. exit_time))); FadeIn var = function () (vp if (* vp op.show_n> = count) (vp = 0) start = vp * op.show_n; endi = (vp 1) * op.show_n; $ ("li", ul). eq (start). animate (effectParams, op.enter_time, "linear" fadeStill) if (op.show_n> 1 ){$(" li ", ul.) slice (start 1, endi). animate (effectParams, op.enter_time, "linear ")}}; fadeStill var = function () (ul.animate ((opacity: 1), op.stay_time," linear "fadeout)); var linkify = function (d) (return d.replace (/ bhttps?: / / S / gi, function (b) (var c = "b = b.replace (/(.*|?*|!* ) $ /, function (m, a) (c = a; return ""}); return '<a class="ttw-link" href="' b '">' ((b.length> 25 )? b.substr (0.24 ) "...": b ) "</ a> " c).) replace (/ B @ ([A-Z0-9_] (1.15)) / gi, '@ <a class="ttw-at" href="http://twitter.com/$1"> $ 1 </ a>'). replace (/ B # ([A-Z0-9_] ) / gi, '<a class="ttw-hashtag" href="http://search.twitter.com/search?q=%23$1"> # $ 1 </ a >')}; var request = function ( ) (var date = (url: op.url, infonly: op.inf_only, PerPage: op.n); $. ajax ((url: "http://otter.topsy.com/trackbacks.js, date: date, success: Requested, dataType: "jsonp "})}; var init = function () (if (div.attr (" options ")) (try (eval ("(" div.attr op = (" options ") ")")} catch (e) (div.html ('<b style="color:red">' e "</ b>");) op = $ return. extend ((), defaults, op)) effectParams [op.animate] = "show" if (! op.url) = (op.url location.protocol "//" location.host location.pathname (op.url_querystring? location. :"")} search request ()); init ()})}})( jQuery) jQuery (document). ready (function () (jQuery ('trackbacks-div.twitter). twitterTrackbacks ())) ; //]]> //]]> </script> </ Script> 

In the codehighlighted in bold are the configuration options of the plugin, you can change according to the instructions on the developer page

HTML
For the RTs of Twitter are displayed just below the comments from readers, look for the line <p class='comment-footer'&gt; and soon after it includes a new line, as indicated below:

<p class='comment-footer'>
<div class='twitter-trackbacks'/>
Soon after setting up the plugin trackbacks twitter must already appear clearly only in posts where they exist, including the old ones. Credits :

Comments

Post a Comment


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin

Popular posts from this blog

Best DoFollow Blog directories list for seo

List of Dofollow Blog directories,
Note: some items have profile information some do not, doesn’t matter, they’re all DoFollow Blog directories so submit your blogs to them all.
DOFOLLOW BLOG DIRECTORIES

Bloghop.com
Year Site Created: 2000
Indexed Pages in Google: 103,000
Backlinks in Yahoo: 542,700
PageRank: 6
Link Status: Dofollow
Quantcast Rank: 200,223
Editorial Policy: Yes
Spam in index: No
Submission rules: From the website:
We will reject: Spam blogs, hate blogs, stolen blogs, links to non-blog websites, links to illegal or illicit topics like child pornography. Blogs with under 5 posts are no longer accepted, but they might be waitlisted for later review if they look cool.
Commercial blogs are fine, but they must be “fun and useful.” Because of the huge amount of robot-generated blogs being submitted, blogs with the following will not be approved for listing: Acne, Mesothelioma, Real Estate, Lawsuits, Insurance, Gambling, SEO, Web Marketing, Medical Procedures and En…

Get ip-address widget for your blogger

Here is a unique collection of  IP address widgets which shows your visitors their Ip address,operating system,country,browser and the version of the browser.It is cool thing to display  ip address to your visitor's specially if you have TECH related blog.
Now you can get these any of these widgets and add these to your blogs by following these steps -

Get Ip Address Widget for your blog

1 .Choose any widget they are in different size and shapes,choose any according to your blog requirement.
2. Login to blogger dashboard ,and the click on Layout - > page Elements .
3. ADD a new HTML/Javascript gadget anywhere in your blog.
4. Copy any code from below(all are working) and paste in to HTML / Javascript gadget and then save your gadget.
5 Done,Your widget is Now live


1 .Square Ip Address Widget (Height=125px, Width=125px)<!--Ip Address Widget Starts--><span style="display: block; text-align: center;"><a href="http://myfundoo-blog.blogspot.com">…

27 Photography Blogger Templates for your Photo blog

This collection contain 27 different templates with unique banner unique design to each template, you’ll definitely find a Photography blogger template for you and your blog.The list includes Photoblog and Gallery style Blogger templates that you can use for showcasing your photos and design portfolio.Photo gallery blogger template

Don't forget to check out my previous collection of  33 music style blogger templates themes and xmls and
16 football/soccer blogger templates
1. Tequilas Flamejantes – DarkBlack color, Dark background. Gallery Blogger Templates 4 column, Right sidebar Fixed width, 1 sidebar.Photography Blogger Templates
This template for Gallery, Photo , blogs
DemoDownload 2.Tequilas Flamejantes – lightPhoto Gallery Blogger Templates This template for Photo gallery blogs Fixed width, Right sidebar. Yellow color, Light background. 4 column, 1 sidebar
DemoDownload 3. Photoplus Light Photography Blogger TemplatesFixed width, No sidebar. Light color, White backg…