{"id":6767,"date":"2014-03-25T05:55:43","date_gmt":"2014-03-25T12:55:43","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=6767"},"modified":"2023-06-05T16:51:19","modified_gmt":"2023-06-05T14:51:19","slug":"4-simple-steps-add-twitter-feed-gadget-intranet-homepage","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/4-simple-steps-add-twitter-feed-gadget-intranet-homepage\/","title":{"rendered":"4 Simple Steps to Add a Twitter Feed Gadget to Your Intranet Homepage"},"content":{"rendered":"<p>eXo Platform 4 provides many features for building rich websites out of the box. But you can also use the platform&#8217;s web-based IDE to build custom plug-ins or gadgets that add an almost limitless number of capabilities. We wrote a simple gadget that displays a Twitter feed of all the recent company-related tweets, which is an easy way to display fresh content on a site&#8217;s homepage. This tutorial will guide you through the process of creating the Twitter gadget and adding it to a website page.<\/p>\n<p>To be able to complete this how-to, you will need <a href=\"https:\/\/community.exoplatform.com\/downloads\" target=\"_blank\" rel=\"noopener\" class=\"broken_link\">eXo Platform Enterprise Edition 4.0<\/a> up and running.<\/p>\n<p><!--more--><\/p>\n<h2>Step 1: Generating the Twitter Widget<\/h2>\n<p>To integrate the standard Twitter gadget, first go to the <a href=\"https:\/\/twitter.com\/settings\/widgets\" target=\"_blank\" rel=\"noopener\">Twitter widget page<\/a>. Click \u201cCreate new\u201d to create a new widget.<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-6772\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget.png\" alt=\"01-create-new-widget\" width=\"532\" height=\"133\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget.png 532w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget-300x75.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget-500x125.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget-360x90.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget-200x50.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget-100x25.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/01-create-new-widget-70x18.png 70w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><\/a><\/p>\n<p>Switch to the Search tab and fill in the search query for the type of feed you want to display (in our case, we want to display any tweets from our company account or our CEO, so we entered <a href=\"https:\/\/twitter.com\/eXoPlatform\" target=\"_blank\" rel=\"noopener\">@exoplatform<\/a> or <a href=\"https:\/\/twitter.com\/benjmestrallet\" target=\"_blank\" rel=\"noopener\">@benjmestrallet<\/a>). Click on \u201cCreate widget\u201d.<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6771\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source.png\" alt=\"02-choose-timeline-source\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source.png 864w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source-300x211.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source-768x540.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source-672x473.png 672w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source-466x328.png 466w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source-335x236.png 335w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source-186x131.png 186w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source-100x70.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/02-choose-timeline-source-43x30.png 43w\" sizes=\"(max-width: 864px) 100vw, 864px\" \/><\/a><\/p>\n<p>Copy the generated code.<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6770\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code.png\" alt=\"03-copy-generate-code\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code.png 864w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code-300x178.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code-768x456.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code-720x428.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code-500x297.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code-360x214.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code-200x119.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code-100x59.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/03-copy-generate-code-51x30.png 51w\" sizes=\"(max-width: 864px) 100vw, 864px\" \/><\/a><\/p>\n<h2>Step 2: Creating the Gadget in your eXo Platform Intranet<\/h2>\n<p>Log in to eXo Platform portal as an administrator. In the &#8220;Administration&#8221; dropdown menu, go to the IDE. In IDE app, select menu File \u00e0 New \u00e0 Google Gadget. Specify a name for your gadget (e.g., TwitterFeed.xml). In the CData tag, paste the widget code provided by Twitter.<\/p>\n<p>Our code looks like this:<\/p>\n<pre class=\"lang:default decode:true \">&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;Module&gt;\n &lt;ModulePrefs title=\"TwitterFeed\"\/&gt;\n &lt;Content type=\"html\"&gt;\n &lt;![CDATA[\n &lt;a class=\"twitter-timeline\" width='250' href=\"https:\/\/twitter.com\/search?q=%40exoplatform\" data-widget-id=\"395398389979811840\"&gt;Tweets about \"@exoplatform\"&lt;\/a&gt;\n &lt;script&gt;\n        !function(d,s,id){\n         var js,fjs=d.getElementsByTagName(s)[0],p=\/^https:\/.test(d.location)?'http':'https';\n         if(!d.getElementById(id)){\n                js=d.createElement(s);js.id=id;\n                js.src=p+\":\/\/platform.twitter.com\/widgets.js\";\n                fjs.parentNode.insertBefore(js,fjs);\n         }\n        }(document,\"script\",\"twitter-wjs\");\n &lt;\/script&gt;\n]]&gt;\n        &lt;\/Content&gt;\n&lt;\/Module&gt;<\/pre>\n<p>If you want to see your gadget working from within the IDE, click on Run \u00e0 Show preview from the menu.<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6769\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE.png\" alt=\"04-eXo-IDE\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE.png 1050w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-300x165.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-1024x564.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-768x423.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-720x396.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-500x275.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-360x198.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-200x110.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-100x55.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/04-eXo-IDE-54x30.png 54w\" sizes=\"(max-width: 1050px) 100vw, 1050px\" \/><\/a><\/p>\n<p>To finish, go to the &#8220;Run&#8221; menu and click on &#8220;Deploy gadget to GateIn&#8221;.<\/p>\n<h2>Step 3: Adding the Gadget to the Application Registry<\/h2>\n<p>Before you can insert the gadget into a page, you need to make it available to webmasters by adding it to a category in the application registry. To do this, go to Administration \u00e0 Applications. Click on the button &#8220;Gadget&#8221; and find your gadget on the list (we named ours &#8220;TwitterFeed&#8221;). When you are in your gadget, select &#8220;Click here to add into categories&#8221;. Choose the category &#8220;social&#8221; and validate.<\/p>\n<h2>Step 4: Inserting the Widget into Your Intranet Homepage<\/h2>\n<p>Now you are done with the configuration, so you can insert the new Twitter widget into the intranet homepage. On the homepage, from the &#8220;Edit&#8221; menu, select Page \u00e0 Edit Layout. In the editor, simply drag-and-drop the gadget onto the page. Here is the result:<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6768\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result.png\" alt=\"05-Result\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result.png 1301w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-300x149.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-1024x508.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-768x381.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-1250x620.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-720x357.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-500x248.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-360x178.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-200x99.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-100x50.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/03\/05-Result-61x30.png 61w\" sizes=\"(max-width: 1301px) 100vw, 1301px\" \/><\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>In only four simple steps, you should now have a custom Twitter feed integrated into your homepage. You can also quickly integrate any kind of widget into your portal following this process.<\/p>\n<p><b>Questions? Remarks? <a href=\"https:\/\/community.exoplatform.com\/portal\/dw\/\" target=\"_blank\" rel=\"noopener\">Join the discussion on the eXo Community<\/a>!<\/b><\/p>\n<p><!--begin adv-events--><\/p>\n<div class=\"adv-events\" style=\"background: #476fad; padding: 30px 20px; color: white; border-radius: 3px;\">\n<div class=\"media\">\n<div class=\"pull-right\"><a href=\"#\"><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-6587 alignright\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/02\/how-to-make-the-most-of-eXo-platform41.png\" alt=\"make-the-most-out-of-eXo-platform4\" width=\"161\" height=\"85\"><br \/>\n<\/a><\/div>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Make the most out of eXo Platform 4<\/h4>\n<p>Register to the next webinar and get a complete overview of what you can do with eXo Platform 4. <strong><a href=\"https:\/\/www.exoplatform.com\/contact-us\/?utm_source=BlogEn&amp;utm_medium=Blog&amp;utm_campaign=Content&amp;utm_content=link\n\">Reserve your seat now!<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!--end adv-events--><\/p>\n","protected":false},"excerpt":{"rendered":"eXo Platform 4 provides many features for building rich websites out of the box. But you can also use the platform&#8217;s web-based IDE to build custom plug-ins or gadgets that add an almost limitless number of capabilities. We wrote a simple gadget that displays a Twitter feed of all the recent company-related tweets, which is [&hellip;]","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":6767},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/6767"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=6767"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/6767\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=6767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=6767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=6767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}