Blog posts by Stian Grepstad2010-09-14T22:27:00.0000000Z/blogs/Stian-Grepstad/Optimizely WorldHow to post to Twitter and Facebook from edit mode in EPiServer – SocialPing./blogs/Stian-Grepstad/Dates/2010/9/How-to-post-to-Twitter-and-Facebook-from-edit-mode-in-EPiServer--SocialPing/2010-09-14T22:27:00.0000000Z<p align="justify"><strong>SocialPing is a project that enable posting directly from EPiServer to ALL your social networks like Twitter, Facebook and LinkedIn in one go.</strong></p> <p align="justify"><strong></strong></p> <p align="justify">I have experienced that more and more customers is asking for ways to <strong>integrate their social media networks to their CMS solutions</strong>. After some research I found a lot of blog entries on how to build your own Twitter Workflow, how to build a gadget for reading updates from Facebook and Twitter but I couldn't find a way to publish to ALL my social networks. This was my motivation when I started working on a project that allows you to <strong>publish messages to all your social networks directly from EPiServer. </strong>The list currently contains 36 different networks – including Twitter, Facebook and LinkedIn.</p> <p>SocialPing (which is included as a reference in your EPiServer project) uses services from <a href="http://www.ping.fm">Ping.fm</a> to update your status on your social media networks. Ping.fm provides several ways to update your status. This project uses the email service to do the update.</p> <p> </p> <p>You can download the source code for the project here:</p> <p><a href="https://www.coderesort.com/p/epicode/wiki/SocialPing">SocialPing page on EPiCode</a>.</p> <p> </p> <h2>Configuration: </h2> <p><strong>1. Create your account on </strong><a href="http://www.ping.fm"><strong>Ping.fm</strong></a></p> <p>After signing up, you have to assign the different social networks you want to hook your Ping.fm account to. The list contains 36 different social networks to choose from (Twitter, Facebook, LinkedIn, MySpace etc).</p> <p><a href="/link/918aa2ba003646bb91cce1f3e3ff16a8.png"><img style="border-right-width: 0px; margin: 5px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/9edda8e1e6ca4c33937903611c016972.png" width="642" height="274" /></a> </p> <p><strong></strong></p> <p><strong>2. Grab your private Ping.fm email address</strong></p> <p>After assigning different networks you have to grab <b>your private Ping.fm email address</b>. This email address is found under “Services/Tools” on the dashboard. You are going to use this email address in step 5 in this tutorial.</p> <p><a href="/link/fe6401250c914f0ea736a2887e4058e2.png"><img style="border-right-width: 0px; margin: 5px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/0dca1b12c72f4b21806fec4b176b596e.png" width="642" height="297" /></a> </p> <p><strong></strong></p> <p><strong></strong></p> <p><strong></strong></p> <p><strong></strong></p> <p><strong></strong></p> <p><strong></strong></p> <p><strong>3. Add a new property in admin mode</strong></p> <p>Now we have to define what to publish to the social networks when publish pages. We create a new property “PublishSocialMediaString” (string) to page type “News item”. Add this property to all page types you want to publish to your networks. I recommend to create a new tab for this property – just to separate this from the page content.</p> <p><a href="/link/a9087f63d3cf4425ae495956699f53ad.png"><img style="border-right-width: 0px; margin: 5px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/dc9e40edb33a4d27a306da06f6a03eae.png" width="641" height="482" /></a> </p> <p>  </p> <p><strong>4. Copy folder “SocialPing” to the root of your EPiServer project</strong></p> <p>The folder contains two files: “settings.config” and “log.txt”.</p> <p>The project is available for download <a href="https://www.coderesort.com/p/epicode/wiki/SocialPing">here</a>.</p> <p> </p> <p> <strong>5. Modify “settings.config”</strong></p> <p>Modify mail server settings and property name you created in step 3.</p> <p> </p> <table border="0" cellspacing="0" cellpadding="2" width="400"><tbody> <tr> <td valign="top" width="123"><strong>Attribute</strong></td> <td valign="top" width="277"><strong>Description</strong></td> </tr> <tr> <td valign="top" width="123">server</td> <td valign="top" width="277"> <p>Mail server. Example: “smtp.gmail.com”</p> </td> </tr> <tr> <td valign="top" width="123">port</td> <td valign="top" width="277"> <p>Mail server port. Example: “25”</p> </td> </tr> <tr> <td valign="top" width="123">username</td> <td valign="top" width="277"> <p>Mail server username. </p> <p>Example: “username@gmail.com”</p> </td> </tr> <tr> <td valign="top" width="123">password</td> <td valign="top" width="277"> <p>Mail server password</p> </td> </tr> <tr> <td valign="top" width="123">toaddress</td> <td valign="top" width="277"> <p>Recipient email address. Insert you Ping.fm private email address here (step 2). Example: “xxxxx@ping.fm”</p> </td> </tr> <tr> <td valign="top" width="123">fromaddress</td> <td valign="top" width="277"> <p>Your email address. Usually the same as “username@gmail.com”</p> </td> </tr> <tr> <td valign="top" width="123">propertytopublish</td> <td valign="top" width="277"> <p>Name of the property created in step 3. The value of this property is the status posted to networks. </p> <p>“PublishSocialMediaString” is used in this example.</p> </td> </tr> <tr> <td valign="top" width="123">logexceptions</td> <td valign="top" width="277"> <p>True or false. Writes exceptions to log.txt if set to true.</p> </td> </tr> </tbody></table> <p> </p> <p><b>Config.settings should look like this:</b></p> <div class="csharpcode"> <pre class="language-csharp"><code><span class="kwrd"><?</span><span class="html">xml</span> <span class="attr">version</span><span class="kwrd">="1.0"</span> <span class="attr">encoding</span><span class="kwrd">="utf-8"</span> ?<span class="kwrd">></span></code></pre>
<pre class="language-csharp"><code><span class="kwrd"><</span><span class="html">settings</span><span class="kwrd">></span></code></pre>
<pre class="language-csharp"><code> <span class="kwrd"><</span><span class="html">socialping</span> </code></pre>
<pre class="language-csharp"><code> <span class="attr">server</span><span class="kwrd">="smtp.google.com"</span> </code></pre>
<pre class="language-csharp"><code> <span class="attr">port</span><span class="kwrd">="25"</span> </code></pre>
<pre class="language-csharp"><code> <span class="attr">username</span><span class="kwrd">="myusername"</span> </code></pre>
<pre class="language-csharp"><code> <span class="attr">password</span><span class="kwrd">="mypassword"</span> </code></pre>
<pre class="language-csharp"><code> <span class="attr">toaddress</span><span class="kwrd">="xxxxxx@ping.fm"</span> </code></pre>
<pre class="language-csharp"><code> <span class="attr">fromaddress</span><span class="kwrd">="myusername@mailserver.com"</span></code></pre>
<pre class="language-csharp"><code> <span class="attr">propertytopublish</span><span class="kwrd">="PublishSocialMediaString"</span></code></pre>
<pre class="language-csharp"><code> <span class="attr">logexceptions</span><span class="kwrd">="true"</span> <span class="kwrd">/></span></code></pre>
<pre class="language-csharp"><code><span class="kwrd"></</span><span class="html">settings</span><span class="kwrd">></span></code></pre>
</div>
<style type="text/css"><![CDATA[
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }]]></style>
<div class="csharpcode"><font face="Arial"></font></div>
<p> </p>
<p> <strong>6. Change Web.config (optional)</strong></p>
<p>Change delivery method for SMTP to network and not IIS:</p>
<div class="csharpcode">
<pre class="language-csharp"><code><span class="kwrd"><</span><span class="html">mailSettings</span><span class="kwrd">></span></code></pre>
<pre class="language-csharp"><code> <span class="kwrd"><</span><span class="html">smtp</span> <span class="attr">deliveryMethod</span><span class="kwrd">="Network"</span> <span class="kwrd">/></span></code></pre>
<pre class="language-csharp"><code><span class="kwrd"></</span><span class="html">mailSettings</span><span class="kwrd">></span></code></pre>
</div>
<style type="text/css"><![CDATA[
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }]]></style>
<p> </p>
<p> </p>
<p><strong>7. Add reference to “SocialPing.dll” in your EPiServer project.</strong></p>
<p><strong></strong></p>
<p> </p>
<p><strong></strong></p>
<p><strong></strong></p>
<p><strong><strike>8. Modify Global file in your EPiServer project</strike></strong></p>
<p><strike>Now we have to attach a new PageEventHandler in Global.asax.cs. In this example we call method PostMessage when a page is published:</strike></p>
<p><strike> </strike></p>
<div class="csharpcode">
<pre class="language-csharp"><code><strike><span class="kwrd">using</span> System.Web.Mail;</strike></code></pre>
<pre class="language-csharp"><code><strike><span class="kwrd">using</span> SocialPing;</strike></code></pre>
<pre class="language-csharp"><code><strike> </strike></code></pre>
<pre class="language-csharp"><code><strike><span class="kwrd">protected</span> <span class="kwrd">void</span> Application_Start(Object sender, EventArgs e){</strike></code></pre>
<pre class="language-csharp"><code><strike> DataFactory.Instance.PublishedPage += <span class="kwrd">new</span> PageEventHandler(Instance_PublishedPage);</strike></code></pre>
<pre class="language-csharp"><code><strike>}</strike></code></pre>
<pre class="language-csharp"><code><strike> </strike></code></pre>
<pre class="language-csharp"><code><strike><span class="kwrd">static</span> <span class="kwrd">void</span> Instance_PublishedPage(<span class="kwrd">object</span> sender, PageEventArgs e){</strike></code></pre>
<pre class="language-csharp"><code><strike> StatusMessage statusMsg = <span class="kwrd">new</span> StatusMessage();</strike></code></pre>
<pre class="language-csharp"><code><strike> statusMsg.PostMessage(e.Page);</strike></code></pre>
<pre class="language-csharp"><code><strike>}</strike></code></pre>
</div>
<style type="text/css"><![CDATA[
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }]]></style>
<p><strong>(The project is now using EPiServers initialization system to do this process auto-magically. No need to change global.asax)</strong></p>
<p> </p>
<p><strong>Finished!</strong></p>
<p>We’re now able to publish directly from EPiServer. Just to demonstrate we create a new page (News item), set a value for “PublishSocialMediaString” and click “Save and Publish”.</p>
<p><a href="/link/f686873b201e45f9b951f425cbe28261.png"><img style="border-right-width: 0px; margin: 5px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/5c4a36c389d24dcab56f4cc08be175c4.png" width="642" height="395" /></a> </p>
<p><strong></strong></p>
<p><strong></strong></p>
<p><strong>And that’s it – your status is updated!</strong></p>
<p>A short URL to your page is created and appended on the status message:</p>
<p> </p>
<p><strong>Twitter:</strong></p>
<p><a href="/link/dca6ed3c188a403ba2661f23089888da.png"><img style="border-right-width: 0px; margin: 5px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/2f27a236bd834638ae4c1c97d6e7ab71.png" width="502" height="331" /></a> </p>
<p> </p>
<p><strong>Facebook:</strong></p>
<p><a href="/link/ffde919f1f954e9fbdb7949c271933ef.png"><img style="border-right-width: 0px; margin: 5px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/dfef30f47c5641929405e74fb0fd1b2b.png" width="502" height="232" /></a> </p>
<p> </p>
<p><strong>LinkedIn:</strong></p>
<p><a href="/link/af52998be3ea4c16a149790bf663d35b.png"><img style="border-right-width: 0px; margin: 5px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/98bed3adcf404ecdbc3d18ede4eae9a1.png" width="502" height="172" /></a> </p>
<p> </p>
<h2>About Ping.fm</h2>
<p><a href="http://ping.fm">Ping.fm</a> is a free service which makes you update all your social networks in one go. Ping.fm offers a variety of ways to integrate and post to social networks. This article describes how to use ping.fm to update status messages using ping.fm’s mail service. SocialPing is a class library which includes methods for sending status messages to ping.fm. Ping.fm forwards the message to your social networks.</p>
<p> </p>
<h2>Known limitations and further enhances</h2>
<p>- <strong>The project relies on Ping.fm</strong> and assumes that their services is up and running.</p>
<p>- Your status is <strong>updated every time you publish a page</strong>. So if you publish a page ten times, you will have ten status updates in your twitter account. This should be handled by the plug-in. Now you have to leave the text field blank if you don't want to publish. You should be able to check (with a status field) if the current page is already posted to Ping.fm.</p>
<p><strong>- No character limitations</strong>. It doesn’t check number of characters before sending to Ping. The status messages should be limited to 140 characters (Twitter) including URL. A character counter should be visible in edit mode.</p>
<p>- <strong>No status message is displayed</strong>. The editor don’t know if the message was sent and updated in social networks.</p>
<p>- Current version uses txt-file for logging. <strong>Log4net should be used</strong> for logging.</p>
<p>- Next version should include methods for retrieving your last status messages by using <strong>API calls to Ping.fm</strong>. </p>
<p>- It should be possible to <strong>choose which network</strong> you want to post to. This version is posting to all networks registered with your Ping.fm account.</p>
<p>- It should be possible to <strong>turn on and off posting</strong> with config file.</p>
<p>- The plan is to create a epimodule for easier installation and setup.</p>
<p> </p>
<h2>Wiki</h2>
<p>Read more about the project and download the source code on <a href="https://www.coderesort.com/p/epicode/wiki/SocialPing">epicode</a>.</p>
<p> </p>
<h2>Requirements</h2>
<p>Runtime: EPiServer CMS 6, .NET 3.5</p>
<p>If you want to change and compile the source code: Visual Studio 2008 SP1.</p>
<p>  </p>
<h2></h2>
<h2>Feedback</h2>
<p>Your feedback is appreciated for further development of the project.</p>
<p>Feel free to contact me: stian.grepstad /at/ makingwaves.no </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://labs.episerver.com/en/Blogs/Ted-Nyberg/Dates/2009/2/Adding-a-custom-plugin-button-to-unpublish-a-page-in-EPiServer/"></a></p>