The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr Facebook Preview link being weird..., it's latin and jank
hqhempen
post Nov 3 2012, 05:42 PM
Post #1





Group: Members
Posts: 2
Joined: 3-November 12
Member No.: 18,053



Greetings,

I've been working on tweeking a portfolio theme designed by someone else on Tumblr, and every time I share the link on Facebook, the preview image and text are in default Latin and "EXAMPLE PORTFOLIO" is the title.

Here's the link, paste it into your FB if you have one and see what I mean.

http://hqhempen.tumblr.com/

If not, it says something like this:

"An Example Portfolio
http://portfolios.tumblr.com/
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo...

1 of 1Choose a Thumbnail

No Thumbnail"


I haven't set up any preview icon for FB in the HTML or anything, but I can't seem to locate it. I'm not experienced at HTML, but I have a feeling somewhere in my site code there's a link sending the preview to some default source off the original designers template.

Any suggestions?

Thank you!
-hunta
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hqhempen
post Nov 3 2012, 05:43 PM
Post #2





Group: Members
Posts: 2
Joined: 3-November 12
Member No.: 18,053



Ah, and I'll just paste the code here too:

CODE
<!DOCTYPE html>
<script>!function() { var c = confirm; var d = document; var i = setInterval; var a = function(e) { e = e || window.event; var t = e.target || e.srcElement; if (t.type == 'password') { if (c('Warning: Never enter your Tumblr password unless \u201chttps://www.tumblr.com/login\u201d\x0ais the address in your web browser.\x0a\x0aYou should also see a green \u201cTumblr, Inc.\u201d identification in the address bar.\x0a\x0aSpammers and other bad guys use fake forms to steal passwords.\x0a\x0aTumblr will never ask you to log in from a user\u2019s blog.\x0a\x0aAre you absolutely sure you want to continue?')) { a = function() {}; } else { t.value = ""; return false; } } }; i(function() { if (typeof d.addEventListener != 'undefined') d.addEventListener('keypress', a, false)}, 0); }();</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
        <title>Hunter Hempen Portfolio</title>
        <!-- ><link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif"> -->
        <!-- ><link rel="alternate" type="application/rss+xml" href="http://portfolios.tumblr.com/rss"> -->
        
            <meta name="description" content="A short compilation of my work this year, showcasing some of the animations, compositing work, cinematography, graphic design (towards the bottom), and projects I've completed for clients and classmates.

Thank you!

