Styling social media knoppen

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Styling social media knoppen

Post by Gregor »

Wederom een styling vraag. Verschillende dingen geprobeerd om de social media knoppen, in eerste instantie pinterest en twitter, op https://www.uisge-beatha.eu/2017/09/Inwatering-mast (onderaan en links) te stylen, maar dat lijkt niet te lukken. De knoppen worden vanuit een template SocialMediaShare aangeroepen met daarin:

Code: Select all

{include file='cms_template:GoogleTranslate'}
<h4>Deel deze pagina</h4>
<div class="social_share">
  {include file='cms_template:shareFacebook'}
  <div class='btn_twitter'>
     {include file='cms_template:shareTwitter'}
  </div>
  {include file='cms_template:shareGooglePlus'}
  <div class="btn_pinterest">
     {include file='cms_template:sharePinterest'}
  </div>
</div>
In de stylesheet staat:

Code: Select all

.social_share {
    line-height: 10px;  [[* align the social buttons *]]
    margin-bottom: 10px;
}

.social_share > div {
   display: inline;
}

.social_share .btn_twitter {
   margin-top: 5px;
}

.social_share .btn_pinterest {
   float: left;
   margin-top: 0.1em;
   margin-right: 4px;
}
Nu lukt het min of meer om de pinterest knop te plaatsen, maar niet achteraan in het rijtje. Haal ik float: left; weg, dan komt ie op de volgende regel te staan, er strak onder. De twitter-knop krijg ik helemaal niet van zijn plaats.

Pinterest knop wordt aangeroepen met {include file='cms_template:sharePinterest'} en daarin staat:

Code: Select all

{if !(isset($canonical))}
  {$canonical = {$content_obj->GetURL()}}
{/if}
{if !(isset($page_description))}
  {$page_description = {$capturedcontent|strip_tags|strip|truncate:150}}
{/if}
{if !(isset($page_image))}
  {$page_image = "{uploads_url}/_template/Main_Image_Uisge-Beatha.jpg}"}
{/if}
<a href="https://www.pinterest.com/pin/create/button/">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" alt="{$page_description}"/>
    data-pin-do="buttonBookmark"
    data-pin-custom="true"
    data-pin-description="{$page_description}"
    data-pin-url="{$canonical}"
    data-pin-media="{$page_image}"
</a>
Voor twitter geldt {include file='cms_template:shareTwitter'} met daarin:

Code: Select all

{if !(isset($canonical))}
  {$canonical = {$content_obj->GetURL()}}
{/if}
{if !(isset($page_description))}
  {$page_description = {$capturedcontent|strip_tags|strip}}
{/if}
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="{$page_description|truncate:95}" data-url="{$canonical}" data-counturl="{$canonical}" data-via="xxxxx" data-hashtags="uisgebeatha">Tweet</a>
Iemand een idee hoe ik e.e.a. kan stylen?

Alvast dank!
deactivated010521

Re: Styling social media knoppen

Post by deactivated010521 »

Het probleem met die "officiele" socialmedia buttons is dat ze een hoop code genereren waar je geen invloed over hebt.

Door de debugger/inspector te openen zie ik dat er een aantal in een iframe staan en sommige gebruiken inline stylesheets. Dan kan je met CSS klooien wat je wilt maar je zult nauwelijks veranderingen waarnemen.

Je zult een en ander moeten vereenvoudigen in de opmaak. Een bullet list met icoontjes oid?

Psst "flexbox" is tegenwoordig de aangewezen methode om een en ander uit te lijnen.

Browser support is prima: https://caniuse.com/#search=flexbox
Testje van mijn hand: https://jsfiddle.net/ob6nejnm/
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Styling social media knoppen

Post by Gregor »

Dank je Arnoud.

Ik had die iframes ook zien staan en vermoedde al dat het daarmee ingewikkeld wordt en er vele uren zonder wenselijk resultaat zijn. Leuk zo'n hobby :)

Bij het googlen zag ik meerdere oplossingen die uitgaan van een bullet list. Wat ik nog niet ben tegengekomen hoe je dan kan zorgen dat de data vanaf de pagina waarop de bezoeker een button klikt, die ook wordt doorgegeven. Jij een suggestie?

Flexbox was ik niet mee bekend. Mooi voorbeeld als tegenhanger voor de bullet list, maar zal vast veel meer mee kunnen. Eerst ei leggen hoe met die buttons om te gaan...
deactivated010521

Re: Styling social media knoppen

