Tumblr social media intergration in a grid theme

Question

tinanewtonart 0 Light Poster

12 Years Ago

so I am attempting to intergrate a social media aspect upon my blog http://tinanewtonart.tumblr.com but I am having issues with disqus.
Tumblr uses a markup HTML5 construct that can be reviewed here http://www.tumblr.com/docs/en/custom_themes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>








<?php
  // Copyright 2010 Google Inc. All Rights Reserved.

  $GA_ACCOUNT = "MO-19656326-1";
  $GA_PIXEL = "/ga.php";

  function googleAnalyticsGetImageUrl() {
    global $GA_ACCOUNT, $GA_PIXEL;
    $url = "";
    $url .= $GA_PIXEL . "?";
    $url .= "utmac=" . $GA_ACCOUNT;
    $url .= "&utmn=" . rand(0, 0x7fffffff);
    $referer = $_SERVER["HTTP_REFERER"];
    $query = $_SERVER["QUERY_STRING"];
    $path = $_SERVER["REQUEST_URI"];
    if (empty($referer)) {
      $referer = "-";
    }
    $url .= "&utmr=" . urlencode($referer);
    if (!empty($path)) {
      $url .= "&utmp=" . urlencode($path);
    }
    $url .= "&guid=ON";
    return str_replace("&", "&amp;", $url);
  }
?>


