Posted by: yuvan004 | September 1, 2010

Share code for wordpress blog and wordpress sites


share this

Interested in sharing your content on Facebook, Twitter, LinkedIn or delicious, orkut, myspace, buzz, digg ? Do multi-option social media sharing tools such as ShareThis seem like overkill?

That was our conclusion after researching the social media sites on which readers are most likely to share content from our blog focused on solutions to a wide range of business challenges, What Works for Business. We decided that Facebook, Twitter, LinkedIn or delicious, orkut, myspace, buzz and digg were the sites on which our target business audience is most likely to share business-related content. Rather than using the ShareThis widget which provides many more options (many confusing options for most of our readers), we decided to create custom share buttons.

To add custom share buttons automatically to each post in a WordPress blog, add the following code in your header.php, single.php, style sheet and function.php

Before that you want to download the image and upload your image to the site in image folder

Download the zip file click here

step 1 add the following code in single.php where you required
//Share Div
share

shareX

<a href="http://www.facebook.com/sharer.php?u=&t=&#8221; TARGET=_BLANK><img id="opa" src="/images/facebook.png”>
<a href="http://twitter.com/home?status=: ” TARGET=_BLANK><img id="opa" src="/images/twitter.png”>
<a href="http://delicious.com/post?url=&title=&#8221; TARGET=_BLANK><img id="opa" src="/images/delicious.png”>
<a href="http://digg.com/submit?phase=2&url=&title=&#8221; TARGET=_BLANK><img id="opa" src="/images/digg.png”>
<a href="http://www.google.com/buzz/post?url=&ctx=share&#8221; TARGET=_BLANK><img id="opa" src="/images/buzz.png”>
<a href="http://promote.orkut.com/preview?nt=orkut.com&du=&ctx=share&tt=&#8221; TARGET=_BLANK><img id="opa" src="/images/orkut.png”>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&#8221; TARGET=_BLANK><img id="opa" src="/images/linkedin.png”>
<a href="http://www.myspace.com/Modules/PostTo/Pages/?l=3&u=&#8221; TARGET=_BLANK><img id="opa" src="/images/myspace.png”>

step 2 add the following code in style sheet.
//Css
#show
{
display:none;
float:right;
position:absolute;
_position:absolute; /* hack for internet explorer 6*/
height:auto;
width:300px;
background:#ececec;
border:2px solid #cecece;
left:500px;
z-index:3;
padding:12px;
}
#show a,#link
{
cursor: pointer;
text-decoration:none;
font-size:15px;
border:none;
}
#opa
{
z-index:3;
padding:3px;
opacity:.5;
border:none;
}
#opa:hover
{
opacity:1;
cursor:pointer;
}
step 3 add the following code in Header.php
//script

$(document).ready(function()
{
$(“#link”).click(function()
{
$(“#show”).slideDown(“slow”);
});
$(“#close”).click(function(){
cancel();
});
$(document).keypress(function(e){
if(e.keyCode==27){
cancel()
}
});
});
function cancel()
{
$(“#show”).slideUp(“slow”);
}

step 4 add the following code in function.php
//function.php
function makeShortURL($URLToConvert) {
$shortURL= file_get_contents(“http://tinyurl.com/api-create.php?url=&#8221; . $URLToConvert);
return $shortURL;
}
Demo of this code

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

Categories

%d bloggers like this: