Trying to get Social medis icons to display in footer

I am adding code to the footer.html, and to the css file so Social media icons will display.

<div id=“footer”>

<!-- Start SOCIAL MEDIA ICONS –>

<div id=“footer-share”></div> (this code was originally there, and displays correctly)

<a href=“http://www.facebook.com”><div id=“socialFacebook”></div></a> (my code not displaying … yet)

css

   #socialFacebook {
float: left;
width: 32px;  (size of png is 32x32)
height: 32px;
margin-right: 10px;
margin-bottom: 18px;
background: url(../templates/platinum/images/footer-social-facebook.png); }

all help greatly appreciated :slight_smile:

There’s not enough info here.

Please read this thread: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics . It gives useful tips on how to post code questions, including how to post a useful code example. In this case, a live link would be best.

I assume that “width: 32px; (size of png is 32x32)” is not the real code as it should be commented out.


width: 32px; /*(size of png is 32x32)*/

Otherwise it will corrupt the next rule and you will get no height for the background to display.

I have placed this code in the footer


<a href="http://www.digg.com"><img src="/templates/platinum/images/social/digg.png" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">

now it needs the script to open the popup in a small window

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>

but! when I add the script to my foot, the page will not load.

so I tried adding the script into the header, as all other scripts are there, but! no! page will not load.

all help appreciated, on where to place the script ?

Maybe try a different browser, as it should work. Place the script code just before the </body> tag.

Hello ralp.m,

thank you for your reply, and suggestion,

yes my footer ends with

</body>
</html>

with the script added

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>

</body>
</html>

then the footer stops loading … lol using Firefox

header and body load, yet no footer :frowning:

Can you post a link, or at least a full working page? (See my link in post 2). The JS works OK for me.

Hi ralp.m,

I have set it back to footer loading now.

link: http://www.classified-thailand.com

I wish to remove the “share” and add a line of social buttons with their png in the images folder, plus the script opening a small central window,

your help appreciated :slight_smile:

Yes I use the java script on another site and it works perfectly, but in this footer !! ?? !! hmmmm :slight_smile:

OK, do it. :slight_smile: If it’s not working, we can help debug. (If you don’t want it to be live, then perhaps set up a test page on the same site.)

Hello ralp.m

thank you, yes I have just done that (mind reader) to fix the footer bug problem,

classthai.mypressonline.com

I am trying the code and script their now.

So … where’s the script? :stuck_out_tongue:

Hello ralp.m

using

classthai.mypressonline.com

as a bug fixing site

the code in the footer is:

<a href="http://www.digg.com"><img src="/templates/platinum/images/social/digg.png" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">

now it needs the script to open the popup in a small window

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>

I have tried placing the script in many different areas, yet each time it stops the footer, or worse the whole page from loading.

your knowledge appreciated.

You should be able to place that just before the </body> tag. Give it a try anyway and let us know. It would be good to test it out. It works fine for me when I try it. What browser are you using?

Hi ralp.m ok just added the script into the last lines of the footer,

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>

</body>
</html>

re-load:

classthai.mypressonline.com

now you will see that the footer has stopped loading, using Firefox, same no footer result on Google Chrome.

I will leave the script in place, so you can investigate :slight_smile:

How are you entering this stuff? It’s not normal for none of the code to disappear like that.

What’s the full code you are entering that is disappearing?

Hello ralp.m

here is the complete footer code, maybe you can see can see a culprit lurking :slight_smile:

{* ------ right banners ------- *}
	{if in_array('right',$banners_positions)}
	{banner->getTemplateBanners p1='right' p2=$section p3=$cat p4=$bloc assign='array_banners'}
	{if $array_banners|@count}
	</td>
	<td class="right_banners" valign="top">
	{foreach from=$array_banners item=v}
	<div class="vert_banners">{include file="banner.html"}</div>
	{/foreach}
	{/if}{/if}
	{* ------- end right banners ------- *}
	
	{if in_array('left',$banners_positions) || in_array('right',$banners_positions)}</td></tr></table>{/if}
    </div>
    <!-- end: #main -->

	{* ------ footer banners ------- *}
	{if in_array('footer',$banners_positions)}
	{banner->getTemplateBanners p1='footer' p2=$section p3=$cat p4=$bloc assign='array_banners'}
	{if $array_banners|@count}<div class="clearfix"></div><div class="dcenter"><table align="center"><tr><td>{/if}
	{foreach from=$array_banners item=v}
	<div class="hor_banners">{include file="banner.html"}</div>
	{/foreach}
	{if $array_banners|@count}</td></tr></table></div><div class="clearfix"></div>{/if}{/if}
	{* ------- end footer banners ------- *}
