Page 1 of 2

Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Sun Dec 12, 2010 1:22 pm
by deactivated010521
----------

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Mon Dec 13, 2010 12:56 pm
by 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  :D

Groet, Rolf

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 14, 2011 12:01 pm
by 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

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 14, 2011 12:40 pm
by deactivated010521
----------

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 14, 2011 12:48 pm
by 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.

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 14, 2011 1:34 pm
by deactivated010521
----------

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 14, 2011 1:42 pm
by 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.

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 14, 2011 3:49 pm
by 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

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 21, 2011 10:53 am
by 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?

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 21, 2011 12:44 pm
by deactivated010521
----------

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 21, 2011 12:54 pm
by 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?

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 21, 2011 2:39 pm
by 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

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Fri Jan 21, 2011 2:45 pm
by deactivated010521
----------

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Tue Feb 08, 2011 8:50 am
by 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

Re: Socialbookmarks via de SocialBookmarker CMSMS plugin

Posted: Tue Feb 08, 2011 9:19 am
by deactivated010521
----------