Socialbookmarker CMSMS plugin

Enige tijd geleden heb ik een CMSMS plugin geschreven waarmee je eenvoudig socialbookmarks, socialmedia op je website kunt plaatsen. Hoewel er genoeg van dergelijke plugins bestaan vond ik de bestaande beperkt in de css mogelijkheden.

Wil je weten hoe je de SocialBookmarker plugin op je CMS Made Simple website kunt implementeren? Lees dan verder.

SocialBookmarker in de CMSMS Forge

De naam van mijn plugin is SocialBookmarker en is te downloaden via de CMSMS forge.

SocialBookmarker koppelt de opmaak (XHTML) en styling (CSS) volledig los van de code (PHP). Hiermee kan een websitedeveloper alle kanten op.

Voor nederlandse webmasters is deze plugin misschien interessant omdat deze naast: twitter, digg, delicious, stumbleupon, facebook, linkedin, myspace ook hyves en nujij ondersteunt.

Een implementatie voorbeeld

Stap 1: Download de SocialBookmarker plugin

• Ga naar: http://dev.cmsmadesimple.org/project/files/910
• Sla het .php bestand op (verander de naam niet): function.socialbookmarker.php

Stap 2: Plaats function.socialbookmarker.php in je plugins map

• Ga naar de root directory van je CMSMS installatie open het mapje "plugins" en plaats hier function.socialbookmarker.php

Stap 3: Het koppelen van de SocialBookmarker plugin aan een CMSMS template

• {socialbookmarker} kan je op iedere wille keurige pagina of template opnemen. Als voorbeeld neem ik de CGBlog detail template een News detail template of andere CMSMS pagina werkt ook.

Content -> Calguys Blog Module -> Detail template
.... of
Content -> News -> Detail template

{strip}
{capture assign=sourcetitle}{$entry->title|escape}{/capture}
{capture assign=sourceurl}{$entry->detail_url}{/capture} 
{socialbookmarker sourcetitle=$sourcetitle sourceurl=$sourceurl brands='twitter, facebook, digg, stumbleupon, delicious'}
{/strip}

<div>
<h3>Deel deze blog / Deel dit nieuwsbericht</h3>

{if $socialbookmarker|@count gt 0}
    <ul class="socialbookmarker">
    {foreach from=$socialbookmarker item=item}
        <li class="{$item->brand}"><a href="{$item->destinationurl}" title="{$item->brand|ucfirst}: {$item->sourcetitle|escape}">{$item->brand|ucfirst}</a></li>
    {/foreach}
     </ul> 
{/if}
</div>{* <!-- /socialbookmarker --> *}

Stap 4: CSS code schrijven en plaatjes maken

In onderstaande CSS voorbeeld maak ik gebruik van logo's voor de verschillende sociale media sites. Ik heb alle logo's in 1 plaatje geplaatst ieder logo is 40 pixels breed en 30 pixels hoog. Via css sprites toon ik het juiste logo.

/* socialbookmarker  */

.socialbookmarker {
    display: inline;
    float: left;
    height: 36px;    
}

ul.socialbookmarker {
    width: 224px;
    display: inline;
    float: left;
    list-style: none;
    overflow: hidden;
}

ul.socialbookmarker li {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 10px 0 0;
}

ul.socialbookmarker li a {
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-decoration: none;
}

ul.socialbookmarker li a:hover,
ul.socialbookmarker li a:focus,
ul.socialbookmarker li a:active {
	opacity: 0.5; 
	filter: alpha(opacity=50); 
	-ms-filter: "alpha(opacity=50)"; 
	-khtml-opacity: 0.5; 
	-moz-opacity: 0.5;
}

ul.socialbookmarker li.twitter a {
    background-image: url('/images/icons-twitter.gif');
    background-repeat: no-repeat;
    background-position: top left;    
    text-indent: -30000000px;
}

ul.socialbookmarker li.dig a {
    background-image: url('/images/icons-dig.gif');
    background-repeat: no-repeat;
    background-position: -40px top;   
    text-indent: -30000000px;
}

/* zelfde idee voor: delicious, stumbleupon, facebook, nujij, linkedin, myspace, hyves */

Documentatie

• SocialBookmarker documentatie

Video

Een demostratie van bovenstaande techniek kunt u aan de onderkant van deze pagina of in onderstaande video bekijken.