<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
  echo '<img src="' . $googleAnalyticsImageUrl . '" />';?>



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Title}{block:SearchPage} | {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="image:Background" content="" />
<meta name="image:Header" content="" />
<meta name="color:Background" content="#FCFCFC" />
<meta name="if:Infinite scroll" content="1" />
<meta name="color:Post background" content="#FFFFFF" />
<meta name="color:Post text" content="#000000" />
<meta name="color:Header background" content="#a8d3e7" />
<meta name="color:Header text" content="#FFFFFF" />
<meta name="if:Show Description" content="1" />
<meta name="text:Visitor counter script" content="" />
<meta name="text:Music player script" content="" />
<meta name="text:Description label" content="About me" />
<meta name="text:Loading message" content="Loading" />
<meta name="text:Infinite scroll message" content="Loading more posts" />
<meta name="if:Repeat background" content="1" />
<meta name="if:Center background" content="1" />
<meta name="if:Fixed background" content="0" />
<meta name="if:Fixed header" content="1" />
<meta name="if:Shadow under header" content="1" />
<meta name="if:Large posts" content="1" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/jw8fmba/GQtlx5qw3/theme.js"></script>
<script>
$(window).load(function(){  
      $(".loading").hide();  
})  
$(document).ready(function() {
    $('.menu_link').click(function () {
        $('.menu_link').removeClass('selected');
        $(this).addClass('selected');
    });
});
</script>

<style type="text/css">
@import url(http://static.tumblr.com/jw8fmba/pXhlt5pzb/bebasneue.css);
html,body {
    margin: 0;
    height: 100%;
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
p, li, q, td, code {
    font-size: 12px;
}
p {
    margin: 10px 0;
}
p:last-child {
    margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6, p, li, q, td, code {
    line-height: 160%;
    color: inherit;
}
a img {
    border: none;
}
a {
    color: inherit;
}
blockquote {
    margin: 0;
    padding: 0 0 0 9px;
    border-left: 3px {color:Post text} solid;
}
.header {
    top: 0;
    left: 0;
    width: 94%;
    padding: 0 3%;
    overflow: hidden;
    z-index: 99;
    background: {color:Header background};
    position: {block:IfFixedHeader}fixed{/block:IfFixedHeader}{block:IfNotFixedHeader}relative{/block:IfNotFixedHeader};
    {block:IfShadowUnderHeader}
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
    {/block:IfShadowUnderHeader}
}
.header * {
    color: {color:Header text};
}
.header a {
    text-decoration: none;
}
.header img {
    max-height: 30px;
}
.header .item {
    float: left;
    line-height: 100%;
    text-transform: uppercase;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    filter: dropshadow(color=rgba(0,0,0,0.1), offx=0, offy=1);
}
.header .menu_link {
    cursor: pointer;
    margin: 12px 2px;
    font-size: 11px;
    padding: 6px 13px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-weight: bold;
    border: 1px solid rgba(0,0,0,0);
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.header .menu_link:hover,.header .selected {
    border: 1px solid rgba(0,0,0,0.25);
    background: url(http://static.tumblr.com/jw8fmba/5BMlx5wf8/menu_bg.png) repeat-x;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    filter: dropshadow(color=rgba(0,0,0,0.1), offx=0, offy=1);
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25), 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25), 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25), 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
}
.header .item h1 {
    margin: 0;
    font-size: 30px;
    font-family: 'BebasNeueRegular', Arial, sans-serif;
    font-weight: normal;
    line-height: 110%;
}
.header .title {
    margin: 8px 30px 0 0;
}
.header .search {
    float: right;
    margin: 10px 120px 10px 10px;
    font-size: 13px;
    padding: 0 13px;
    -webkit-border-radius: 360px;
    -moz-border-radius: 360px;
    border-radius: 360px;
    border: 1px solid rgba(0,0,0,0.25);
    background: url(http://static.tumblr.com/jw8fmba/w8slx5ygq/search_bg.png) repeat-x -5px center;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.25);
    -moz-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.25);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.25);
}
.header .search input {
    background: transparent;
    border: 0px;
    text-shadow: 0px -1px 2px rgba(0,0,0,0.1);
    filter: dropshadow(color=rgba(0,0,0,0.1), offx=0, offy=-1);
    margin-left: 25px;
    outline: none;
    width: 75px;
    height: 23px;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.header .search:hover input {
    width: 200px;
}
.header .slide_downs {
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,0.25);
    width: 100%;
    float: left;
    font-size: 12px;
    line-height: 160%;
}
.posts {
    position: relative;
    padding-bottom: 100px;
    {block:IndexPage}
    width: 94%;
    margin: {block:IfFixedHeader}75{/block:IfFixedHeader}{block:IfNotFixedHeader}25{/block:IfNotFixedHeader}px 3% 25px 3%;
    {/block:IndexPage}
    {block:PermalinkPage}
    width: 940px;
    margin: {block:IfFixedHeader}125{/block:IfFixedHeader}{block:IfNotFixedHeader}25{/block:IfNotFixedHeader}px auto 25px auto;
    {/block:PermalinkPage}
}
.post {
    float: left;
    position: relative;
    {block:IndexPage}
    margin: 5px;
    {block:IfLargePosts}
    width: 400px;
    {/block:IfLargePosts}
    {block:IfNotLargePosts}
    width: 250px;
    {/block:IfNotLargePosts}
    {/block:IndexPage}
    {block:PermalinkPage}
    margin: 10px;
    width: 500px
    {/block:PermalinkPage}
}
.note_box {
    float: left;
    position: relative;
    margin: 10px;
    width: 400px
}
.inner {
    padding: 15px;
    margin: 0;
    background: {color:Post background};
    color: {color:Post text};
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-radius: 0px 0px 2px 2px;
    border-radius: 0px 0px 2px 2px;
}
.inner:first-child {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.post h2 {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    text-transform: uppercase;
}
.post ol, .post ul {
    margin: 3px 0;
    padding: 0;
}
.post li {
    margin: 2px 35px;
}
.post .info_bar {
    width: 100%;
    position: absolute;
    top: 5px;
    right: 5px;
    text-align: right;
    opacity: 0;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    {block:PermalinkPage}
    display: none;
    {/block:PermalinkPage}
}
.post:hover .info_bar {
    opacity: 1;
}
.post .info_bar a {
    text-decoration: none;
}
.post .info_bar img {
    margin: 0 3px -6px 0;
}
.post .info_bar .notecount {
    background: rgba(0,0,0,0.5);
    border: rgba(0,0,0,0.2) solid 1px;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
    filter: dropshadow(color=rgba(0,0,0,0.5), offx=0, offy=1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 2px;
    font-size: 12px;
    font-weight: bold;
    position: relative;
}
.post .info_bar .notecount span {
    color: #FFF;
}
.post .photo {
    position: relative;
    padding: 0;
    line-height: 0 !important;
    {block:IndexPage}
    background: {color:Body text};
    {/block:IndexPage}
}
.post img.main_photo {
    width: 100%;
}
.post img {
    max-width: 100%;
    height: auto;
}
.post .photo img {
    line-height: 0;
}
.post .lines {
    margin: 0 0 5px 0;
    padding: 0;
    list-style: none;
}
.post .lines .line {
    padding: 5px 10px;
    margin: 0;
}
.post .lines .odd {
}
.post .lines .even {
    margin-left: 25px;
}
.note_box ol.notes {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 11px;
}
.note_box ol.notes a {
    text-decoration: none;
}
.note_box ol.notes li.note {
    border-top: solid 1px {color:Post text};
    padding: 5px 0;
    margin: 0 !important;
}
.note_box ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
}
.note_box ol.notes li.note .answer_content {
    font-weight: normal;
}
.note_box ol.notes li.note blockquote {
    border-color: {color:Post text};
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}
.pagination {
    display: none;
}
#infscr-loading {font-weight:bold;width:100%;text-align:center;position:absolute;padding:25px 0;bottom:0;left:0;font-size:10px;color:{color:Header background};text-transform:uppercase;}
.masonry,.masonry .masonry-brick {-webkit-transition-duration: 0.25s;-moz-transition-duration: 0.25s;-o-transition-duration: 0.25s;transition-duration: 0.25s;}.masonry {-webkit-transition-property: height, width;-moz-transition-property: height, width;-o-transition-property: height, width;transition-property: height, width;}.masonry .masonry-brick {-webkit-transition-property: left, right, top;-moz-transition-property: left, right, top;-o-transition-property: left, right, top;transition-property: left, right, top;}
body{background:url({image:Background}) {color:Background} {block:IfFixedBackground}fixed{/block:IfFixedBackground} {block:IfNotRepeatBackground}no-repeat{/block:IfNotRepeatBackground} {block:IfCenterBackground}center 0{/block:IfCenterBackground}}
.hidden {
    display: none;
}
.loading {
    font-weight: bold;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 10px;
    color: {color:Header background};
    text-transform: uppercase;
}
{CustomCSS}
</style>

</head>

<body class="{Name}" onload="var image1 = new Image(); image1.src = 'http://static.tumblr.com/jw8fmba/5BMlx5wf8/menu_bg.png';">

<!--facebook-->
<div id="fb-root"></div>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=207442452677998";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>








    <div class="loading">
        <table width="100%" height="100%">
            <tr>
                <td width="100%" height="100%">
                    {text:Loading message}
                </td>
            </tr>
        </table>
    </div>

    {block:Pagination}<ul class="pagination hidden">
            <li>{block:NextPage}<a href="{NextPage}" class="pagination_nextlink">Next</a>{/block:NextPage}</li>
    </ul>{/block:Pagination}

    <div class="header">

        <a href="/"><div class="item title">{block:IfHeaderImage}<img src="{image:Header}" />{/block:IfHeaderImage}{block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</div></a>
        {block:IfShowDescription}{block:Description}<div class="item menu_link" onclick="$('.description').slideToggle()">{text:Description label}</div>{/block:Description}{/block:IfShowDescription}
        {block:HasPages}{block:Pages}<a href="{URL}"><div class="item menu_link">{Label}</div></a>{/block:Pages}{/block:HasPages}{block:AskEnabled}<div class="item menu_link" onclick="$('.askbox').slideToggle()">{AskLabel}</div>{/block:AskEnabled}{block:SubmitEnabled}<div class="item menu_link" onclick="$('.submitbox').slideToggle()">{SubmitLabel}</div>{/block:SubmitEnabled}<a href="/archive"><div class="item menu_link">{lang:Archive}</div></a><a href="{RSS}"><div class="item menu_link">{lang:RSS}</div></a>{block:IfVisitorCounterScript}<div class="item menu_link">{text:Visitor counter script}</div>{/block:IfVisitorCounterScript}{block:IfNotInfiniteScroll}{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}"><div class="item menu_link">{lang:Previous page}</div></a>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}"><div class="item menu_link">{lang:Next page}</div></a>{/block:NextPage}{/block:Pagination}{/block:IfNotInfiniteScroll}<!--insert missing search bar here-->

        {block:IfShowDescription}{block:Description}<div class="slide_downs description hidden">
        <!--moved search bar-->
            <div class="item search"><form action="/search" method="get"><input type="text" name="q" value="{SearchQuery}" /></form></div>
            <!--moved search bar-->

            {Description} 
        </div>{/block:Description}{/block:IfShowDescription}
        {block:AskEnabled}<div class="slide_downs askbox hidden">
             <iframe frameborder="0" scrolling="no" width="100%" height="149" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
        </div>{/block:AskEnabled}
        {block:SubmitEnabled}<div class="slide_downs submitbox hidden">
             <iframe frameborder="0" scrolling="no" width="100%" height="500" id="submit_form" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]-->
        </div>{/block:SubmitEnabled}

    </div>

    <div class="posts">    
        {block:Posts}
        <div class="post {block:IfInfiniteScroll}load{/block:IfInfiniteScroll}" id="post_{PostID}" {block:Date}no_{/block:Date}style="width:100%;">{block:Text}<div class="inner">{block:Title}<h2>{Title}</h2>{/block:Title}{Body} 
        <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->     
        {block:More}<h3><a href="{Permalink}">{lang:Read more}</a></h3>{/block:More}</div>{/block:Text}{block:Answer}<div class="inner"><p><strong>{lang:Asker asked}: {Question}</strong></p><p>{Answer}</p>


              <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->
        </div>{/block:Answer}


        {block:Chat}<div class="inner">{block:Title}<h2>{Title}</h2>{/block:Title}<ul class="lines">{block:Lines}<li class="line {Alt}">{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>{/block:Lines}</ul>
              <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->

        </div>{/block:Chat}


        {block:Quote}<div class="inner"><h2 class="quote">"{Quote}"</h2>{block:Source}<p>- {Source}</p>{/block:Source}

              <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->

        </div>{/block:Quote}


        {block:Link}<div class="inner"><h2><a href="{URL}" {Target}>{Name}</a></h2>{block:Description}{Description}{/block:Description}  

        <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->

        </div>{/block:Link}


        {block:Photo}
        <div class="photo">
        {LinkOpenTag}
        <img src="{block:IndexPage}
        {block:IfLargePosts}
        {PhotoURL-400}
        {/block:IfLargePosts}
        {block:IfNotLargePosts}
        {PhotoURL-250}
        {/block:IfNotLargePosts}
        {/block:IndexPage}

        {block:PermalinkPage}
        {PhotoURL-500}
        {block:PermalinkPage}

        " alt="{PhotoAlt}" class="main_photo" />{LinkCloseTag}</div>{/block:PermalinkPage}{block:Caption}<div class="inner">{Caption} 
        <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->




        </div>

        {/block:Caption}{/block:PermalinkPage}{/block:Photo}


        {block:Photoset}{block:IndexPage}{block:IfLargePosts}{Photoset-400}{/block:IfLargePosts}{block:IfNotLargePosts}{Photoset-250}{/block:IfNotLargePosts}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}{block:Caption}<div class="inner">{Caption}


              <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->
        </div>{/block:Caption}{/block:Photoset}


        {block:Video}{block:IndexPage}{block:IfLargePosts}{Video-400}{/block:IfLargePosts}{block:IfNotLargePosts}{Video-250}{/block:IfNotLargePosts}{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}{block:Caption}<div class="inner">{Caption}
              <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->


        </div>{/block:Caption}{/block:Video}


        {block:Audio}{block:AlbumArt}<img src="{AlbumArtURL}" class="main_photo" />{/block:AlbumArt}<div class="inner">{AudioPlayerWhite}{block:Caption}{Caption}
          <!--pasted-->
        <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
        <!--Pasted-->






        {/block:Caption}</div>{/block:Audio}



            {block:Date}<div class="info_bar"><img class="like" src="http://static.tumblr.com/jw8fmba/JQllum7dg/like.png" id="like_image_{PostID}" onclick="LikePost('{PostID}','{ReblogURL}',this)" border="0" alt="like" title="like" /><a href="{ReblogURL}" title="Reblog this photo"><img src="http://static.tumblr.com/jw8fmba/bPzlum7er/reblog.png" class="reblog" /></a>{block:NoteCount}<a href="{Permalink}" class="notecount"><span class="note_count_{PostID}">{NoteCount}</span></a>{/block:NoteCount}</div>{/block:Date}
        </div>


        {block:PostNotes}<div class="note_box">
            <div class="inner">
                {PostNotes}
            </div>
        </div>




        {/block:PostNotes}  



        <!--pasted here-->

                                {block:PermalinkPage}
                        {block:NoteCount}
                        <div id="notes">         
                            <h2>{NoteCount} Notes<span class="sep">/</span> 
                            <a id="notes-toggle" href="#"><span class="label">Hide</span><span class="icon up"></span></a></h2>
                            {PostNotes}
                        </div><!-- /.notes -->
                        {/block:NoteCount}

                        {block:IfDisqusShortname}
                        <!-- DISQUS COMMENTS -->
                        <div id="disqus">
                            <h2>{lang:Recent comments}</h2>
                            <script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
                            <div id="disqus_thread"></div>
                            <script type="text/javascript">
                               var disqus_identifier = {PostID};
                              (function() {
                               var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                               dsq.src = 'http://' + disqusShortname + '.disqus.com/embed.js';
                               (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                              })();
                            </script>
                            <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=tinanewtonart">comments powered by Disqus.</a></noscript>
                            {lang:Blog comments powered by Disqus 2}
                        </div><!-- /#disqus -->
                        {/block:IfDisqusShortname}
                        {/block:PermalinkPage}















        <!--to here--->



























        {/block:Posts}

    </div>







    {text:Music player script}

{block:IndexPage}
<script type="text/javascript">
$(function(){var $container = $('.posts').css({ opacity: 0 });$container.imagesLoaded(function(){$container.animate({ opacity: 1 });$container.masonry({itemSelector:'.post',columnWidth: {block:IfLargePosts}410{/block:IfLargePosts}{block:IfNotLargePosts}260{/block:IfNotLargePosts}});});$container.infinitescroll({navSelector:'.pagination',nextSelector:'.pagination li a.pagination_nextlink',itemSelector: '.load',loading: {img:'http://static.tumblr.com/jw8fmba/yGMlx5zw8/transparent.gif',msgText : "{text:Infinite scroll message}",donetext:''}},function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 });$newElems.imagesLoaded(function(){$newElems.animate({ opacity: 1 });$container.masonry( 'appended', $newElems, true );});});});
</script>
{/block:IndexPage}
<iframe id="likes_frame" style="height:1px;width:1px;position:absolute;left:-500px;"></iframe>
</body>
</html>

web-design

1 Contributor
1 Reply
160 Views
1 Minute Discussion Span
Latest Post 12 Years Ago Latest Post by tinanewtonart

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tinanewtonart 0 Light Poster · Answer 1 · 2012-06-08T06:57:24+00:00

oh and the code from here too.
https://developers.facebook.com/docs/reference/plugins/comments/