Socialbookmarks via de SocialBookmarker CMSMS plugin

[deactivated010521]

----------

[Rolf]

Ahh, cool Arnoud.
Ik was net bezig met het uitzoeken van de mogelijkheden hiermee voor mijn eigen website http://buispost.eu/nl/. Dit scheelt dus weer even wat werk 

Groet, Rolf

[Gregor]

Ha Arno,

Een tijdje aan het puzzelen geweest en heb het deels werkend, echter.... hij laat alleen twitter zien en facebook niet, terwijl die laatste wel als opsomming in Firebug te zien is. Het tweede is, dat de url die naar de social media wordt verstuurd niet compleet is. Bij pretty url mis ik een stukje. http://www.uisge-beatha.eu/logboek/224/ ... varen.html

De template:

Code: Select all

{strip}
{capture assign=sourcetitle}{$entry->title|escape}{/capture}
{capture assign=sourceurl}{root_url}/logboek/{$entry->id}/{/capture}
{socialbookmarker sourcetitle=$sourcetitle sourceurl=$sourceurl brands='twitter, facebook'}
{/strip}
    <div>
    <h5>Deel dit artikel</h5>

    {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 --> *}

De css, ik heb afzonderlijke png's, dus niet 1 zoals jij in jouw post aangaf:

Code: Select all

    /* socialbookmarker  */

    .socialbookmarker {
       display: inline-block;
       float: left;
       height: 20px;    
    }

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

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

    ul.socialbookmarker li a {
       display: block;
       width: 20px;
       height: 20px;
       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.png');
       background-repeat: no-repeat;
       background-position: top left;
       text-indent: -30000000px;
    }

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

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

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

Eigenlijk zou ik de linkjes naast elkaar willen, maar dat komt later wel.

Heb jij een idee waar het misgaat waardoor facebook niet wordt weergegeven?

Thnks, Gregor

[deactivated010521]

----------

[Gregor]

Kijk, die capture-wijziging werkt

Waarom het css het niet doet, is mij ook een raadsel; ik zie 'm in firebug wel maar niet op de site.

[deactivated010521]

----------

[Gregor]

De background-position er overal uitgehaald, twitter en facebook omgedraaid, lat ie wel facebook zien, maar twitter niet. terwijl als je met firebug kijkt, je wel een opomming ziet. Bizar. Hoe kan ik ze op een regel krijgen? Misschien dat dat helpt. Ik heb 'm overigens verplaatst naar onderaan het artikel.

[Gregor]

De plaatjes zijn zichtbaar en staan ook naast elkaar. Het lijkt erop alsof er enkele instellingen met elkaar conflicteren, nl.

Code: Select all

div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 3em;
}

en

Code: Select all

ul.socialbookmarker li {
       float: left;
       width: 18px;
       height: 18px;
    }

Pas ik de 3em aan, dan staan de social-png's netjes tegen elkaar, echter dan zijn alle opsommingen op de rest van de site een chaos. Zet ik die margin in de "ul.socialbookmarker li", dan heeft dat geen enkel effect. Heb je een suggestie hoe dat is op te lossen?

Grtz, Gregor

[wpbremer]

hoi Arnoud,

op W3C krijg ik bij controle van mijn CSS foutmeldingen betreffende de opacity.

Dit zijn de foutmeldingen:
URI : http://marcverhaegenfansite.com/tmp/cac ... 606873.css
1431 ul.socialbookmarker li a:hover, ul.socialbookmarker li a:focus, ul.socialbookmarker li a:active Eigenschap opacity bestaat niet in CSS versie 2.1 maar wel in : 0.5 0.5
1432 ul.socialbookmarker li a:hover, ul.socialbookmarker li a:focus, ul.socialbookmarker li a:active Parse Error opacity=50)
1433 ul.socialbookmarker li a:hover, ul.socialbookmarker li a:focus, ul.socialbookmarker li a:active Eigenschap -ms-filter bestaat niet : "alpha(opacity=50)" "alpha(opacity=50)"
1434 ul.socialbookmarker li a:hover, ul.socialbookmarker li a:focus, ul.socialbookmarker li a:active Eigenschap -khtml-opacity bestaat niet : 0.5 0.5
1435 ul.socialbookmarker li a:hover, ul.socialbookmarker li a:focus, ul.socialbookmarker li a:active Eigenschap -moz-opacity bestaat niet : 0.5 0.5

Zijn deze op te lossen?

[deactivated010521]

----------

[wpbremer]

Oke bedankt voor je reactie Arnoud,

ik zal er eens naar kijken, ik heb mijn css ook nog even gevalideerd op CSS 3, maar dat lever ook fouten op in de opacity.

Deze fouten leveren geen problemen op voor de werking van de site, toch?

[Gregor]

Via wat css-ondersteuning kwam ik tot het volgend werkend css waarmee ik de afstand tussen de img's ook kan instellen:

Code: Select all

.socialbookmarker {
    padding-bottom: 5px;
    padding-right: 10px;
    padding-top: 2px;
    
}
div#main ul.socialbookmarker li {
   padding-bottom: 5px;
   height: 18px;
   width: 18px;
   margin: 0 0 0 0em;
   padding-top: 0;
}

ul.socialbookmarker {
width : 170px;
height : 0;
display : inline-block;
clear : none;
list-style-type : none;
   padding-left: 0;
}
ul.socialbookmarker li {
float : left;
width : 16px;
height : 16px;
   padding-right: 5px;
}
ul.socialbookmarker li a {
display : inline;
float : left;
width : 18px;
height : 18px;
overflow : hidden;
text-decoration : none;
}
ul.socialbookmarker li.twitter a {
background-image : url('/images/icons-twitter.png');
background-repeat : no-repeat;
text-indent : -30000000px;
}
ul.socialbookmarker li.facebook a {
background-image : url('/images/icons-facebook.png');
background-repeat : no-repeat;
text-indent : -30000000px;
}
ul.socialbookmarker li.linkedin a {
background-image : url('/images/icons-linkedin.png');
background-repeat : no-repeat;
text-indent : -30000000px;
}

In de template ziet het er dan als volgt uit:

Code: Select all

{strip}
{capture assign=sourcetitle}{$entry->title|escape}{/capture}
{* capture assign=sourceurl}{root_url}/logboek/{$entry->id}/{/capture *}
{capture assign=sourceurl}{root_url}/{$smarty.get.page}{/capture}
{socialbookmarker sourcetitle=$sourcetitle sourceurl=$sourceurl brands='facebook, twitter, linkedin'}
{/strip}

    <div>
    <h5>Deel dit artikel</h5>

    {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 *}

Gregor

[deactivated010521]

----------

[wpbremer]

Ik werk nu al een tijdje met deze plugin en het werkt geweldig, ik vroeg me alleen 1 ding af.

Wanneer ik een cataloger-item doorlink naar Facebook dan neemt Facebook altijd de meta-description mee als tekst voor het artikel. Hierbij zou ik graag zien dat Facebook de omschrijving van het item mee neemt.
Is dit mogelijk?

Alvast bedankt
Wiebren

[deactivated010521]

----------