{"id":1893,"date":"2013-08-09T11:56:37","date_gmt":"2013-08-09T16:56:37","guid":{"rendered":"http:\/\/www.powrsurg.com\/blog\/?p=1893"},"modified":"2013-08-09T11:56:37","modified_gmt":"2013-08-09T16:56:37","slug":"twitter-widget-fix","status":"publish","type":"post","link":"https:\/\/www.powrsurg.com\/blog\/2013\/08\/09\/twitter-widget-fix\/","title":{"rendered":"Twitter Widget Fix"},"content":{"rendered":"<p>Notice that the Twitter widget feed on your website broke? Twitter deprecated the old API and you need a new widget. Here&#8217;s how to fix it.<!--more--><\/p>\n<h2>Twitter Widget Fix: Most Sites<\/h2>\n<p><a href=\"http:\/\/www.powrsurg.com\/blog\/wp-content\/uploads\/2013\/08\/twitter-widget-fix-brand-builder-websites.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-1894\" alt=\"Example of the new Twitter widget.\" src=\"http:\/\/www.powrsurg.com\/blog\/wp-content\/uploads\/2013\/08\/twitter-widget-fix-brand-builder-websites.png\" width=\"239\" height=\"455\" srcset=\"https:\/\/www.powrsurg.com\/blog\/wp-content\/uploads\/2013\/08\/twitter-widget-fix-brand-builder-websites.png 239w, https:\/\/www.powrsurg.com\/blog\/wp-content\/uploads\/2013\/08\/twitter-widget-fix-brand-builder-websites-157x300.png 157w\" sizes=\"auto, (max-width: 239px) 100vw, 239px\" \/><\/a><\/p>\n<ol>\n<li>Log in to your Twitter account.<\/li>\n<li>Visit the <a href=\"https:\/\/twitter.com\/settings\/widgets\">Widgets<\/a> section under the account <a href=\"https:\/\/twitter.com\/settings\/\">Settings<\/a>.<\/li>\n<li>Click the <strong>Create New<\/strong> button.<\/li>\n<li>Under <strong>Configuration<\/strong> tailor the widget to your preferred look. Do not worry that you cannot define the width at this time. I recommend unchecking the &#8220;Auto-expand photos&#8221; and leaving the &#8220;Exclude replies&#8221; box checked. I do not believe that users want to see your replies, and the expanded photos will take up most of the feed. Feel free to experiment with these settings.<\/li>\n<li>Click the <strong>Create Widget<\/strong> button.<\/li>\n<li>Copy the text located below the <strong>Preview<\/strong> on the right. For us, the text looks like the following:<br \/>\n<code><code><br \/>\n&lt;a href=\"https:\/\/twitter.com\/BrandBuilderCo\" data-widget-id=\"347058359255588866\"&gt;Tweets by @BrandBuilderCo&lt;\/a&gt;<br \/>\n&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=\/^http:\/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\":\/\/platform.twitter.com\/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");&lt;\/script&gt;<br \/>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\n!function(d,s,id){var js,<span class=\"hiddenSpellError\" pre=\"\">fjs<\/span>=d.getElementsByTagName(s)[0],p=\/^http:\/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\":\/\/platform.twitter.com\/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");\n\/\/ ]]><\/script><br \/>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\n\/\/ \n\n!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=\/^http:\/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\":\/\/platform.twitter.com\/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"<span class=\"hiddenSpellError\" pre=\"\"-->twitter-wjs\");\n\/\/ ]]><\/script><\/code><\/code><script type=\"text\/javascript\">\/\/ <![CDATA[\n<span class=\"mceItemHidden\">\/\/ \n\n\/\/ \n\n!function(d,s,id){var js,<span class=\"hiddenSpellError\" pre=\"\"---->fjs=d.getElementsByTagName(s)[0],p=\/^http:\/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\":\/\/platform.twitter.com\/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"<span class=\"hiddenSpellError\" pre=\"\">twitter-wjs<\/span>\");\n\/\/ ]]&gt;<\/span>\n\/\/ ]]><\/script><\/li>\n<li>Find the old script on your current website.<\/li>\n<li>Replace the old script with the text script you just generated.<\/li>\n<li>Save your content.<\/li>\n<\/ol>\n<p>The Twitter developer documentation has <a href=\"https:\/\/dev.twitter.com\/docs\/embedded-timelines#options\">client side options<\/a> that enable you to change aspects of the Twitter widget. While it is not technically not standards compliant HTML, we recommend explicitly adding the width and height attributes mentioned in the documentation. For the SiteBrandBuilder Control Panel we use something like the following for our Twitter widget:<\/p>\n<p><code>&lt;a href=\"https:\/\/twitter.com\/BrandBuilderCo\" <strong>width=\"231\" height=\"450\"<\/strong> data-widget-id=\"347058359255588866\"&gt;Tweets by @BrandBuilderCo&lt;\/a&gt;<br \/>\n<code><code>&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=\/^http:\/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\":\/\/platform.twitter.com\/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");&lt;\/script&gt;<\/code><\/code><br \/>\n<code><script type=\"text\/javascript\">\/\/ <![CDATA[\n!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=\/^http:\/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\":\/\/platform.twitter.com\/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"<span class=\"hiddenSpellError\" pre=\"\">twitter-wjs<\/span>\");\n\/\/ ]]><\/script><\/code><\/code><\/p>\n<p>The <code>&lt;script&gt;...&lt;\/script&gt;<\/code> part is only needed once per page. If you are going to use multiple widgets on one page you can just include the <code>&lt;a&gt;...&lt;\/a&gt;<\/code> on the other widgets. It will still work if you leave the unnecessary script tags. It just increases the load time of the page.<\/p>\n<h2>Twitter Widget Fix: Content Security Policy<\/h2>\n<p>The above code needs some tweaking if your site uses <strong><a href=\"http:\/\/www.w3.org\/TR\/CSP\/\">Content Security Policy (CSP)<\/a><\/strong>. CSP is a security policy for preventing cross-site scripting. By default a browser will run anything that resides on the page. CSP it blocks all inline scripts. It also blocks external scripts, styles, and images except from the locations you specifically allow. This makes it more secure, but harder to run third-party widgets like Twitter.<\/p>\n<p>Adding CSP to your site is very technical and likely requires help from your hosting company. It is unnecessary for most sites. As such I will only cover the changes you must make to a site that already has a CSP and wishes to add Twitter. For these sites you will need to:<\/p>\n<ol>\n<li>Always load the script through an external script tag like so:<script class=\"hiddenSpellError\" type=\"text\/javascript\">\/\/ <![CDATA[\nsrc<\/span>=\"\/\/platform.twitter.com\/widgets.js\">\n\/\/ ]]><\/script><\/li>\n<li>Remove all the <code>&lt;script&gt;...&lt;\/script&gt;<\/code> for the widgets. Leave the <code>&lt;a&gt;...&lt;\/a&gt;<\/code> tags.<br \/>\n<code><script class=\"hiddenSpellError\" type=\"text\/javascript\">\/\/ <![CDATA[\nsrc<\/span>=\"\/\/platform.twitter.com\/widgets.js\">\n\/\/ ]]><\/script><\/code><\/li>\n<li>Add the following to your CSP&#8217;s script-src and style-src directives:platform.twitter.com https:\/\/platform.twitter.com cdn.syndication.twimg.com https:\/\/cdn.syndication.twimg.com *.twimg.com https:\/\/twitter.com<\/li>\n<\/ol>\n<p>After that you will have a working Twitter widget on your site again. It&#8217;s a little different from the old one and will take some getting used to.<\/p>\n<p>This post was originally published as <a href=\"http:\/\/www.brandbuilderwebsites.com\/blog\/2013\/06\/18\/twitter-widget-fix\/\">Twitter Widget Fix<\/a> for <a href=\"http:\/\/www.brandbuilderwebsites.com\/\">Brand Builder Websites<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Notice that the Twitter widget feed on your website broke? Twitter deprecated the old API and you need a new widget. Here&#8217;s how to fix it.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,30],"tags":[170,31],"class_list":["post-1893","post","type-post","status-publish","format-standard","hentry","category-informative","category-social-media","tag-content-security-policy","tag-twitter"],"_links":{"self":[{"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/posts\/1893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/comments?post=1893"}],"version-history":[{"count":1,"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/posts\/1893\/revisions"}],"predecessor-version":[{"id":1895,"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/posts\/1893\/revisions\/1895"}],"wp:attachment":[{"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/media?parent=1893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/categories?post=1893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.powrsurg.com\/blog\/wp-json\/wp\/v2\/tags?post=1893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}