TikiWiki Tips and Tricks: Tip 9: Customize Facebook Share Button and Other Social Sharing (Part 2)

In Part 1, you are at least able to create Facebook Share, Twitter, Cang Baidu, and StumbleUpon on your web page using TikiWiki. The Part 1 also describes in a comprehensive manner, step by step to create your own plugins for social sharing. The Part 2 is a continuation of the social sharing buttons customization other than the four mentioned above.
Each social sharing provider have a unique way of working.

However, the parameters available in step 5 of the part 1 is the standard parameters that is a must (except for [Twiter Id]). Here's I rewrite, I complete precisely, all the parameters required to create the social sharing function:

{$urlPage|escape:'url'} : URL of the current page
{$arttitle|escape:'url'} : article title
{$parsed_heading2|escape:'url'} : article heading
{$urlPage_dirName|escape:'url'}/{if $prefs.feature_sefurl eq 'y'}{$articleId|sefurl:article_image}{else}{$articleImage|escape:'url'}{/if} : article image, especially for Windows Live Messenger.
tiki-articles_rss.php?ver=2: article RSS feed especially for Windows Live Messenger.
{$taginfo.tag|escape} : freetags list, especially for Netlog (optional)

The Windows Live Messenger button is the most complex button, because in addition to the parameters of the top three also includes elements of image, and RSS. While Netlog button only adds an element of freetags list. How does the social sharing in addition to the four above can be formed? Here's how.

For the CSS, open your CSS file that include /**** social network ****/, right below .stumbleupon {top: 0px;left: -102px;}, you insert these scripts for each of the social sharing provider:

.reddit {
top: 0px;left: -136px;
}
.google_buzz {
top: 0px;left: -170px;
}
.myspace {
top: -34px;left: -0px;
}
.blogmarks {
top: -34px;left: -34px;
}
.squidoo {
top: -34px;left: -68px;
}
.oneview {
top: -34px;left: -102px;
}
.webnews {
top: -34px;left: -136px;
}
.misterwong {
top: -34px;left: -170px;
}
.yahoomyweb {
top: -68px;left: -0px;
}
.google {
top: -68px;left: -34px;
}
.delicious {
top: -68px;left: -68px;
}
.linkedin {
top: -68px;left: -102px;
}
.digg {
top: -68px;left: -136px;
}
.technorati {
top: -68px;left: -170px;
}
.windows_live {
top: -102px;left: -0px;
}
.blogger {
top: -102px;left: -34px;
}
.furl {
top: -102px;left: -68px;
}
.netlog {
top: -102px;left: -102px;
}
.linkarena {
top: -102px;left: -136px;
}
.meneame {
top: -102px;left: -170px;
}
.email {
top: -136px;left: -0px;
}
.rssfeed {
top: -136px;left: -34px;
}

Save and close your CSS file.

Meanwhile, for HTML code, open file /sociable_sharing.tpl, right below the line StumbleUpon, you add these following scripts:

Save and close file /sociable_sharing.tpl.

Finish. Now you can open any article page with the social sharing included. The full result will look like this:
Under the normal condition (no mouse hovering on each image/icon)

The mouse hover on each image/icon

TikiWiki Tips and Tricks

Saturday, July 30, 2011

Tip 9: Customize Facebook Share Button and Other Social Sharing (Part 2)

2 comments: