What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Social Icon strip - Part 2


gautamz07

Power User
Messages
338
Likes
73
Hey Guys i had posted a similar thread before , but i am posting thins again now because i want to learn how to do it .

https://www.photoshopgurus.com/forum/web-design/51372-what-nice-social-icon-strip.html -- earlier thread .


I tried that approach and what i got was

Untitled1.png

what i used for the above was

This - http://www.sharethis.com/get-sharing-tools/\

thats perfect and that exactly what i want , there are a few problems though .
when i click on any of the links , it redirects me to some random page , I don't see where i can edit the "Href" attributes in the code .

what i actually want is something like this .

Untitled.png

Go to the following page

http://courses.tutsplus.com/courses/object-oriented-design-in-php

and see how nicely that social icon strip scrolls when the page does .

can anybody guide me , how to make this strip and implement it , i hv been :banghead: breaking my head on this for quite a while now :D

if i successful do manage to do it , i'll make a tutorial and give you credits LOL :D
 

MrToM

Guru
Messages
3,595
Likes
3,321
The second part is pretty simple, you need to set position:absolute and top:0px for the container of those icons.
That will 'fix' it to the top of its container like in your example.
If you want it lower just change the top:0px value to say, top:50px

As for the first part well, which code are you using? There are several platforms on that page......which one?
The 'random' page will probably be because its example code, intended for you to change to your 'real' links, but without seeing the code its virtually impossible to say what to change.

What Browser do you use when developing?

Regards.
MrTom.

EDIT:
OK, I just had a better look at some of the code that place gives you....talk about using a sledgehammer to crack a nut!

What are trying to do is no more difficult than a few div's, some images and a bit of HTML CSS and JS.
I don't know what this thing is supposed to do but I guess the JS will control the numbers...whatever they are.
From the code they give you its very easy to download the images, and the HTML and CSS for 4 box's isn't exactly brain taxing either....you've already done it in your 'Gallery' code.

BTW, when I tried it the links all took me to their respective pages....except Pinterest, apparently there was nothing of interest on the page, or so it told me.
I dunno.
 
Last edited:

gautamz07

Power User
Messages
338
Likes
73
Thanks for ur reply Mr Tom and yeah ! Absolutely no hand-coded code involved here :) .. All i had to do was go through the steps and post the code they gave me in the head tags and in the script tags .