Post by deactivated010521 »

Ik vond nog een oude plugin die je misschien kunt ombouwen, uit de tijd dat Hyves nog bestond ;D

Code: Select all

{socialbookmarker sourcetitle=$sourcetitle sourceurl=$sourceurl brands='
twitter, digg, delicious, stumbleupon, facebook, nujij, linkedin, myspace, hyves, google'}

Source code heb ik hier gepost: https://gist.github.com/FrontEndStudio/ ... 727d6a9c29
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Styling social media knoppen

Post by Gregor »

Hyves ;D

Ik heb ondertussen wel html buttons gevonden i.c.m. fontawsome. Moet nog verder zoeken hoe de aantallen likes en tweets etc. getoond kunnen worden zonder dat daar weer allerlei iframes geladen gaan worden.
deactivated010521

Re: Styling social media knoppen

Post by deactivated010521 »

Ja, er zijn wel (JavaScript) libaries die ook het aantal likes kunnen weergeven, dit was de eerste die ik vond er zullen er vast meer zijn:

https://github.com/sapegin/social-likes

Heb zo'n (JavaScript)libary nog nooit gebruikt.

Er is al veel geschreven over wel/niet socialemedia buttons gebruiken. Als ik voor projecten inzet is dat op een minimalistische wijze, zonder counter. Bij voorkeur laat ik ze helemaal weg, de meeste mensen weten wel hoe ze iets kunnen delen op sociale media.

Voor mijn starter_theme (nog niet ge-released / side project) heb ik de oude plugin, zoals hierboven vermeld, wat aangepast. Deze functionaliteit is opt-in:

https://github.com/FrontEndStudio/cmsms ... llinks.php

Lees hier, (kopje: "How can I use the User Defined Tags (UDT) your providing?"):

https://github.com/FrontEndStudio/cmsms ... /README.md
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Styling social media knoppen

Post by Gregor »

Met de info uit je eerdere post Arnoud, lijkt het gelukt om de icoontjes uit te lijnen.

Mooi project waar je mee bezig bent. Benieuwd hoe dat eruit komt te zien. In je tweet UDT die je eerder hebt beschreven en die ik lang heb gebruikt, zat een url-shortner. Gaat die ook terug komen?
deactivated010521

Re: Styling social media knoppen

Post by deactivated010521 »

De Twitter API is een paar jaar geleden zodanig aangepast dat het niet meer mogelijk is om direct een post te doen op Twitter. Er moet eerst een verificatiestap (oAuth) gedaan worden voordat er gepost kan worden. Zo'n verificatiestap kan veel beter in een module ondergebracht worden.

Nee, een Twitter UDT heeft voor mij niet zo'n hoge prioriteit. Ook omdat ik een oplossing gevonden heb via IFTT en een RSS feed.

Bedoel je met url-shortner iets van bit.ly ? Ik meen dat CGSocialBlaster hier een oplossing voor heeft.

Mijn starter theme richt zich trouwens meer op developers maar cherry picken kan natuurlijk altijd.

Qua CSS heb ik het inmiddels voor elkaar dat nagenoeg iedere CSS framework (Zurb, Bootstrap, GetUI, Material Design) of eigen code snel toegevoegd kan worden. (install, add, compile). Wat dan overblijft is het aanpassen van de templates, is ga een setje met veel voorkomende layouts toevoegen als voorbeeld.

Voor links naar Twitter/Facebook is het aardig om een afbeelding uit bijvoorbeeld News of CGBlog toe te voegen. Zo'n afbeelding is toe te voegen als custom field maar in mijn framework doe ik het iets anders. Uit de content van bijvoorbeeld een Summary- of Contentveld filter ik de eerste afbeelding en de width, height en url verschijnt in de header van de template als metadata (og:image, twitter:image).

Op het ogenblik ben ik vooral bezig met het automatiseren en moderniseren van Javascript -> ES6 al stabiel sinds juni 2015. Als ik dit goed voor elkaar heb gaat er een eerste release komen.
tristan
Dev Team Member
Dev Team Member
Posts: 374
Joined: Tue May 02, 2006 10:58 am
Location: The Netherlands

Re: Styling social media knoppen

Post by tristan »

Ben nu wel erg benieuwd geworden naar je starter_theme natuurlijk, gaaf dat je dat binnenkort een release gaat doen!
deactivated010521

Re: Styling social media knoppen

Post by deactivated010521 »

Post Reply

Return to “Dutch - Nederlands”