Threaded Mode | Linear Mode

pre4_me · 10-02-2012, 11:13 PM

Hi, I want to create a simple social sharing widget for my blog. I am currently using share-this widget. But for some reason I don't want it. It is too slow in loading and increase page load time too much.
So I decided to go with a simple widget but without any Java script.
Now what the problem I am facing is I have created CSS sprite images but I dont know what "href" string i should enter for each social media like twitter, Facebook, Google plus, pinterest and Linkedin.

The requirement is, if someone want to share the post to twitter, and when he click on the tweet button, the the URL of page and the title of the post should automatically go to the tweet.

I tried using

href="https://twitter.com/share"

but it only gives URL of the source page and not the post title. Same is the case with Facebook. When I click on the Facebook share button, only blank share popup opens.
Please help me .
I tried searching many websites but everywhere they have just copy pasted the non working code.

Thanks.
How To: How I should make the href, so that The title of the post should be automatically go in to the tweet along with link.

Zainul · 10-02-2012, 11:21 PM

visit http://sharethis.com/publishers/get-sharing-tools
REMOVE 'S' FRM HTTPS://

dload · 10-02-2012, 11:21 PM

HTML uses tags for coding, each tag will have a open tag and close tag (these could have more tags inside). For example:

<HTML>

<HEAD>
<TITLE>My new webpage</TITLE>
</HEAD>

<BODY>
(All the content of your webpage goes in here, between the <BODY> tags)
</BODY>

</HTML>

You should use A Tags for links:
<a href="https://twitter.com/share" target="_blank">Share us on Twitter!</a>

href - is the url to link to, this could be a link within the site (leave out the domain) or another site (add the domain name).

target - is the way it will open that link, in this case "_blank" is the most popular for external links as it would open in a new windows/tab. This is ideal for sending traffic without them leaving your actual website. Leave out this, if you want to replace the original window, such as with internal site navigation, etc.

Inbetween the tags is the text for the link, you could place other tags here instead like an image, etc:
<a href="https://twitter.com/share" target="_blank"><img src="/images/twitter.png" alt="Share us on Twitter" height="42" width="42" /></a>

Image source should be where the image has been uploaded to (best if uploaded to your own site).

alt - alternative text, this is helpful for people if they have images turned off and the search engine crawlers to know what the image is about.

Images should have a height and width tags in pixels saying what size it is (best to resize the image and match these to the actual image size). These are helpful hints to your web browser to load it quicker and cleaner, such as leave that amount of space if the image takes a while to load in or is missing / turned off, etc. Again it also gives hints to the search engine crawlers as well.

Some other tags to learn:
<div>these are great for layout and styling with css</div>
<p>A paragraph of text description could go here</p>
<strong>The text in these will appear bolder</strong>
<i>The text in these will appear in italics</i>
etc...

The thing to note is the order of all these tags must be valid (when they are embedded into each other), for example:
<div class="boxstyle">
<h1>This is a header</h1>
<p>This is some <strong><i>super cool</i></strong> text paragraph below.</p>
</div>

The class name on tags can then be used to style parts under your css coding and/or you could use the tag name itself to do global styling, for example:
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
.boxstyle {
text-align:center;
}

As for the tweet button, they normally add a little javascript to make it work as it will need to know the page and link to (https://platform.twitter.com/widgets.js), for details check:
https://dev.twitter.com/docs/tweet-button

Or to do it yourself:

<style type="text/css" media="screen">
#custom-tweet-button a {
display: block;
padding: 2px 5px 2px 20px;
background: url('https://twitter . com/favicons/favicon.ico') 1px center no-repeat;
border: 1px solid #ccc;
}
</style>

<div id="custom-tweet-button">
<a href="https://twitter.com/share?url=ht tps % 3A% 2F% 2Fyourdomain . com% 2Fpages% 2Fto% 2Fshare" target="_blank">Tweet</a>
</div>

Ensure you have ?url = (the current page to page)

Where %3A is a encoded ":" and %2F is a "/" (this is because that are special characters, you can't use the original character). Some spaces have been added as this will cut them out.