Nothing built from scratch . (may be for a future project , i'll try that approach . ) .

U mean it re-directed u to facebook when u click on the facebook link ? . Actually try this , if you have a facebook or twitter account , log into it and now come to the web-page on which you have added the social icons and click the share button .. is it sharing the web page on the social network site ? ,

Hope its not too complicated :D


Oh and i use Chrome For development !
 
Last edited:

MrToM

Guru
Messages
3,595
Likes
3,321
...U mean it re-directed u to facebook when u click on the facebook link ?

Yes.

...is it sharing the web page on the social network site ?...

Here is the page using the generated code from 'ShareThis'...
share_01.png


This is the page it takes me to when following your instructions...
share_02.png


I dunno if thats what you were expecting but that's what I get.

The html code:
Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Share Links</title>
        <meta charset="utf-8"/>
        [COLOR=#00ff00]<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
        <script type="text/javascript">stLight.options({publisher: "ur-631969d-4d0b-d330-d9b9-74ab7c9c61df", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>[/COLOR]
    </head>

    <body>
        [COLOR=#00ff00]<span class='st_facebook_vcount' displayText='Facebook'></span>
        <span class='st_twitter_vcount' displayText='Tweet'></span>
        <span class='st_googleplus_vcount' displayText='Google +'></span>
        <span class='st_pinterest_vcount' displayText='Pinterest'></span>[/COLOR]
    </body>
</html>

The bits in green are the generated code from 'ShareThis'.

As you can see, the HTML for those links is nothing more than than a span, a class and some displayText, which means everything else is done by JS (buttons.js).....which is an online file, (first line of green code).
You can't edit referenced online code so if something doesn't work, as you said it didn't (random links?), then the problem must be somewhere else...shareThis will not serve code which doesn't work.

So as to those random links? I dunno.
The layout isn't the same as I don't know which one you used but try the code above.

As to the Chrome browser...thats ok, eith FF or Chrome is fine, they both have excellent development tools, FireBug, Dom Inspector, Web Development Tool, etc etc.
You are making full use of these when developing aren't you?
In both these browsers you can right click any element on a page and use...Inspect Element.

Web Developer by Chris Pederick is extremely useful when de-bugging web pages...if you don't have it, get it.

Regards.
MrTom.
 

gautamz07

Power User
Messages
338
Likes
73
Mr. Tom ! thanks for trying :) , well what i realise is that using a third party library can sometimes , not be the best option , may be i will go and search for something else , which may give me the desired result .

And yes chrome is great , i like it , will surely try the extension that u suggested :D

Thanks Mr Tom :D :D

regards .

Gautam.
 
Last edited:

MrToM

Guru
Messages
3,595
Likes
3,321
If you supply the information I've requested I can help you solve your problems, but without knowing what you've tried, what works, what doesn't, etc etc its impossible to recommend any further action.

What Sharethis code did you try that gave you the 'random' links?
Did the code I supplied work for you?
Are my results what you were expecting?
What results did you get from your code?

3rd party code is fine to use, in this example its obviously doing something that looks like it would take you forever to write manually, but unless you download it and reference it locally you cannot change what it does.

Doing that is OK but of course if it ever changes you'll not get the update unless you download it and replace your version.

I don't know what this 'panel' is supposed to do, apart from link to those respective web-sites, but that doesn't take 100's of lines of JS to do that so what's all the JS for apart from adding href's and some CSS?

What do those numbers represent in that panel...are they just a counter?

I dunno, I must be getting old.

Regards.
MrTom.
 

gautamz07

Power User
Messages
338
Likes
73
ok heres what i did :

1 . i went to http://www.sharethis.com/get-sharing-tools/

2 . SELECTED website => SELECTED Sidebar .

3. deleted the icons i did't want , what i was left with was just the below .

1.png

now i click on "GET THE CODE" Button and the website gives me a popup .

it says the following :

1. Place these script tags in "head" section of your html.

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

2.
Now, put these scripts at the end of your page. They contain the parameter preferences in JSON format.

<script type="text/javascript">stLight.options({publisher: "04f4db94-c669-4189-81a6-f6851ff375ea", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "04f4db94-c669-4189-81a6-f6851ff375ea", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", ""]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

(my text has tured to green magically .. wow , never mind , i'll continue typing )

ok , so i do exactly as directed and what i get is the below :

2.png

till now everything has worked perfect , now the problem starts here .

when i click on the facebook icon here the following happens :

3.png
now its sharing successfully , but its sharing nothing , i assume in the Href it just has "facebook.com" instead of the facebook url that i want to put in .

so thats the problem i have been facing so far .

i think the solution might be right in front of me , but i'am just not looking at it . maybe i just need to look closer .

 

Attachments

  • 3.png
    3.png
    193.9 KB · Views: 6

MrToM

Guru
Messages
3,595
Likes
3,321
Right...ok.

I followed your steps and ran the page locally. (Through Apache Server)
This failed....just a blank page.

So I ran it externally and it worked..... I got the icons on screen.
Clicked the FB link and it asked me to log-in....this went ok.

When the page loaded it shows virtually the same as you but with my default 401 error code, meaning authorization is required to view the contents of the page....thus:

share_03.png

The "All_Error_Codes" part is the title I gave my error page.

If I get an error 401 code then that means whatever is trying to access that page needs permission to do so.
If you don't see your page when you click the icon link then maybe the same is happening?

Does FB have access to the page with the icons on it?

It also looks like the server you are using is passing a file to FB rather than a html page....check out the url.

Are you running this locally?
Try it externally and see if it makes a difference.

Regards.
MrTom.

EDIT:
Just had another thought...
Script within the BODY tag gets executed in the order its written on the page.
By the looks of it you have a BODY background image which is going to be large and take considerably more time to load than to execute the script.

It may be that the script is executing BEFORE the image has loaded, resulting in a blank page.
Try removing the background image to speed up the page loading and see if that makes a difference.....just COMMENT it out of the HTML or CSS...(wherever you put the styling).

If that works then to display the image you need to delay execution of that script until the page has loaded....using an onLoad function in the BODY tag.
The script at the bottom of the html BODY then needs to be a function rather than straight code.....its pretty easy to do but see if it works without the image first, if so I'll show you how to create this 'function' to delay execution of that script....unless you know already of course.
 
Last edited:

gautamz07

Power User
Messages
338
Likes
73
hey MrTom , thank so much ! what i actually went ahead and did is , i uploaded it to a server and when its online it works just fine , i mean it achieves the objective of sharing the website on any given social network (i mean which ever one the user clicks . ) .

I never got the error you have . also since its a one page website , i saved it as a HTML file and not PHP , so did't require to run the apache server .

Oh and as far as the function of onload is concerned in Jquery , is't it :

$('document').ready(function(){
// code goes here.
});

haha . well atleast i learnt tat much :D :D

Thank you so much , for your time and patience .
 

MrToM

Guru
Messages
3,595
Likes
3,321
hey MrTom , thank so much ! what i actually went ahead and did is , i uploaded it to a server and when its online it works just fine...

Excellent!
So it must have been a permission issue then with your local server?

I never got the error you have . also since its a one page website , i saved it as a HTML file and not PHP , so did't require to run the apache server .

No, you wont get that particular error page, its MY custom error page, you probably did get the same 401 error but normally its just a line or two of text at the top of the page....that FB link looks like it shows you the very middle of the page only so you wouldn't see anything but a blank space, anyway, irrelevant now but always good to know what's going on....regardless.

One other benefit of sorting it locally is of course when updating.
Ideally you want to set up your local environment as close to your hosts environment as possible.
If your host uses 'Linux', and any host worth their salt does, then its probable they use 'Apache' software as their server.
You should, ideally that is, also set up an 'Apache' server....XAMPP is really good but no host will ever use it as the main web server software.

As you've just witnessed by the problems you had, getting as close to your host server set-up can help enourmously when de-bugging and developing in general.

Not only that, but when your site goes 'live' you'll not be able to use it for 'development', so a second, virtually identical set-up is required to develop on....ie, locally on your machine.

When it comes to uploading the files to your 'live' site you'll know that they work so updating should go without a problem.
It sounds daft but host server software can be vary considerably, even if its all the same, ie 'Apache', as its very configurable....for instance your host may put a limit on 'upload' filesize which is considerably lower than the 'Apache' default....you develop it locally and it works fine, but when uploaded to your server it fails....because of the limits they impose on it.

Just a little background info for you there, in an effort to explain why things work online but not locally.

I do strongly urge you to set-up your local server as close to your hosts as possible though, it'll save you headaches later on....like the one you just had!

Oh and as far as the function of onload is concerned in Jquery , is't it :
Code:
$('document').ready(function(){
   // code goes here.
});

Well that's jQuery and as I've said before you are better off not using it when learning how to code Javascript, it'll teach you nothing but how to use somebody elses code, not JS.

For the record in JS the code would be:
Code:
[COLOR=#00ff00]<body onLoad = "onLoadRunMe()">
...
...
...
<script>
function onLoadRunMe(){
 // JS code goes here
}
</script>
</body>[/COLOR]

I'll let you decide which is the cleaner of the two.

Regards.
MrTom.
 

gautamz07

Power User
Messages
338
Likes
73
Thank you for ur priceless advice :) , never taught of it that way , but yeah maybe i should start now .

Well , between JS and Jquery , i think i'd go with JS 9 out of 10 times , alas , if i knew how to use it :D , but never too late to learn , i'll start now .

:D :D :D

regards .

Gautam.
 

MrToM

Guru
Messages
3,595
Likes
3,321
You're very welcome.

If you need help setting up an 'Apache' server just let me know, its a bit involved, its not complicated, but there are things that can have you scratching your head till it bleeds.....and its usually an annoyingly easy fix too! (Which isn't in the documentation!)

The JS jQuery thing.....well, I can only repeat what I've already said, you'll learn nothing about JS from using jQuery.
Don't get me wrong, jQuery is very good but it really is like using a sledgehammer to crack a nut, especially for the simple things.

I also don't see the point of bloating your code with unused JS, at most you'll probably only use only 2% of jQuery. Further to that, jQuery is meant to simplify using JS, but to be honest the jQuery code is often more complicated than just pure JS.

JS is not difficult to learn, no more so than HTML or CSS, but in order to learn it you really do need to use it.

You're other example of the 'Gallery' is an excellent starting point to learn JS....you can experiment with that in all sorts of ways from styling to linking, hit counts and pop-ups....all manner of things to play with....but do it manually.

Above all, have fun doing it.

Regards.
MrTom.
 

Top