How can I integrate mobiki with social media?
Integration with social media means in this case to provide the correct <meta> tags in the template file and fill it with the right content for to be used with the corresponding social networks.
Let's start with twitter. When an URL from your mobiki website is beeing referenced in a twitter post, it can be represented as a "Twitter Card". This is just a more fancy representation of the link to your site, which is made from the page title, the description, your twitter name and optionally an image, which can not be provided on a per-page base, but with one image for every page in your mobiki website.
Just copy these lines to your template.html file and change @your_twitter_username accordingly.
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@your_twitter_username" />
<meta name="twitter:title" content="{ PAGE_TITLE }" />
<meta name="twitter:description" content="{ DESCRIPTION }" />
and optionally the image, which must be provided by you in the images folder and explicitely referenced in the corresponding <meta> tag:
<meta name="twitter:image" content="http://{ HOST }/images/your_twitter_image.jpg" />
'''(cut out the spaces from the tags in this example)'''
Google+
For Google's own social network you can do the following:
<link rel=”author” href=”https://plus.google.com/[YOUR G+ PROFILE]”/>
The rest of your page already is enriched with meta-information from schema.org which is also understood by google. So there is not much left to do.
Facebook uses open graph meta information to let your link show up in a nicer form in your Facebook timeline. You don't need to add these <meta> tags to your template.html, because this will be already part of mobiki's (next) release:
<meta property=”og:title” content=”{ PAGE_TITLE }”/>
<meta property=”og:type” content=”article”/>
<meta property=”og:url” content=”{ PAGE_URL }”/>
<meta property=”og:description” content=”{ DESCRIPTION }”/>
As an option you can add an image: A square image will get the best representation on facebook.
<meta property=”og:image” content=”http://{ HOST }/images/your_image.jpg”/>