Social Share for Smugmug

As I’m currently setting up the portfolio using Smugmug, was trying to work out on a nifty way of enabling social share on the site [For ppl not aware – Smugmug is a great professional photo hosting site]. Some of the key networking sites that i was looking onto were twitter, facebook, digg, google buzz [though the list in endless, am currently focusing just on these]

After checking out couple of different options , came across css creator –  a great site with lot of information on CSS tips, tricks and article. Was really inspired with the Social Share article – that I decided to replicate the same [is’nt imitation the best form of flattery ;-) ]. If ur looking to use the same in any other website, this article @ csscreator has the details.

Steps for Smug Customization

This post is about adding a nifty menu to the smugmug pro site. When the user clicks on any of the social icons, the current page would be shared in the appropriate service. The below code customized to move the share bar to the top right. The minimize option has been removed as the same is handled with the mouse position. Also it has been updated to hold just four key links. For a live demo u can check out my site. The below steps are specific for smugmug pro setup.

In the Advanced Site-Wide CustomizationClip_61

Add this code at the end of “CSS” Block

Add this code at the end of “Bottom JavaScript” Block

The icon images are from WebDesignerDepot.
The images are stored @ my blogsite as Smugmug does not allow png file type [still wonder why that is the case!!!]
The Code is based from the scripts @ CSS Creator

I’m not an expert with CSS,  hence if there is a better and efficient ways of achieving this, feel free to leave an update in the comments. I know the code is little bulky, since the slide CSS is based on Jquery – but the size is no where close to the high res images that the site crunches. Hope u find this useful to customize ur smug site.

P.S: I have tweaked the above to suite my sites current look @ www.liketheocean.com. If u would like to know more about the same, leave a comment below.

EDIT : I have updated the site sometime back and no longer use the script. Drop me a note or comment if u would like a copy of the same.

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

Advertisements

7 Comments to “Social Share for Smugmug”

  1. Great piece of code! I just added this to my site and it worked flawlessly. Thanks!

    Like

  2. Hi Greig, Glad u liked it !!!

    p.s : ur portfolio was pretty cool !

    Like

  3. I put in the codes exactly as directed, and it shows up on the page, but when I put the mouse over it, it does not expand. =/

    Like

  4. Hi Amanda,
    I can see script is working in Firefox/3.6.3 & Google Crome 5.0 @ ur site . Can u let me know what browser / version / platform ur trying to view the same.

    Like

  5. THis is amazing!!!! How do i add “stumbleupon” and other icons to it??? thanks

    Like

  6. idk why my code just turned into that when posting thats weird

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: