This is a post I am writing since weeks — in my head. Finally, I can share it with you.
In my magazine DONE, at the end of every article, you can share the article via twitter, Facebook or eMail or leave a comment. This is not an included feature in the Digital Publishing Suite yet. You need to stretch the DPS to integrate this feature on your own. This article will cover how to link to your facebook page or tweet about your app. If you want to make something like DONE does, you need to know a bit about HTML and even might set up your own website for it (details below).
Please note: These techniques require you to have a bit of understanding of HTML. It is simply complicated. I cannot provide any help doing that. I hope this article is written good enough to help you doing this. Try and repeat!
First you need to:
Understand the anatomy of a share
If you share something through social media like Facebook and twitter you need something to share to. In most cases you share a URL that can be accessed from everywhere. Even a simple “like” on Facebook is ultimatively about a unique ressource location (URL). You cannot deep link into a magazine right now. It is also impossible to open your magazine on your iPad while reading a tweet or Facebook status on your desktop. You need a common place that everybody can access and to where you can lead your followers to.
(click for bigger version)
In short: the share (tweet, mail, …) comming out of your magazine needs to point to a website on your server (or a Facebook fan page). On that website you decide what to show to the visitor (a screenshot, a short description of what is going on, …) and a link to the App Store where the reader can download the magazine to his iPad.
Following are different scenarios how to share what from your magazine. As a bonus I will tell you how to make comments possible.
Scenario Facebook/a: Like your Facebook fan page
You can simply but a button on your layout and link to your facebook page. The In-Folio Browser will show the full facebook page where the user can authenticate and then like your facebook page.
Tipp: you can also point to your twitter.com/username to let the reader follow you on twitter.
Scenario Twitter/a: Tweet about your magazine with a link to it’s website (or App Store URL)
Like the Facebook-Scenario before, design your own button in InDesign and construct a more complicated link:
put into one line. Make sure the &text is URL-friendly by encoding it first.
After authenticating to twitter, a tweet box will be pre-filled with a proposed tweet: The &text-Message will appear at the beginning, the &url will be shortened later and the &via-User may be yourself to be notified when someone tweets about your magazine.
Scenario eMail/a: Share your article text as eMail
Design your own eMail-Button in InDesign, convert into Button and put the “Go to URL”-action to it with this:
subject=This is something to share
&body=Put all the body content in here.
put into one line. Avoid special characters in subject or body, or encode first.
mailto:?subject=You’ve got HTML-Mail!&body=<div style=”width:600px;”><img src=”http://donemag.cc/images/38t.jpg” /><br /> <div style=”font-family:Arial, Helvetica, sans-serif; font-weight:100; font-size:12px;padding-bottom:0px;padding-top:16px;color:gray;”>Johannes Henseler</div><div style=”font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:18px; padding-top: 20px; padding-bottom: 20x;”>DONE magazine</div><div style=”font-family:Arial, Helvetica, sans-serif; font-weight:100; font-size:14px;padding-bottom:0px”>What you see is what you get. A HTML mail.<br /><br />Crazy.</div> </div>
All the following scenarios require you put buttons into your own HTML, wether it is located inside your folio or hosted on your own server.
Make sure to let enough room for facebook’s or twitter’s login screens.
Scenario Facebook/b: Use the Facebook-Like-Button with counter
For this you need to put a few lines of Facebook-Code into a local HTML file. Here is an empty HTML5 template to put the code into. Generate the Like-Button-Code on the Facebook Plugins Page.
Notice that you put your website URL or the URL or your Facebook fan page into the box. This later one will result in a like like
Scenario Twitter/b: Use a real twitter button with counter
The same can be done with a native tweet button. Generate the button code on the Twitter Buttons page.
One big caveat of twitter/b and Facebook/b
After the user authenticated to Facebook or twitter, he might end up with a blank or white page. This is an unexpected result of redirecting the user to the previous page and DPS not handling that very well. But if you come back to the article, you are already logged in and can start sharing right away.
Scenario eMail/b: Share massive ammount of text (like the whole article) via eMail
In your local HTML file, include a button and give that element the id=”emailbutton”. Paste the following code after the button. Note that this code is possible without jQuery and works perfect with the 1 file HTML5 framework.
<img src=”mailbutton.png” id=”emailbutton” /><script>
var mailtext = “This is the text appearing as in the message body \n\n If you write \n you will get a new line.\n\nThis message can be significant longer and even contain späcial charäçtörs. HTML emails are not possible.”;
window.location.href = “mailto:?subject=Look at this article!&body=”+encodeURI(mailtext);
Where the magic happens
If you set up a website that serves an article for every article in your magazine, a nice thing happens: The facebook and twitter buttons can be automatically pre-set with the article’s unique URL. Also, your server can stuff the mailtext-variable with the article’s comming from your CMS.
Take http://donemag.cc/articles/3-semester for example. My magazine’s website has an article for every article from the magazine with an excerpt and a screenshot. You can even manually flip through the magazine on the website.
This is how the page looks on the Desktop/iPad Safari Browser:
This will be the share hub for every post on twitter or Facebook. The Plugins and Buttons from Facebook and Twitter automatically manage to share the current’s website URL when clicking on them (if you use the appropriate plugins).
Now, look at http://donemag.cc/articles/3-semester?m=1. This is the “secret” URL only the magazine knows about. At the end of every article sits an ordinary web view calling the same URL for the article with addition of a “m=1” parameter. This tells my textpattern CMS to strip out all the fancy stuff and only show the share buttons and the comments.
This is handled by the template I designed for my donemag.cc-microsite. The share-buttons are forced to share the link without the m=1 parameter so everybody comming in from a Facebook post or tweet will land on the full page you see above.
This required me to set up a page for every article in my magazine. But it results in a pretty nice feature throughout the magazine.
You notice the comments on the screenshots above. These are handled by the Facebook comments plugin. Plugins like these use the site’s URL to identify wich comments are for what page. The comments are stored outside my server. It is pretty easy to set up.
Similar and popular systems are DISQUS and intensedebate. During testing I had problems setting up DISQUS to work properly with DPS and had good results with intensedebate. That might have changed now. Other than Facebook comments, the other two allow your visitors to anonymously comment.
If you want to test intensedebate inside your magazine, you can hop on my test comments stream on
Just put this into a Web Content frame and set it to autoplay. This is an easy and fast way to enable a community discussion about your content right inside your magazine (without all that complicated share thing and facebook authentication).
I hope I covered all. I know this can be really complicated and confusing. You clearly see the concepts of digital and print mix here. If you are familiar with HTML or server communication, this might be pretty easy to accomplish.
I really hope for more magazines taking advantage of the iPad’s connectivity and let the community connect over the content and stop beeing walled gardens.
Happy Sharing, everyone!