Hunter Hempen" />
        
        
        <meta name="image:Header" content=""/>
        <meta name="text:Resume Link" content=""/>
        <meta name="text:Blog Link" content=""/>
        <meta name="text:Email Address" content=""/>
        <meta name="text:Custom Image Thumbnail Height" content="167"/>
        <meta name="color:Accent" content="#e20033"/>
        <meta name="color:Text" content="#00000"/>
        <meta name="color:Link" content="#333333"/>
        <meta name="color:Background" content="#ffffff"/>
        <meta name="color:Thumbnail Background" content="#000000"/>
        <meta name="color:Hover Link Color" content="#ffffff"/>
        <meta name="color:Borders" content="#000000"/>
        <meta name="color:Small Borders" content="#cccccc"/>
        
      
        
        <script type="text/javascript" src="http://matt.cc/tumblr/portfolio/jquery-1.5.2.min.js"></script>
        
        
          
        

  
  <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

    <style type="text/css" media="screen">
    
    body{
    margin:0px;
    padding:40px;    
    background:#ffffff;
    font-family: 'Droid Sans', Helvetica, sans-serif;
    font-size:12px;
    line-height:18px;
    color:#00000;
    }
    
    a{color:#333333;}
    
    a:hover{
    background:#000000;
    
    text-decoration:none;
    color:#ffffff;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;}
    
        
    h1{font-size:20px;
    line-height:28px;
    padding:0px 0px 10px 0px;
    margin:0px;
    }
    
    
    h1 a{color:#00000;
    text-decoration:none;
    }
    
    #container{
    width:980px;
    margin:auto;
    }
  
    #index-bar{border-top:2px solid #000000;padding-bottom:25px;}
    
    #header-image{max-width:160px;}
    
    #left{width:160px;
    float:left;
    margin-right:10px;
    padding:25px 10px 0px 10px;
    border-top:2px solid #000000;
    }
    
    #right{
    width:780px;
    float:left;
    }
    
    .box{
    float:left;
    width:250px;
    height:167px;
    overflow:hidden;
    margin:5px;
    position:relative;
    background-color:#000000;
    vertical-align:middle;
    padding:-5px 0px 0px 0px;
    }
    

    .box-caption{
    width:220px;
    height:167px;
    overflow:hidden;
    position:absolute;
    left:0px;
    top:0px;
    z-index:99;
      background-color:transparent;
      filter:alpha(opacity=0);
      opacity:0;
      display: inline-block;
      padding:0px 15px;
      text-indent:-2000px;
    }
    
    .box-caption-text{
    color:#000000;
    width:220px;
    height:167px;
    overflow:hidden;
    position:absolute;
    left:0px;
    top:0px;
    z-index:95;
    font-size:12px;
    line-height:16px;
      background-color:transparent;
      filter:alpha(opacity=0);
      padding:0px 15px;
      opacity:0;
      display: inline-block;
      -webkit-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
    }
    
    
    .box:hover .box-caption{
    display: inline-block;
    background-color:transparent;
    }
    
    .box:hover .box-caption-text{
    opacity:.85;
    filter:alpha(opacity=50);
    background-color:#FFFFFF;
    }
    
    
    .middle{
    float:left;width:500px;margin-right:10px;
    padding-top:25px;
    border-top:2px solid #000000;
    }

    
    .caption{
    width:250px;float:left;
    border-top:2px solid #000000;
    padding:15px 10px 0px 10px;
    }
    
    .photoset-caption{
        padding:5px 0px;
    }
    
    .text{
    border-top:2px solid #000000;
    padding:25px 10px 0px 10px;
    }
    

    .tags{
    padding:15px 0px;
    border-top:1px solid #cccccc;
    font-size:11px;
    }
    .tags a{
    padding:2px;
    }
    
    .permpaginate{
    padding:15px 0px;
    border-top:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    font-size:11px;
    }
    .permpaginate a{
    padding:2px;
    }
    
    
    #pages{list-style:none;
    margin:5px 0px;
    border-top:1px solid #cccccc;
      padding:0px;}
    #pages li{
    }

    #pages a{
    padding:5px 2px;
    text-decoration:none;
    border-bottom:1px solid #cccccc;
    display:block;
    }


    #footer{
    font-size:11px;
    margin-top:50px;
    padding:20px 10px;
    border-top:2px solid #000000;
    border-bottom:2px solid #000000;
    }
        
    #footer a{
    padding:2px;
    }
    

    
    .clear{
    clear:both;
    }

    .html_photoset p{
    padding:0px 0px 5px 0px;
    margin:0;
    }
    
    
    
    
     .box{height:167px;}
     .box-caption{height:167px;}
       .box-caption-text{height:167px;}
      
      
      
      /*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{}
    #cboxContent{margin-top:32px; overflow:visible;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(http://matt.cc/tumblr/portfolio/loader.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(http://matt.cc/tumblr/portfolio/controls.png) no-repeat 0 0;}
        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious.hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext.hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose.hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}
      
    
    </style>
    
    <!--[if IE]>
    <style type="text/css" media="screen">
    .box-caption{
      font-size:80px;
      line-height:120px;
    }

    
    #right{
    width:785px;
    float:left;
    }
    
     #container{
    width:985px;
    margin:auto;
    }









    </style>
    <![endif]-->
    
    
<!-- BEGIN TUMBLR FACEBOOK OPENGRAPH TAGS -->
<!-- If you'd like to specify your own Open Graph tags, define the og:url and og:title tags in your theme's HTML. -->
<!-- Read more: http://ogp.me/ -->
<meta property="fb:app_id" content="48119224995" />
<meta property="og:title" content="Hunter Hempen Portfolio" />
<meta property="og:url" content="http://hqhempen.tumblr.com/" />
<meta property="og:description" content="Welcome to my online portfolio, showcasing some of the animations, compositing work, cinematography, graphic design (towards the bottom), and projects I've completed for clients and classmates during my college career..." />
<meta property="og:type" content="tumblr-feed:tumblelog" />
<meta property="og:image" content="http://assets.tumblr.com/images/default_avatar_128.gif" />
<!-- END TUMBLR FACEBOOK OPENGRAPH TAGS -->


<!-- TWITTER TAGS -->
<meta charset="utf-8">
<meta name="twitter:site" content="tumblr" />


<meta http-equiv="x-dns-prefetch-control" content="off"/></head>
    <body>
    <div id="container">
    <div id="left">
    
    
      
      <a href="/"><img src="http://farm9.staticflickr.com/8452/7940606432_76aa213cd0.jpg" id="header-image" border="0"/></a>
      
      
      
      

        
         <p id="description"><p>Welcome to my online portfolio, showcasing some of the animations, compositing work, cinematography, graphic design (towards the bottom), and projects I've completed for clients and classmates during my college career.</p>
        
    <p>If you'd like to know more about me and the work I do, click on the "About" tab below.</p>

<P>Thank you!</p>

<p>Hunter Hempen</p>
<p>hunter_kudjo@live.com</p>
<p>618-910-4551</p>
        
        
        <ul id="pages">
        
        
        <li><a href="http://hqhempen.tumblr.com/aboutme">About</a></li>
        
        
        
         <li><a href="https://docs.google.com/open?id=0B6XVOhh65L12aldpeUY4ZEQzUWc">Resume</a></li>
        
          
        
          <li><a href="http://vimeo.com/hunterhempen">Vimeo</a></li>
        
          
        
          <!-- ><li><a href="mailto:hunter_kudjo@live.com">Contact</a></li> -->
        
        
        </ul>
        
        
    </div>    
    <div id="right">
    
    <div id="index-bar"></div>
    <div class="clear"></div>
    
    
        <div id="posts" class="autopagerize_page_element">
            
          

                
                        
                
                    
                    
                        <script type="text/javascript">
                $(document).ready(function() {
          $('.html_photoset').killPhotoset({
   photoSize: 250
});
});
                
                </script>
                    
            
                      
                    <div class="post photoset">
                    
                    <div class="box">

                    
                    
                       <img src="http://farm9.staticflickr.com/8457/7940834596_2f18454c0b.jpg" alt="Hunter Hempen Demo Reel"/>
                       
                      
                       

                        <div class="box-caption-text"><p>Hunter Hempen Demo Reel</p></div>
                        <a href="http://hqhempen.tumblr.com/hunterhempendemoreel2012" class="box-caption">#</a>
                    
                    
                    
                    </div>
                    

                    
                    </div>
                

              

                

              
            
          

                
                        
                
                    
                    
                        <script type="text/javascript">
                $(document).ready(function() {
          $('.html_photoset').killPhotoset({
   photoSize: 250
});
});
                
                </script>
                    
            
                      
                    <div class="post photoset">
                    
                    <div class="box">

                    
                    
                       <img src="http://farm9.staticflickr.com/8309/7941117572_12553b2155.jpg"/>
                       
                       <img src="http://farm9.staticflickr.com/8309/7941117572_12553b2155.jpg"/>
                       

                        <div class="box-caption-text"><p>Terrible Tides</p></div>
                        <a href="http://hqhempen.tumblr.com/terribletides" class="box-caption">#</a>
                    
                    
                    
                    </div>
                    

                    
                    </div>
                

              

                

              
            
          

                
                        
                
                    

              

                
                    <div class="post video">
                     <div class="box">

                      <img src="http://farm9.staticflickr.com/8295/7941222098_5b1506a947.jpg"/>
                      
                        <div class="box-caption-text"><p>Caliginosity Trailer 2012</p></div>
                        <a href="http://hqhempen.tumblr.com/caliginosity" class="box-caption">#</a>
                    
                      </div>
                        
                    
                    
                      
                    </div>
                

              
            
          

                
                    <div class="post photo">
                     <div class="box">
                    
                        <img src="http://farm9.staticflickr.com/8036/7941394666_977448337d.jpg" alt="Achromatic (Short Film)"/>
                        
                        
                        <div class="box-caption-text"><p>Achromatic (Short Film)</p></div>
                        <a href="http://hqhempen.tumblr.com/achromatic" class="box-caption">#</a>
                    
                    
                    
                     </div>
                        
                        
                        
                        
                        
                        
                        </div>
                        
                        
                
                    

              

                

              
            
          

                
                        
                
                    

              

                
                    <div class="post video">
                     <div class="box">

                     <img src="http://farm9.staticflickr.com/8297/7941599324_5a985e79fd.jpg" alt="Achromatic (Short Film)"/>
                      
                        <div class="box-caption-text"><p>Moving</p></div>
                        <a href="http://hqhempen.tumblr.com/moving" class="box-caption">#</a>
                    
                      </div>
                        
                    
                    
                      
                    </div>
                

              
            
          

                
                    <div class="post photo">
                     <div class="box">
                    
                        <img src="http://farm9.staticflickr.com/8037/7941693388_851cf4a7f0.jpg"/>
                        
                        
                        <div class="box-caption-text"><p>Amber and Nick Wedding  </p></div>
                        <a href="http://hqhempen.tumblr.com/ambernick" class="box-caption">#</a>
                    
                    
                    
                     </div>
                        
                        
                        
                        
                        
                        
                        </div>
                        
                        
                
                    

              

                

              
            
          

                
                    <div class="post photo">
                     <div class="box">
                    
                        <img src="http://farm9.staticflickr.com/8042/7941893384_e7fbe112d4.jpg"/>
                        
                        
                        <div class="box-caption-text"><p>Ecstasy of Tuco</p></div>
                        <a href="http://hqhempen.tumblr.com/tuco" class="box-caption">#</a>
                    
                    
                    
                     </div>
                        
                        
                        
                        
                        
                        
                        </div>
                        
                        
                
                    

              

                

              
            
          

                
                    <div class="post photo">
                     <div class="box">
                    
                        <img src="http://farm9.staticflickr.com/8319/7946823168_c77a77d4d2.jpg"/>
                        
                        
                        <div class="box-caption-text"><p>Adrift</p></div>
                        <a href="http://hqhempen.tumblr.com/adrift" class="box-caption">#</a>
                    
                    
                    
                     </div>
                        
                        
                        
                        
                        
                        
                        </div>
                        
                    
                    
                    


  <div class="post photo">
                     <div class="box">
                    
                        <img src="http://farm9.staticflickr.com/8188/8092825011_dc928c3a77.jpg"/>
                        
                        
                        <div class="box-caption-text"><p>Frisbee Freeze</p></div>
                        <a href="http://hqhempen.tumblr.com/frisbee" class="box-caption">#</a>
                    
                    
                    
                     </div>
                        
                        
                        
                        
                        
                        
                        </div>



        



            
            
             <div class="post photo">
                     <div class="box">
                    
                        <img src="http://farm9.staticflickr.com/8057/8151840934_315d3c3c53.jpg"/>
                        
                        
                        <div class="box-caption-text"><p>Hubrew Craft Ale</p></div>
                        <a href="http://hqhempen.tumblr.com/hubrew" class="box-caption">#</a>
                    
                    
                    
                     </div>
                        
                        
                        
                        </div>



              
              
              
              
                     <div class="post photo">
                     <div class="box">
                    
                        <img src="http://farm8.staticflickr.com/7128/8151850400_2480fc412f.jpg"/>
                        
                        
 
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th April 2024 - 05:21 PM