cy-man.de | the blog project

In this article i will show you how you add social networks buttons (e.g. Twitter, Google+) for sharing content out of your Flatpress Blog without using Javascript, Flatpress Plugins or iframe-tags. But you can use this way for any other website or blog.

This solution gives you these four great advantages:

• tremendous level of privacy - no data is being sent to social networks on load
• faster load of pages - no need for external scripts in the html head section
• the possibility to layout the buttons the way you want with your own css
• the unique ability to spread content in social networks on Ghostery, AdBlock and NoScript active browsers

the solution
The static button way and it’s integration is very easy, which is how it should be. Here is the code i am using for my own Flatpress blog:

<a href="http://www.xing.com/app/user?op=share;url={$id|link:post_link} target="_blank" title="Xing"><img src="/fp-content/images/Social/xing-16x16.png" alt="xing" title="xing">Xing</a> 

<a href="https://flattr.com/submit/auto?user_id=%YOUR_ID%&url={$id|link:post_link}&title={$subject}&category=text&language=de_DE" target="_blank" title="flattr"><img src="/fp-content/images/Social/flattr-16x16.png" alt="flattr" title="flattr">Flattr</a> 

<a href="http://del.icio.us/post?url={$id|link:post_link}&title={$subject}" target="_blank" title="Delicious"><img src="/fp-content/images/Social/delicious-16x16.png" alt="Delicious" title="Delicious">Delicious</a> 

<a href="https://twitter.com/intent/tweet?source=webclient&text={$subject}&via=%YOUR_ID%&url={$id|link:post_link}&hashtags={foreach from=$categories_names item=catname}{$catname},{/foreach}" target="_blank" title="Twitter"><img src="/fp-content/images/Social/twitter-16x16.png" alt="Twitter" title="Twitter">Twitter</a> 

<a href="https://plusone.google.com/_/+1/confirm?hl=de&url={$id|link:post_link}&title={$subject}" target="_blank" title="Google+"><img src="/fp-content/images/Social/google+-16x16.png" alt="Google+" title="Google+">Google+</a> 

<a href="https://www.facebook.com/sharer/sharer.php?u={$id|link:post_link}&t={$subject}" target="_blank" title="Facebook"><img src="/fp-content/images/Social/facebook-16x16.png" alt="Facebook" title="Facebook">Facebook</a>

Confused? Let’s tear this apart …

%YOUR_ID% - your unique id in a particular social network
{$subject} - a flatpress variable which represents the title of an entry
{$id|link:post_link} - another flatpress variable which represents the url of an entry

If you are not using Flatpress you have to set the url and subject referring to them which are used in your blog or website. if you got an static website you have to add url and subject manually on each page - but if so then the time has come to switch to Flatpress.

You can also add some css into the a-tag for a cleaner look (e.g. style=”text-decoration:none”) or non-breaking space tag for a forced blank - to make slightly more room between image and text.

I use the social media icons from Paul Robert Lloyd which are licensed under the Attribution-Share Alike 2.0 UK: England & Wales License. So they are free also for commercial usage - for more information please see the linked License.

the integration
Just put the lines you wish to add in your entry-default.tpl file which is located under

/fp-interface/themes/%yourtheme%/

For a better Twitter hashtag handling please install the “categories names”-Plugin from Piero (thanks for this!). And after a few clicks your entry-default.tpl might look like this:

<div id="{$id}" class="entry {$date|date_format:"y-%Y m-%m d-%d"}">
 <h3><a href="{$id|link:post_link}">{$subject|tag:the_title}</a></h3>
 <span class="date">{$date|date_format:"%d"}.{$date|date_format:"%m"}.{$date|date_format:"%Y"}</span>
 {include file=shared:entryadminctrls.tpl}
 <br> <br>
 <div align="justify">{$content|tag:the_content}</div>
  <div align="right">
   <div align="right" style="width:350px;">
    <ul class="info">
    <li >{$categories|@filed}</li>
    {if !(in_array(\'commslock\', $categories) && !$comments)}
    <li align="right"><a href="{$id|link:comments_link}#comments">{$comments|tag:comments_number} {if isset($views)}(<strong>{$views}</strong> views){/if}</a></li>
    {/if}
    <li>
    <a href="http://www.xing.com/app/user?op=share;url={$id|link:post_link} target="_blank" title="Xing"><img src="/fp-content/images/Social/xing-16x16.png" alt="xing" title="xing">Xing</a> 
    <a href="https://flattr.com/submit/auto?user_id=%YOUR_ID%&url={$id|link:post_link}&title={$subject}&category=text&language=de_DE" target="_blank" title="flattr"><img src="/fp-content/images/Social/flattr-16x16.png" alt="flattr" title="flattr">Flattr</a> 
    <a href="https://twitter.com/intent/tweet?source=webclient&text={$subject}&via=%YOUR_ID%&url={$id|link:post_link}&hashtags={foreach from=$categories_names item=catname}{$catname},{/foreach}" target="_blank" title="Twitter"><img src="/fp-content/images/Social/twitter-16x16.png" alt="Twitter" title="Twitter">Twitter</a> 
    <a href="https://plusone.google.com/_/+1/confirm?hl=de&url={$id|link:post_link}&title={$subject}" target="_blank" title="Google+"><img src="/fp-content/images/Social/google+-16x16.png" alt="Google+" title="Google+">Google+</a> 
    <a href="https://www.facebook.com/sharer/sharer.php?u={$id|link:post_link}&t={$subject}" target="_blank" title="Facebook"><img src="/fp-content/images/Social/facebook-16x16.png" alt="Facebook" title="Facebook">Facebook</a>
    </li>
   </ul>
  </div>
 </div>
</div>

In my case is use this little piece of css for a better look:

style="text-decoration:none;vertical-align:top;"

the result
… and the bottom of your new blog entries might look like this:

If you have any further questions please feel free to contact me or leave a comment.