<br/>
    <!-- begin: #footer -->
 <div id="footer">


<a href="http://www.digg.com"><img src="/templates/platinum/images/social/digg.png" hspace="1" vspace="1" border="2" align="middle" alt="Digg">
<a href="http://www.digg.com"><img src="/templates/platinum/images/social/linkedin.png" hspace="1" vspace="1" border="2" align="middle" alt="Digg">
<a href="http://www.digg.com"><img src="/templates/platinum/images/social/youtube.png" hspace="1" vspace="1" border="2" align="middle" alt="Digg">
<a href="http://www.digg.com"><img src="/templates/platinum/images/social/digg.png" hspace="5" vspace="1" border="2" align="middle" alt="Digg" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">

{* -------- social networks ---------- *}
{if in_array("social_networks", $modules_array)}
{include file="modules/social_networks/sn_buttons.html"}
{/if}
{* -------- end social networks ---------- *}

<div id="footer-nav">
	<a href="{$live_site}/{if $seo_settings.enable_mod_rewrite}{$sef_links.contact}{else}contact.php{/if}">{$lng.navbar.contact}</a>&nbsp;
	{foreach from=$sec_navbar item=cp }
	|&nbsp;
	{if $cp.type==1}
	<a href="{$live_site}/{if $seo_settings.enable_mod_rewrite}{$cp.id}-{$cp.url_title}/{$sef_links.content}{else}content.php?id={$cp.id}{/if}" {if $cp.blank==1}target="_blank"{/if}>
	{else}<a href="{$cp.hreflink}" {if $cp.blank==1}target="_blank"{/if}>
	{/if}
	{$cp.title}</a>
	{/foreach}
	<br/>
	<span>{$appearance.footer_text}</span>
</div>

</div>
    <!-- end: #footer -->
</div>
<!-- end: #page -->
</div></div></div></div></div></div></div></div>

<div class="clearfix"></div>
{if $appearance.show_footer_categ}
	<div id="footer_categories">{$footer_links}</div>
    <!-- end: #footer_categories -->
{/if}

{if $appearance.show_footer==1 && $appearance.footer_pic!=''}
<div id="footer_image">
		{if $appearance.footer_pic_link!=''}<a href="{$appearance.footer_pic_link}" target="_blank">{/if}
		{if $appearance.footer_is_flash}
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
		id="{$appearance.footer_pic}" width="{$appearance.footer_pic_width}" height="{$appearance.footer_pic_height}">
		<param name="movie" value="images/{$appearance.footer_pic}">
		<param name="bgcolor" value="#FFFFFF">
		<param name="quality" value="high">
		<param name="allowscriptaccess" value="samedomain">
		<embed type="application/x-shockwave-flash"
			pluginspage="http://www.macromedia.com/go/getflashplayer"
			name="{$appearance.footer_pic}"
			width="{$appearance.footer_pic_width}" height="{$appearance.footer_pic_height}"
			src="images/{$appearance.footer_pic}"
			quality="high"
			swliveconnect="true"
			allowscriptaccess="samedomain">
		<noembed>
		</noembed>
		</embed>
		</object>

		{else}
		<img src="{$live_site}/images/{$appearance.footer_pic}" alt="" />
		{/if}	
		{if $appearance.footer_pic_link!=''}</a>{/if}
</div>
{/if}	

{* -------- social networks ---------- *}
{if in_array("social_networks", $modules_array) && $self_noext=="details"}
{include file="modules/social_networks/sn_footer_details.html"}
{/if}
{* -------- end social networks ---------- *}

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>

