• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 10 posts ] 
Author Message
 Post subject: Styling social media knoppen
PostPosted: Tue Oct 10, 2017 3:16 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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:
{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:
.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:
{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:
{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!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Tue Oct 10, 2017 4:54 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1227
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/


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Tue Oct 10, 2017 8:09 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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...


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Wed Oct 11, 2017 7:59 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1227
Ik vond nog een oude plugin die je misschien kunt ombouwen, uit de tijd dat Hyves nog bestond ;D

Code:
{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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Wed Oct 11, 2017 8:11 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Wed Oct 11, 2017 10:02 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1227
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Thu Oct 12, 2017 12:39 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Thu Oct 12, 2017 3:12 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1227
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Thu Oct 12, 2017 3:19 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Tue May 02, 2006 10:58 am
Posts: 222
Location: The Netherlands
Ben nu wel erg benieuwd geworden naar je starter_theme natuurlijk, gaaf dat je dat binnenkort een release gaat doen!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Styling social media knoppen
PostPosted: Thu Oct 12, 2017 5:27 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1227
Vorderingen zijn online te volgen: https://github.com/FrontEndStudio/cmsms_starter_theme


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 10 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting