Snippets for Widgets - Latest Tweets

[Anonymous]

I currently have Twitter widgets as Snippets. My marketing managers can then pull a snippet onto a landing page & have their most recent twitter updates shown.

Recently I was doing something in Chrome, speed testing, and I noticed an error message from Twitter API saying that the widget I'm using is being depreciated (in march).  I found the new widget twitter is using & went to create a snippet from it, but it failed. The snippet rich text editor strips all non-standard a href code, so the data-dnt & data-widget-id ---> with the twitter ID, etc are removed from the link, causing the snippet not to render. 

I was really hoping to just switch out the snippets so I had to do no further work. Put the new snippet in, reapprove, no need to touch the 1250 landing pages which all have this snippet inserted.

Unfortunately that doesn't look like it will happen. So instead I can insert the widget directly into the landing page's template. This causes a problem because my templates are language based & the marketing is country based. So if I insert a widget for France on the French template, when I use it in Belgium or Canada, I'll show French tweets. That's a problem.

Does anyone have any recommendations for me? Perhaps a way to stop the Snippet Rich Text editor from formatting my widget? I'd really love to keep the same functionality I've been using for a year and half. Perhaps there's a different widget that isn't from Twitter's widget maker that is only a script such that it is compliant with Marketo formatting. It doesn't look to edit < script > tags, but because the twitter widget uses < a href> it gets formatted.

New Widget :

<**** class="twitter-timeline" data-dnt="true" href="https://twitter.com/Planon_NL"  data-widget-id="341545436953325568">Tweets by @Planon_NL</a>
<****>!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");</****>

The parts in bold are removed, the parts in italics are intact.

[Anonymous]

Adam:

One way to work around Marketo's stripping out non-standard HTML is to use a text token. This is a somewhat convoluted workaround, but it does work. 

You can create a text token (NOT rich text) on the top level campaign, something like {{my.twitterScript}}, and then paste your non-standard HTML in there. As a text token, the content isn't filtered out.

This would definitely save you some time considering there are 1,250 landing pages to touch. Depending how your campaigns are organized, though, tokens might have to be replicated. 

The advantage of using tokens to insert the script is that you'll be able to segment which script appears easily through the snippet. Just put in a different token based on whatever segment you're using. Showing different Twitter account newsfeeds by location, maybe? Changing out the language based on location segment?


Best,
Edward Unthank
SEO/Web Specialist

[Anonymous]

This is definitely why I posted in the community. I'll check that out tomorrow, but I think it'll work fine for 90% of my campaigns. It's just the Global campaigns which have 10 landing pages in one program will need a different solution, and for that they can manually drop some code on a page, it'll be ok.

[Anonymous]

Adam, thank you for refering to the post!

[Anonymous]

Hey thanks for this Edward. I was able to update the 1250 landing pages using these snippets in about 45 minutes for 10 widgets. Taking the most amount of time to just update the landing pages of course as that's a massive volume. With a couple of windows open at the same time working on different functions I was able to do it quite fast, completely painless.

If I had had to open 1250 pages, delete a widget, add a manual html block. well, we would no longer support twitter feeds on our site 🙂

[Anonymous]

Hi I actually solved it in CSS instead of a token with Javascript!


HTML
----------
<div class="parentdivclassname">
       Hover your mouse here
      <div class="childdivclassname">this text/div will be effected.</div>
</div>


CSS
---------
.childdivclassname {                                                                 /* normal text color */
    color: #000000;
}
.parentdivclassname:hover .childdivclassname {                /* text color on hover */
    color: #666666;
}