</body>
</html>

I am only adding the script, paste-save-upload = footer gone!

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>

There’s too much weird, non-HTML code in there for me to know what’s going on. Sorry. :frowning:

Mmm, the delivered html in the browser is ending with:

...
</div>
      <!-- end: #right_col -->

After that even no </body></html> tags. - The footer html and the footer script aren’t aboard. No wonder there is no footer showing.

In the meantime:

  • Both the html-validator and the css-validator can’t give any results, because of a “500 Internal Server Error”. This is also reported by the Chrome Developer Tools.
  • Looking at the html-source: HTML-Tidy is alerting for 10 missing </div>'s.

I guess there is something wrong in the php-files of the CMS (which we cannot see from here)… :rolleyes:

Anyway, for the pop-up script the code has to be: <script type=“text/javascript”> instead of the deprecated <script language=“javascript”>.

ralph.m thank you for all your time, and help, very much appreciated :slight_smile:

Franky thank you for your investigation, and HTML error finding, now you have me concerned about the HTML code!

my main site is: http://www.classified-thailand.com I would like to correct the HTML code so this site operates at its best. (and fix the footer problem)

I added HTML Validator to my Firefox, and have corrected 2 HTML errors (I could see they were in the header)

But I can not see which page the other errors are on in the Validator Error window.

Warning - line 364 column 3 - Warning: trimming empty <label> (which page is this error on?)

I appreciate your help, as I enjoy, and need to learn how to validate the HTML code.

You help appreciated :slight_smile:

Using the html-validators
The online html-validator and html-Tidy are both per page validators, just for the page you have asked to check.

Correcting the errors/warnings
The best is to go top/down in the list of errors/warnings the validator results is showing.

  • Reason: sometimes an error is triggering follow-up errors (“cascading errors”), which will disappear as snow in a heat wave if you correct the triggering error.
  • Means: after correcting an error, you have to check the page again in the validator. If you are lucky, not one but more errors are gone! :slight_smile:

Meaning of the errors
The online html-validator is somewhat cryptic in describing the nature of an error/warning. Combining the comments of the online validator with the comments and suggestions of HTML-Tidy in the browser source can give more insight in what is meant.
Some of the actual errors/warnings:

  • The “Warning: trimming empty <label>” means: there is a <label></label> element, which is empty (has no content inside the element) and doesn’t do anything.
    For the goal of the element you can have a look in the Sitepoint html-reference (here: [U]reference.sitepoint.com/html/label[/U]), or in the w3schools html-reference (here: [URL=“http://www.w3schools.com/tags/tag_label.asp”][U]www.w3schools.com/tags/tag_label.asp[/U]).
    In this case I think the whole <label></label> element can be deleted without serious consequences.
  • Html-Tidy says “line 1050 - Warning: <a> discarding whitespace in URI reference”. In this link the are spaces, which are forbidden:

    <a href="[U] http://www.classified-thailand.com/22-organic-virgin-moringa-seeds-oil/details.html [/U]">

    has to be:

    <a href="[U]http://www.classified-thailand.com/22-organic-virgin-moringa-seeds-oil/details.html[/U]">
  • Html-Tidy says “line 1316 - Warning: unescaped & or unknown entity ‘&AffID’”, while the online validator says “Line 1396: cannot generate system identifier for general entity ‘AffID’”.
    In the href=“…” of a link or in the src=“…” of an image/script/other file, or in plain text it is not allowed to use just the & (ampersand) sign. This has to be: & (*).

Why the footer-script for the social media is not working, is still a mystery for me. This script is not in the source code, so it will have to do with an error or missing thing in the CMS.

So far,
Happy correcting!

PS:
Probably some errors/warnings are caused by the CMS. Then you can do nothing to correct them - or you have to dive deep in the CMS construction. That is the shadow side of CMS’ses. But for what I’ve seen, the errors on the pages aren’t so severe that the site is not working or not in the right layout.


(*) Unless the &-sign is used in a javascript part of the html: then the & should corrupt the script!